Размер шрифта для адаптивных сайтов

Помимо определения шрифтов для сайта, также важно выбрать правильный размер шрифта. Размер шрифта может создать контраст и помочь пользователям сосредоточиться на вашем ключевом.

Однако один размер не стоит использовать один размер для всех разрешений экрана. Создаваемые сайты просматриваются в самых разных браузерах и с разными размерами области просмотра: ноутбуки, планшеты, телевизоры, смартфоны — возможно, даже умные часы. Поэтому вам нужно тщательно подходить к выбору размера шрифта, и вот о чем следует помнить.

Размер шрифта в веб-дизайне

Размер шрифтов в Интернете можно изменять разными способами:

Pixel (px) — Пиксель.
Point (pt) — Пункты.
em — размер шрифта зависит от размера шрифта родительского контейнера.
Root em (rem) — размер шрифта наследуется от корня стиля.
Percentage (%) — процент.
(vw или vh) — ширина или высота области просмотра.
(см) — сантиметр.
(мм) — миллиметр.
Inch (in) — дюйм.

В большинстве случаев следует избегать абсолютных значений, таких как см, мм, in и pt, для веб-дизайна, поскольку они будут выглядеть по-разному на каждом устройстве.

Пиксель (px) — это своего рода абсолютный размер, поскольку он основан на размере пикселя экрана пользователя. Однако использование px для изменения размера шрифта — довольно распространенная практика, и большинство веб-браузеров оснащены таким образом, чтобы дизайн выглядел одинаково на разных разрешениях даже при использовании px. Это также очень простая единица для использования между командами дизайнеров, которые обычно проектируют по пикселям.

Другой вариант — использовать em и rem. em наследует свой размер от своего родителя, а rem наследует от корневого стиля (поэтому он назван root em).

Размер шрифта по умолчанию во всех браузерах составляет примерно 16 пикселей. Обычной практикой является установка корневого font-size равным 62,5%, что переводит значение по умолчанию 16 пикселей примерно в 10 пикселей. Мы делаем это, чтобы упростить мысленное преобразование размера шрифта при использовании em или rem (например, 1 rem = примерно 10 px, а 1,8 rem = примерно 18 px). Это удобный подход по двум причинам:

Преобразование между пикселями и rem легко вычислить в уме.
Пользователь может изменить предпочитаемый размер шрифта по умолчанию, и веб-сайт будет автоматически настраиваться в соответствии с его потребностями.

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

В CSS это делается с помощью медиа-запросов.

Например, мы можем установить размер шрифта по умолчанию для элемента h1 равным 3,5 rem. Это может отлично смотреться на настольном компьютере, но на мобильном устройстве будет слишком большим. Следовательно, у нас может быть медиа-запрос вроде:

h1 {
    font-size: 3.5rem;
}

@media only screen and (max-width: 400px) {
    h1 {
        font-size: 2rem;
    }
}

Это позволит соответствующим образом настроить размеры шрифта для мобильного окна просмотра (при условии, что 400 px — это ширина мобильного устройства).

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

Это связано с тем, как разработаны шрифты. Верхние и нижние части различных шрифтов обычно различаются от гарнитуры к гарнитуре, из-за чего может казаться, что их пропорции разные.

Оптимальные размеры шрифтов для рабочего стола

Нет точных правил для размера шрифта, но есть несколько хороших практик, о которых следует подумать при разработке для настольных ПК (также есть рекомендации Google):

Body text (Основной текст) — размер шрифта должен составлять от 16 до 18 пикселей для удобочитаемости (или от 1,6 до 1,8 бэр, используя наши правила изменения размеров, упомянутые выше). Если можно позволить увеличить изображение, то даже 21 пиксель может быть приятным для чтения.

Headings (Заголовки) — заголовки должны быть примерно в 1,96 раза больше основного текста, чтобы создать достаточный контраст. Это будет означать, что если использование 18 пикселей для размера основного шрифта, тогда будет применено около 35 пикселей для заголовков.

Subheadings (Подзаголовки) — они должны быть немного меньше, чем размер заголовка, с некоторыми корректировками, такими как меньший вес, чтобы создать контраст между ними. Например, если использовались 35 пикселей для заголовка, то для подзаголовка использовать около 30 пикселей.

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

Оптимальные размеры шрифтов для мобильных устройств

На мобильных устройствах меньше места для отображения контента. Кроме того, пользователи обычно держат устройства ближе к глазам, чем к экрану ноутбука или рабочего стола, а это значит, что ваши шрифты могут (и должны) быть меньше, чем на настольных компьютерах:

Body text (Основной текст) — размер шрифта для основного текста должен быть не менее 16 пикселей. В некоторых случаях можно уменьшить размер шрифта (например, если шрифт имеет необычно большие символы или используются прописные буквы), при этом минимальным размером будет 14 пикселей. Для контекста в Material Design от Google используется минимальный предлагаемый размер дополнительного шрифта в 14 пикселей, а в рекомендациях Apple — 15 пикселей.

Headings (Заголовки). Заголовки должны быть примерно в 1,3 раза больше, чем основной текст, чтобы создать достаточный контраст. Это будет означать, что если используется 16 пикселей для размера основного шрифта, то для заголовков должен использоваться ~ 21 пиксель. Это уменьшено по сравнению с 3,5 бэр, которые использовались на настольных компьютерах.

Subheadings (Подзаголовки) — здесь тоже часто бывают уменьшены по сравнению с размером заголовка, но есть небольшая проблема, в которой подзаголовок может выглядеть слишком похожим на размер шрифта основного текста. По этой причине некоторые дизайнеры предпочитают визуально отличать подзаголовки за счет использования веса, форматирования, например курсива и межбуквенного интервала. Если использовался 21 пиксель для заголовка, можно выбрать 18 или 16 пикселей для подзаголовка, но с меньшим весом, чем заголовок или основной текст.

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

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

Источник