Используйте читаемые размеры шрифтов

Текст должен легко читаться

Существует множество различных размеров экранов. И нужно обеспечить легко читаемость текста на самых маленьких и самых больших экранах. Например, с помощью font size HTML.

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

Есть несколько способов сделать это:

1. Установка адаптивной темы / шаблона;
2. Использование адаптивного дизайна / медиа-запросов (CSS);
3. Разработка разных версий сайта.

1. Приобретение адаптивной темы или шаблона

Google рекомендует адаптивный дизайн. С помощью адаптивной темы проблема с размерами шрифтов будет решена.

2. Использование медиа-запросов / адаптивного дизайна

Если у вас есть опыт работы с CSS, и вы не боитесь изучить, как управлять тем, чтобы текст легко читался на любых размерах экранов.

Как работает font-size

Style font size HTML объявляется в файле CSS. Если размер шрифта не объявлен, браузер будет использовать значение по умолчанию, которое обычно составляет 16px.

В коде CSS установка значения font-size выглядит следующим образом:

p{font-size:120%;}

Для размера шрифта можно использовать различные единицы измерения: пиксели (px), пункты (pt), em и проценты (%).

Если речь идет о выборе шрифта и адаптивном дизайне, Google рекомендует следующее:

• Используйте базовый размер шрифта - 16 пикселей в CSS. Настраивайте другие размеры по мере необходимости с помощью свойств шрифта;
• Чтобы определить типографический масштаб, используйте размеры относительно базового;
• Для текста должно задаваться вертикальное пространство между символами. Общая рекомендация состоит в том, чтобы использовать высоту строки в 1.2 em, которая по умолчанию применяется браузерами;
• Используйте ограниченное количество шрифтов и типографских масштабов.

Используйте базовый размер шрифта CSS в 16 пикселей

В этой рекомендации говорится, что размер шрифта для страницы должен объявляться явным образом - 16 px. Это значит, что нужно использовать значение HTML CSS font size, которое устанавливает размер шрифта в 16 пикселей для всей станицы. Обычно это делается через элемент "body" или "html".

Чтобы определить типографический масштаб, используйте размеры относительно базового размера

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

Способ, рекомендуемый Google, это "относительные размеры". В наших примерах мы будем использовать проценты.

На приведенном выше изображении font size HTML для H1 объявлен как "250%". Текст H1 будет в два с половиной раза крупнее, чем базовый в 16px. Это и есть "относительный размер". Благодаря этому везде, где мы объявляем размер шрифта, он всегда будет устанавливаться в несколько раз больше, меньше или того же размера, что и базовый шрифта:

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

Для текста должно задаваться вертикальное пространство между символами, и, возможно, для каждого шрифта его нужно будет корректировать:

Еще одним важным аспектом читаемости шрифта является пространство между строками текста. В CSS это свойство называется "line-height".

Google рекомендует использовать высоту строки 1.2, которая по умолчанию используется в браузерах. Это означает, что расстояние между строками текста будет в 1,2 раза превышать style font size HTML.

Для этого нужно объявить высоту строки в CSS:

p{font-size:120%;line-height:1.2;}

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

Задав высоту строки (как минимум) в 1,2, мы способствуем тому, что текст будет легко читать даже на таких маленьких экранах.

Проблемы со списками ссылок

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

Чтобы решить эту проблему, попробуйте:

ul{line-height:200%;}

Увеличив высоту строки, мы гарантируем, что для ссылок в списке будет достаточно пространства. Вам нужно будет задать значение, подходящее для сайта, и изменить его на "200%".

Используйте ограниченное количество шрифтов и типографских масштабов

Слишком много шрифтов и объявлений font size HTML может привести к тому, что макет страницы станет чрезмерно сложным. Такие старицы могут читаться на стационарном мониторе, но на небольшом экране они точно будут трудно читаемы. Помните, что "маленький" текст будет еще меньше при просмотре на мобильном устройстве.

Как сделать шрифт читаемым на любом устройстве

Размер текста управляется медиа-запросами, которые объявляются для различных размеров экранов. Можно сказать, что для мобильных устройств задается один размер текста, а для стационарных компьютеров - другой.

Рассмотрим пример медиа-запроса, с помощью которого задается размер шрифта.

html{font-size:100%;} 
@media(min-width:60em){html{font-size: 100%}}

У нас есть один и тот же размер шрифта, объявленный для больших и маленьких экранов. Размер шрифта составляет "100%". Так как мы объявили базовый font size HTML в 16 пикселей, это означает, что он будет использоваться на стационарных ПК и на небольших мобильных устройствах. Этот размер всегда будет выглядеть аккуратно и легко читаться:

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

В подобной ситуации нужно будет изменить медиа-запрос. В первом примере style font size HTML был одинаковым (100%) для стационарных компьютеров и мобильных устройств.

Рассмотрим медиа-запрос, который будет задавать меньший, более плотный текст для ПК, но более читаемый для небольших экранов.

html{font-size:110%;} 
@media(min-width:60em){html{font-size: 90%}}

Этот код определяет, что текст должен иметь размер шрифта 90% от размера по умолчанию для стационарных компьютеров. Но на мобильных устройствах размер будет 110%:

Это означает, что текст будет легко читаемым на экранах разных размеров.

3. Создание разных версий сайта

Если ваш сайт не является адаптивным, то используйте мобильный URL-адрес или динамический показ для мобильных посетителей. Создайте различные версии веб-страниц, и установите стили мобильных по своему усмотрению, используя обычный CSS.

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