Не важно каким способом задания размера шрифта в 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:
body { font-size: 62.5% }
Таким образом, 1em теперь будет равен 10px, что значительно упростит расчеты. Например, теперь font-size: 12px будет равнозначен font-size: 1.2em и т.д. Но не забывайте про наследование при относительных размерах.
Неудачное дополнение
Внимательные верстальщики заметили, что в таблице не хватает еще одного способа задания размеров — через ключевые слова (xx-small, x-small, small, medium, large, x-large и xx-large). В попытке дополнить авторскую таблицу этими значениями, я наткнулся на одну давнюю проблему — несоответствие значений (размеров) ключевых слов по умолчанию в разных браузерах.
Если не ошибаюсь, то проблема была подробно описана в старенькой (но актуальной по сей день и недавно переизданной) книге Джеффри Зельдмана «Веб-дизайн по стандартам» и заключается она в том, что за базовые размеры шрифта в браузерах принимаются разные значения (12 и 16px).
Автор перевода: rotorweb.ru
Источник: devirtuoso.com
Теги: Chrome, CSS, Firefox, Internet Explorer, Opera, Safary
Чертовски удобно, впервые вижу такую табличку. Сам все время использую пиксели так что проблем не возникает, но вот когда работаю с версткой сделанной мне фрилансерами, приходится разбираться. Спасибо за табличку, в закладки.
Сам был приятно удивлен, когда набрёл на табличку у буржуев, хотел было перевести статейку, а тут нашел его у Евгения Якимовича.