Как пользоваться
- Выберите исходную единицу — pt, px, мм, em или % — и введите размер.
- Все остальные единицы и предпросмотр текста появятся сразу.
- Для em, rem и процентов задайте базовый размер; браузеры по умолчанию используют 16 px.
Описание параметров
- Пункты и пиксели
- Пункт равен 1/72 дюйма, а CSS определяет пиксель как 1/96 дюйма, поэтому 1 pt = 4/3 px и 12 pt = 16 px.
- Миллиметры
- 1 pt = 25,4 ÷ 72 ≈ 0,353 мм. Это физический размер печатного кегля и точен при печати.
- em, rem и проценты
- Кратное базовому размеру. При базе 16 px: 1 em = 1 rem = 100% = 16 px = 12 pt.
- Китайский размер (号)
- Китайские текстовые редакторы обозначают размеры не пунктами, а названиями от 初号 (42 pt) до 八号 (5 pt). Их тоже можно переводить.
Популярные размеры
| pt | px | em (база 16 px) |
|---|---|---|
| 9 | 12 | 0,75 |
| 10,5 | 14 | 0,875 |
| 12 | 16 | 1 |
| 14 | 18,67 | 1,1667 |
| 18 | 24 | 1,5 |
| 24 | 32 | 2 |
Размеры для веба в пикселях, пунктах и rem
При размере шрифта браузера по умолчанию 16 px в качестве базового:
| Пиксели | Пункты | rem / em | Типичное применение |
|---|---|---|---|
| 12 px | 9 pt | 0,75 rem | Подписи, сноски |
| 14 px | 10,5 pt | 0,875 rem | Мелкий текст, метки |
| 16 px | 12 pt | 1 rem | Основной текст |
| 18 px | 13,5 pt | 1,125 rem | Крупный основной текст, вводные абзацы |
| 20 px | 15 pt | 1,25 rem | Небольшие заголовки |
| 24 px | 18 pt | 1,5 rem | Заголовки |
| 32 px | 24 pt | 2 rem | Заголовки страниц |
Какую единицу использовать
pt (пункты) применяются в печати и текстовых редакторах: 1 pt — это 1/72 дюйма, поэтому текст 12 pt имеет одинаковый физический размер на любом принтере.
px (CSS-пиксели) предназначены для экранов: 1 px определён как 1/96 дюйма при обычном масштабе, поэтому 12 pt равны 16 px.
rem и em — относительные единицы. 1 rem — это размер шрифта корневого элемента (обычно 16 px); 1 em — размер шрифта родительского элемента. Если задавать текст в rem, у людей, которые установили в браузере более крупный шрифт по умолчанию, текст везде будет крупнее.
Миллиметры помогают при сопоставлении с печатным образцом: измерьте высоту заглавной буквы, и размер основного текста будет примерно в 1,4 раза больше, в зависимости от гарнитуры.
Часто задаваемые вопросы
Сколько пикселей в 12 pt?
16 px. Умножьте пункты на 4/3, чтобы получить CSS-пиксели, или пиксели на 0,75, чтобы получить пункты.
Чем отличаются em и rem?
rem зависит от размера шрифта корневого элемента html, а em — от размера шрифта родительского элемента. Если размер нигде не задан, оба равны 16 px.
Почему размер текста на экране не совпадает с переводом?
CSS-пиксель — логическая единица, определённая при 96 DPI. Физический размер зависит от плотности пикселей и системного масштаба. Пункты и миллиметры точны только при печати.
Конфиденциальность
Этот инструмент работает полностью в браузере. Ваши файлы и текст обрабатываются на вашем устройстве и никогда не загружаются на наши серверы.