Таблица соответствия размеров шрифтов в 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 |
Источник такой замечательной таблички — devirtuoso.com
Кроме того, еще один полезный совет от автора (давно известный, но, скорее всего, не всем): чтобы легко было конвертировать размеры шрифта из 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).
Вот что получилось у меня (для ознакомления любопытным):
Ключевое слово | Размер шрифта в Firefox 3.5, Chrome, Safari 4, px |
Размер шрифта в Opera 10, IE6,7,8, px |
---|---|---|
xx-small | 9 | 10 |
x-small | 10 | 12 |
small | 12 | 16 |
medium | 16 | 18 |
large | 18 | 24 |
x-large | 24 | 32 |
xx-large | 32 | 48 |
Моё мнение, что самый полный контроль над размерами шрифтов на сайтах предоставляют, конечно же, пиксели, а для печати удобнее всего использовать pt. Хотя на практике очень часто используют комбинированный метод %/em, чтобы обеспечить масштабируемость и контроль над размерами шрифта у пользователей IE6.
А какие указания для размеров используете вы? Делитесь мыслями в комментариях.