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

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

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

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

PtPxEm%
680.550
790.5555
7.5100.62562.5
8110.770
9120.7575
10130.880
10.5140.87587.5
11150.9595
12161100
13171.05105
13.5181.125112.5
14191.2120
14.5201.25125
15211.3130
16221.4140
17231.45145
18241.5150
20261.6160
22291.8180
24322200
26352.2220
27362.25225
28372.3230
29382.35235
30402.45245
32422.55255
34452.75275
36483300

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

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

Ссылки

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

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

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

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

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

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

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

5 комментариев

сначала новые
по рейтингу сначала новые по хронологии

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

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

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

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

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

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