Таблица соответствия размеров шрифтов в CSS
Пятница, 11 декабря 2009
Не важно, каким способом задания размера шрифта в 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.
А какие указания для размеров используете вы? Делитесь мыслями в комментариях.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе событий:
- подпишитесь на обновления по RSS
- получайте новые статьи на E-mail
- добавьте в Twitter: Таблица соответствия размеров шрифтов в CSS
- добавьте статью в закладки:
* * *
Такую табличку еще бы в pdf упрятать ;) По поводу единиц измерения для веба — пиксели и только они. IE 6 конечно, случай особый, но есть ли смысл идти на поводу таким пользователям? Думаю, нет.
Да, я что-то об этом и не подумал… Если буду себе для печати оформлять, обязательно выложу в блог для скачивания.
С недавних поре вернулся на PX после 4х лет использования EM. Почему? Да потому что главной причиной применения EM был IE6 сего понимание PX. А т.к. его доля уже стремится к 10%, а все остальные браузеры уже применяют полное масштабирование страниц, необходимость в EM отпадает.
Спасибо за перевод, поставил себе с ссылкой на вас
kobzarev.com/docs/css-fon...rsion-chart.html
Без проблем.
Но это, как бы, и не совсем перевод :) Я ими обычно не увлекаюсь, самому есть что сказать или дополнить чужие мысли.
[...] и решения в WEB дизайне” выложил очень полезную таблицу соответствия размеров и шрифтов в css. Огромное спасибо, таблица оказалось очень [...]
Значит вольный перевод. Всё-равно спасибо
Спасибо за статью... размер — это важная тема))
Да, из этого надо бы читшит хороший сделать.
Есть еще конвертеры типа такого convert-to.com/pixels-px- ... -conversion.html
Ну и стандартный 62.5% трюк, который леким движением руки в body превращает все em в аналогичные px :)
У меня в закладках есть такие — pxtoem.com и riddle.pl/emcalc/
Но из-за того самого трюка, я ими почти никогда не пользовался :)
Для меня есть куда большая проблема — рендеринг шрифтов в разных браузерах идет по-разному. Ладно бы только разная толщина штрихов (в Хроме, Сафари и Фаерфоксе все надписи смотрятся куда лучше), так и фактические размеры шрифтов получаются разными — в Опере чуть мельче, в осликах — чуть больше. Вот от этого даже трюк не спасает.
Это уже давно не проблема.
Спасибо!
Для меня почемуто всегда 1pt к 1px теперь знаю сколько точно разные величины :) Спасибо больш.
Всегда использовал и использую px, но все равно было интересно.
Спасибо. Добавил себе в закладки :)