Конвертер единиц CSS
Конвертируйте между px, rem, em и pt. Настройте базовый размер шрифта.
Пункты (pt):12pt
Размер шрифта корневого элемента <html> вашего сайта (стандарт браузера: 16px)
rem относительно размера шрифта корневого элемента (<html>). Стандарт браузера — 16px, поэтому 1rem = 16px, если не изменено.
1pt = 1,333px при 96 DPI (экранное разрешение). Пункты используются главным образом в печатном CSS и дизайнерских инструментах.
Распространённые CSS-размеры
| px | rem | pt | Типичное использование |
|---|---|---|---|
| 8 | 0.5 | 6 | Иконка / border-radius |
| 10 | 0.625 | 7.5 | Код, мелкий текст |
| 12 | 0.75 | 9 | Мелкий текст / подсказка |
| 14 | 0.875 | 10.5 | Основной текст (компактный) |
| 16 | 1 | 12 | Стандартный основной текст |
| 18 | 1.125 | 13.5 | Основной текст (комфортный) |
| 20 | 1.25 | 15 | Крупный текст / подзаголовок |
| 24 | 1.5 | 18 | H3 / крупный заголовок |
| 32 | 2 | 24 | H2 / заголовок display |
| 48 | 3 | 36 | H1 / главный заголовок |
Часто задаваемые вопросы
px (пиксели) — абсолютная единица, которая всегда отображается одинаково независимо от настроек пользователя. rem (root em) относительна размеру шрифта элемента <html> — при стандарте 16px: 1rem = 16px, 2rem = 32px. em зависит от размера шрифта родительского элемента. rem предпочтителен для масштабируемых макетов: если пользователь установит размер шрифта браузера 20px для доступности, все значения rem масштабируются пропорционально.
Разделите значение в пикселях на базовый размер шрифта. При стандарте 16px: rem = px ÷ 16. Например: 24px ÷ 16 = 1,5rem, 32px ÷ 16 = 2rem, 14px ÷ 16 = 0,875rem. Многие разработчики задают html { font-size: 62,5%; }, чтобы 1rem = 10px — это упрощает вычисления.
При стандартном базовом размере шрифта 16px: 16px = 1rem. Ключевые значения: 8px = 0,5rem, 12px = 0,75rem, 24px = 1,5rem, 32px = 2rem, 48px = 3rem.
rem учитывает предпочтения пользователя по размеру шрифта в браузере, что важно для доступности. Пользователи со слабым зрением могут увеличить базовый размер шрифта, и все значения rem масштабируются автоматически. Значения px игнорируют эту настройку. rem также упрощает адаптивный дизайн: измените корневой размер шрифта с помощью медиазапроса, и все rem-элементы масштабируются пропорционально.