Таблица соответствия размеров шрифтов в 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
Ссылки
- CSS Font Size Conversion Chart (Источник)
- Таблица соответствия размеров шрифтов в CSS (Перевод)
- CSS Font-Size: em vs. px vs. pt vs. percent
- Единицы измерения: «px», «em», «rem» и другие
Чертовски удобно, впервые вижу такую табличку. Сам все время использую пиксели так что проблем не возникает, но вот когда работаю с версткой сделанной мне фрилансерами, приходится разбираться. Спасибо за табличку, в закладки.
Сам был приятно удивлен, когда набрёл на табличку у буржуев, хотел было перевести статейку, а тут нашел его у Евгения Якимовича.
Возьму на заметку. Em постоянно попадается в шаблонах.
Всегда пожалуйста
Посмотрите мой Update со ссылкой — очень полезная тулза