Время для прочтения: 1 мин. 17 сек.

Таблица соответствия размеров шрифтов в CSS

Не важно каким способом задания размера шрифта в CSS вы пользуетесь, но иногда бывает необходимость посмотреть, какое значение соответствует текущему в другой системе единиц (например, какому размеру в px или %, будет соответствовать шрифт, размером 1.4 em) или быстро перевести одни размеры в другие.

Чтобы это было просто, предлагаю держать для таких случаев перед глазами (или в закладках) следующую таблицу соответствия размеров шрифтов.

Pt Px Em %
6 8 0.5 50
7 9 0.55 55
7.5 10 0.625 62.5
8 11 0.7 70
9 12 0.75 75
10 13 0.8 80
10.5 14 0.875 87.5
11 15 0.95 95
12 16 1 100
13 17 1.05 105
13.5 18 1.125 112.5
14 19 1.2 120
14.5 20 1.25 125
15 21 1.3 130
16 22 1.4 140
17 23 1.45 145
18 24 1.5 150
20 26 1.6 160
22 29 1.8 180
24 32 2 200
26 35 2.2 220
27 36 2.25 225
28 37 2.3 230
29 38 2.35 235
30 40 2.45 245
32 42 2.55 255
34 45 2.75 275
36 48 3 300

Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из em в px и обратно, установите размер шрифта для body в 16px.

Обновление от 23.05.2015: для более детального понимания единиц измерения в CSS появился визуальный сервис CSS Ruler

Ссылки

Пошерить
Плюсануть
Отправить
Вотсап

WordPress Digest Мой канал в Телеграм, посвящённый WordPress

Возьму на заметку. Em постоянно попадается в шаблонах.

Посмотрите мой Update со ссылкой - очень полезная тулза

Всегда пожалуйста

Кобзарёв Михаил

Сам был приятно удивлен, когда набрёл на табличку у буржуев, хотел было перевести статейку, а тут нашел его у Евгения Якимовича.

Чертовски удобно, впервые вижу такую табличку. Сам все время использую пиксели так что проблем не возникает, но вот когда работаю с версткой сделанной мне фрилансерами, приходится разбираться. Спасибо за табличку, в закладки.

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

1. Нажимая на кнопку "Отправить", я даю согласие на обработку персональных данных.

2. Для вставки кода используйте специальные теги [code lang="php"]ваш код[/code]