PX в REM и межстрочный интервал
- Файлы не покидают устройство
- Работает в браузере
- Бесплатно, без регистрации и водяных знаков
Converter
Type in any box, the rest follow.Preview
Typography is the craft of making language visible. A good line length and generous leading let the eye glide from one line to the next without losing its place.
Common sizes
Click a row to load it into the converter.| px | rem | em | pt | vw | Line-height |
|---|---|---|---|---|---|
| 10 | 0.625 | 0.625 | 7.5 | 0.694 | 1.7 |
| 12 | 0.75 | 0.75 | 9 | 0.833 | 1.65 |
| 13 | 0.8125 | 0.8125 | 9.75 | 0.903 | 1.63 |
| 14 | 0.875 | 0.875 | 10.5 | 0.972 | 1.6 |
| 15 | 0.9375 | 0.9375 | 11.25 | 1.042 | 1.57 |
| 16 | 1 | 1 | 12 | 1.111 | 1.55 |
| 18 | 1.125 | 1.125 | 13.5 | 1.25 | 1.52 |
| 20 | 1.25 | 1.25 | 15 | 1.389 | 1.5 |
| 24 | 1.5 | 1.5 | 18 | 1.667 | 1.4 |
| 28 | 1.75 | 1.75 | 21 | 1.944 | 1.32 |
| 32 | 2 | 2 | 24 | 2.222 | 1.25 |
| 36 | 2.25 | 2.25 | 27 | 2.5 | 1.23 |
| 40 | 2.5 | 2.5 | 30 | 2.778 | 1.2 |
| 48 | 3 | 3 | 36 | 3.333 | 1.15 |
| 56 | 3.5 | 3.5 | 42 | 3.889 | 1.13 |
| 64 | 4 | 4 | 48 | 4.444 | 1.1 |
| 72 | 4.5 | 4.5 | 54 | 5 | 1.09 |
| 96 | 6 | 6 | 72 | 6.667 | 1.05 |
Type scale
Fluid type with clamp()
Text grows smoothly between two viewport widths and stays fixed outside them.
font-size: clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem);
The quick brown fox
Как пользоваться: PX в REM и межстрочный интервал
Переводите между px, rem, em, pt, % и vw с вашими размерами корневого и родительского шрифта и получите рекомендуемый межстрочный интервал и длину строки для любого размера. Страница также строит модульную типографическую шкалу и правило fluid clamp() для адаптивного текста.
- 1
Задайте размер корневого шрифта, родительского шрифта и ширину окна в «Контексте».
- 2
Введите значение в любое поле конвертера; остальные единицы следуют за ним.
- 3
Прочитайте рекомендуемый межстрочный интервал и удобную длину строки для этого размера.
- 4
По желанию соберите типографическую шкалу из коэффициента или правило fluid clamp() и скопируйте CSS.
Частые вопросы
Сколько пикселей в 1rem?
1rem равен размеру шрифта корня (<html>), который браузеры по умолчанию ставят в 16 px. Смените размер корневого шрифта, если у сайта другая база.
В чём разница rem и em?
rem относительно размера корневого шрифта; em и % относительно размера шрифта родительского элемента. Задайте размер родительского шрифта, чтобы правильно перевести em.
Как выбирается межстрочный интервал?
По обычной типографической практике: около 1.5 для основного текста и плотнее для крупных заголовков. Также показана версия, привязанная к сетке 4 px.
Что делает генератор clamp()?
Он пишет font-size, который плавно растёт между минимальным и максимальным размером на двух ширинах окна и остаётся фиксированным вне их. «Симулировать ширину окна» показывает результат на любой ширине.
Можно ли переводить пункты для печати?
Да. pt использует соотношение CSS 72 pt к 96 px, поэтому 12 pt равны 16 px.