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

css-font-size-sonversion-chart

Не важно, каким способом задания размера шрифта в 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.

А какие указания для размеров используете вы? Делитесь мыслями в комментариях.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 25

  1. @ Cuprum, 11.12.2009 в 10:33

    Такую табличку еще бы в pdf упрятать ;) По поводу единиц измерения для веба — пиксели и только они. IE 6 конечно, случай особый, но есть ли смысл идти на поводу таким пользователям? Думаю, нет.

    Ответить

    • rotor, 11.12.2009 в 11:07

      Да, я что-то об этом и не подумал… Если буду себе для печати оформлять, обязательно выложу в блог для скачивания.

      Ответить

  2. @ Zigzag, 11.12.2009 в 11:34

    С недавних поре вернулся на PX после 4х лет использования EM. Почему? Да потому что главной причиной применения EM был IE6 сего понимание PX. А т.к. его доля уже стремится к 10%, а все остальные браузеры уже применяют полное масштабирование страниц, необходимость в EM отпадает.

    Ответить

  3. @ mihdan, 11.12.2009 в 14:07

    Спасибо за перевод, поставил себе с ссылкой на вас

    kobzarev.com/docs/css-fon...rsion-chart.html

    Ответить

    • rotor, 11.12.2009 в 14:54

      Без проблем.

      Но это, как бы, и не совсем перевод :) Я ими обычно не увлекаюсь, самому есть что сказать или дополнить чужие мысли.

      Ответить

  4. @ БлогОбзор - Выпуск 1-ый., 11.12.2009 в 14:12

    [...] и решения в WEB дизайне” выложил очень полезную таблицу соответствия размеров и шрифтов в css. Огромное спасибо, таблица оказалось очень [...]

    Ответить

  5. @ mihdan, 11.12.2009 в 16:33

    Значит вольный перевод. Всё-равно спасибо

    Ответить

  6. Стоматолог, 12.12.2009 в 10:24

    Спасибо за статью... размер — это важная тема))

    Ответить

  7. @ Сергей М., 12.12.2009 в 13:25

    Да, из этого надо бы читшит хороший сделать.

    Есть еще конвертеры типа такого convert-to.com/pixels-px- ... -conversion.html

    Ну и стандартный 62.5% трюк, который леким движением руки в body превращает все em в аналогичные px :)

    Ответить

    • rotor, 12.12.2009 в 15:01

      У меня в закладках есть такие — pxtoem.com и riddle.pl/emcalc/

      Но из-за того самого трюка, я ими почти никогда не пользовался :)

      Ответить

  8. @ Сергей М., 13.12.2009 в 13:37

    Для меня есть куда большая проблема — рендеринг шрифтов в разных браузерах идет по-разному. Ладно бы только разная толщина штрихов (в Хроме, Сафари и Фаерфоксе все надписи смотрятся куда лучше), так и фактические размеры шрифтов получаются разными — в Опере чуть мельче, в осликах — чуть больше. Вот от этого даже трюк не спасает.

    Ответить

  9. @ Коментатор, 13.02.2010 в 21:36

    Спасибо!

    Для меня почемуто всегда 1pt к 1px теперь знаю сколько точно разные величины :) Спасибо больш.

    Ответить

  10. Romul, 03.03.2010 в 0:37

    Всегда использовал и использую px, но все равно было интересно.

    Ответить

  11. Mashkovtsev, 07.03.2010 в 21:56

    Спасибо. Добавил себе в закладки :)

    Ответить

  12. Человек-писатель, 24.03.2010 в 11:11

    Использовал px и em. В конце концов сошелся сам с собой в мысли о том, что px корректен во всех броузерах, а с em иногда есть проблемы.

    И вообще — ИЕ это зло!!!

    Ответить

  13. Alex, 21.04.2010 в 14:02

    Большое спасибо! Реально помогла статейка, а то раньше не мог понять с этими pt...

    Ответить

  14. cleric, 19.06.2010 в 23:06

    Хммм. Ну не проще ли дать понять, что в дюйме 72 пункта, а принятое в Windows условное физическое разрешение 96 dpi. Поэтому pt и преобразуются в округленное до целого произведение с 96 / 72 = 1.3 (3).

    Кстати, для старых маков эта условность была равна 72 dpi.

    В реальности физическое разрешение монитора неизвестно компьютеру, потому и условность.

    Ну а сравнение с em позабавило)) Базовый размер шрифта задается в html с помощью настроек браузера. По этой причине указание размера шрифта для html (по старинке для body) в em или в % берет за основу это самое базовое значение. А оно может быть и 40px...

    Ответить

  15. @ dmitrii, 31.08.2010 в 12:51

    Если поставить dpi, отличный от самого распространённого сейчас в 96dpi, например 120dpi, то все шрифты, заданные в браузере в pt резко увеличат свой размер. Обычно такое производят владельцы больших мониторов у которых «Ой, буковки какие маленький».

    Мораль — можно использовать только px, т.к. ие6 гибнет.

    Ответить

  16. John Silver, 23.02.2011 в 15:02

    Zigzag, ну надо же... Как Вы решили проблему с визуализацией шрифтов? Интересно знаете это таинство еще ктонить кроме Зигзага...? Честно, впервые слышу и недоумеваю.

    Ответить

  17. Дмитрий, 03.03.2011 в 22:18

    Вы отличный дизайнер...Добавил себе в закладки, может проскочут интересные уроки

    Ответить

  18. Билайн, 30.03.2011 в 19:11

    Нашел интерактивную таблицу для удобного перевода em px pt % allcalc.ru/node/510

    Ответить

  19. Farat, 28.04.2011 в 14:52

    Спасибо! Сохранил в закладках, пригодится.

    Ответить

  20. @ Вася, 20.05.2012 в 7:01

    В psd макете 14.5 пт стоит размер шрифта

    Ставлю в css 14.5pt — гораздо больше получается, чем в макете. Ставлю 20px — еще больше, причем 14.5pt явно отличается от 20px.

    Ответить

  21. @ Сергей, 26.10.2012 в 0:37

    Поправте если неправ но — «базовые размеры шрифта в браузерах принимаются разные значения (12 и 16px)». Вроде как базовые размеры (medium — 16px и 18px).

    Ответить

Есть что сказать?