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

Это правило срабатывает, когда PageSpeed Insights обнаруживает, что на странице слишком мелкий текст.

Общая информация

Размер шрифта на веб-странице можно задать с помощью четырех основных единиц: пикселей (px), точек (pt), масштабируемых единиц (em) и процентов (%).

  • Пиксели соответствуют пикселям CSS и зависят от размера и плотности экрана устройства.
  • Точки зависят от размера пикселей. Один пиксель составляет 0,75 точки*.
  • Единицы em и проценты являются относительными величинами, зависящими от унаследованного размера и свойств используемого шрифта. Одна единица em эквивалентна 100%.

*См. дополнительную информацию.

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

Рекомендации

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

  1. В качестве базового размера шрифта задайте 16 пикселей CSS. При необходимости измените размер в зависимости от свойств используемого шрифта.
  2. Задайте прочие размеры относительно базового, чтобы создать типографический масштаб.
  3. Между строками текста должен быть промежуток, который, возможно, придется задать для каждого шрифта. Чаще всего следует использовать высоту строки по умолчанию, равную 1,2 em.
  4. Ограничьте число шрифтов и используемых размеров: их избыток может привести к чрезмерной сложности страницы.

Например, в следующем фрагменте задается базовый размер шрифта в 16 пикселей CSS, класс CSS small, для которого определен размер шрифта, равный 75% от базового (12 пикселей CSS), и класс CSS large с размером шрифта 125% от базового (20 пикселей CSS).

body {
  font-size: 16px;
}

.small {
  font-size: 12px; /* 75% of the baseline */
}

.large {
  font-size: 20px; /* 125% of the baseline */
}

Дополнительные рекомендации по шрифтам на устройствах Android доступны в этом разделе.

Дополнительная информация

Чтобы понять, как определяются единицы длины, нужно тщательно изучить спецификацию CSS 2.1. В ней приводятся другие размерности, не перечисленные в этой статье: дюймы, сантиметры, миллиметры и пики. Не упустите важную деталь: дюйм в CSS не всегда равен физическому дюйму.

Все абсолютные единицы определяются относительно друг друга. Один пиксель равен 0,75 точки, 1 точка = 1/72 дюйма, 1 дюйм = 2,54 сантиметра и т. д. Однако "привязку" этих единиц определяет устройство. Например, при печати на бумаге 1 дюйм привязывается к 1 физическому дюйму, а все остальные единицы определяются относительно физического дюйма. При отображении содержания на мобильных устройствах выполняется привязка к так называемому "опорному пикселю". Пиксель CSS определяется относительно этого опорного пикселя, а все остальные единицы (дюймы, сантиметры и т. д.) корректируются в соответствии с пикселем CSS. Таким образом, на мобильном телефоне 1 отображаемый дюйм CSS обычно меньше физического дюйма.

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

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

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