Существует множество единиц измерения шрифтов. Для чего нужно так много метрик? Какие лучше использовать в создании рассылок и web-дизайне? Разберемся в данной статье.

PX

Пиксели – это фиксированный размер единиц, как сантиметры или миллиметры в реальной жизни, используемых для всего, что читается на экранах. Пиксель равен одной точке на экране, являющейся наименьшим элементом разрешения экрана. 

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

Пиксель web-дизайнеры используют для идеально-пиксельного (pixel-perfect) представления своего сайта.

Достоинства:

  • Точность, четкость и понятность.

Недостатки: 

  • Нельзя увеличить для удобства чтения людям с нарушением зрения или для чтения с мобильного устройства.
  • С относительными величинами в web-дизайне работать проще, с точки зрения адаптивности под каждое устройство. Относительные величины (em, %) являются более “мощными”. Позволяют устанавливать отношения между размерами.

PT

Единица pt (пункт) была создана для печати. Pt – это типографский пункт (точка), он является абсолютной величиной. 

PT = 4/3 px

PT = 1/72 дюйма (0,35мм)

Как и px, pt имеет четкий размер и не может масштабироваться в зависимости от размера устройства.

PX или PT?

Лучше пользоваться в web-дизайне PX, потому что будет проще выравнивать текст с картинками, а также линии, равные 1PX будут выглядеть четко (без мягкой огранки). 

Также PX избавляет вас от необходимости знать размер устройства, PX будут выглядеть везде одинаково хорошо.

PT лучше использовать для печати, когда необходимо, чтобы текст был строго определенного размера.

EM

1EM – текущий размер шрифта, используемый в тексте. Это измерение относительное (определяются по текущему размеру шрифта).

Можно задавать заголовки в 2 раза больше (относительно шрифта родителя), меняя параметры EM {font-size: 2em}.

Или, если текущий размер 24pt, то 1EM = 24PT. Если масштабировать размер, то 2EM будет равняться 42PT. 

Достоинства:

  • Плюс данной единицы в том, что не приходится задавать размер для элемента BODY (в HTML). В этом случае вы используете размер шрифта по умолчанию для устройства, этот размер удобнее для читателя.
  • Масштабируемость и хорошая совместимость с мобильными устройствами. Именно поэтому данную единицу чаще используют для веб-документов.

REM

REM (от “room em” – корневой элемент)  – величина, используемая для изменения размера шрифта в корневом документе. REM задает размер относительно шрифта элемента html.

REM для всего документа один и тот же, в отличие от EM, который может быть для каждого элемента свой. Можно  использовать для настройки одинакового внешнего отступа для элементов.

%

Процент – относительная единица, как и EM.

Но в данном случае, заданный Font-size = 100%. Используя проценты, текст масштабируется на мобильных устройствах, что удобнее для пользователя.

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

Итак, для web-дизайна лучше всего использовать PX, EM, REM и %. RT лучше всего использовать в печатном деле, когда нужно, чтобы текст был строго определенного размера.