Pixels (px): пикселы имеют фиксированный размер единиц, которые используются на экранах монитора (например, для чтения на экране компьютера). Один пиксель равен размеру одной точки на экране монитора (самый малый элемент разрешения вашего экрана). Многие веб-дизайнеры используют px в веб-документах в целях получения пиксель-идеального (pixel-perfect) представления своего сайта, отображаемого в браузере. Одна из проблем, с использованием px заключается в том, что эти единицы не позволяют изменять масштаб для слабовидящих читателей или мобильных устройств.
Points (pt): пункты, традиционно, используются в печатных СМИ (все, что должно быть напечатано на бумаге, и т. д.). Один pt равен 1/72 дюйма. Пункты, так же, как и пикселы, имеют фиксированный размер единицы и не могут масштабироваться.
Ems (em): специальная единица измерения, которая равна ширине прописной буквы «М» для текущего шрифта. Em масштабируемая единица, используется в веб-документах. По факту, em равна текущему font-size, например, если font-size в документе 12pt, 1em равен 12pt, соответсвенно, 2em = 24pt, 0.5em = 6pt и т. д. Использование em становятся все более популярным в веб-документах из-за масштабируемости и возможности с пользой применять в мобильных устройствах.
Percents (%): измерение размера шрифта в процентах похоже на em, за исключением нескольких принципиальных различий. Текущий font-size шрифта равен 100% (т.е. 12pt = 100%). При использовании процентов, ваш текст становится полностью масштабируемым для мобильных устройств и удобства пользователя (accessibility).
Points | Pixels | Ems | Проценты |
---|---|---|---|
6pt | 8px | 0.5em | 50% |
7pt | 9px | 0.55em | 55% |
7.5pt | 10px | 0.625em | 62.5% |
8pt | 11px | 0.7em | 70% |
9pt | 12px | 0.75em | 75% |
10pt | 13px | 0.8em | 80% |
10.5pt | 14px | 0.875em | 87.5% |
11pt | 15px | 0.95em | 95% |
12pt | 16px | 1em | 100% |
13pt | 17px | 1.05em | 105% |
13.5pt | 18px | 1.125em | 112.5% |
14pt | 19px | 1.2em | 120% |
14.5pt | 20px | 1.25em | 125% |
15pt | 21px | 1.3em | 130% |
16pt | 22px | 1.4em | 140% |
17pt | 23px | 1.45em | 145% |
18pt | 24px | 1.5em | 150% |
20pt | 26px | 1.6em | 160% |
22pt | 29px | 1.8em | 180% |
24pt | 32px | 2em | 200% |
26pt | 35px | 2.2em | 220% |
27pt | 36px | 2.25em | 225% |
28pt | 37px | 2.3em | 230% |
29pt | 38px | 2.35em | 235% |
30pt | 40px | 2.45em | 245% |
32pt | 42px | 2.55em | 255% |
34pt | 45px | 2.75em | 275% |
36pt | 48px | 3em | 300% |