Как сделать шрифт читаемым

Как сделать шрифт читаемым

Автор: Сергей Оболонков
Дата записи

Nielsen Norman Group публикует рекомендации, касающиеся размещения текста на фоне изображений при оформлении сайтов.

Суть заметки в том, что текст должен быть контрастным, чтобы пользователи могли различить и понять его. Однако NNG также дает разработчикам сайтов несколько более конкретных советов. В частности, рекомендуется поддерживать коэффициент контрастности на уровне 4,5/1 (3/1, если речь идет о тексте, набранном крупным шрифтом).

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

Другие варианты — использование шрифтов с обводкой или полупрозрачных однотонных подложек под текст.

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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


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

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


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

Читайте также:  Что нужно отключить для ssd

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

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


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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Читайте также:  Оформление шапки ютуб канала


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


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

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

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


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

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

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

Данная публикация представляет собой перевод статьи « Use legible font sizes » , подготовленной дружной командой проекта Интернет-технологии.ру

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

Текст может быть красивым, простым, неординарным, волнующим и много еще каким. Он может вызвать в читателе эмоции либо передать какую-либо мысль. А каким шрифтом этот текст должен быть написан? Ответ: любым, который можно назвать читабельным .

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

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

Читабельность в общих чертах

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

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

  • Длина строки: количество символов в строке текста — пожалуй, главнейший фактор, влияющий на читабельность. Чересчур широкий текст зачастую очень сложно воспринимать. Но не стоит увлекаться и делать текст слишком коротким: «прыганье» со строчки на строчку каждую секунду дает нагрузку на зрение и также вредит качеству понимания текста. Истина, как говорится, где-то посередине.
  • Межстрочный интервал: интервал между строками играет не менее важную роль. Если вех и низ букв будет соприкасаться с буквами в предыдущей и следующей строчке, текст просто сольется в одно нечитабельное нечто!
  • Начертание шрифта: шрифты стилей простой serif и sans serif являются самыми оптимальными для восприятия, в то время как шрифты в витиеватом, рукописном и других незаурядных стилей бывает очень сложно разобрать.
  • Отступы и выравнивание: подобно межстрочному интревалу, интервал вокруг и между объектами также влияет на качество восприятия текста читателем.
  • Цвет и контрастность: необходимо следить за тем, чтобы цвет шрифта выглядел контрастно на фоне текста. Естественно, мало кто сможет с легкостью прочитать что-то, напечатанное зеленым шрифтом на зеленом же фоне. Именно по этой причине многие дизайнеры останавливаются делают выбор в пользу светлого шрифта на темном фоне либо наоборот — темного шрифта на светлом. Контраст между ними повышает читабельность текста.
Читайте также:  Определить относительную погрешность счетчика

Читабельность на разных экранах

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

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

  • Настольный ПК: 55 – 75 символов в строке, включая пробелы; самое оптимальное количество — 65.
  • Мобильные устройства: 35 – 50 символов в строке.

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

  • Настольные ПК: размер шрифта, умноженный на 1,5
  • Мобильные устройства: размер шрифта, умноженный на 1,75 – 2

Отличный инструмент для такой математики: Golden Ratio Typography Calculator

Еще несколько советов

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

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

  • Заголовки
  • Ссылки
  • Выделение жирным или курсивом
  • Маркированные или нумерованные списки
  • Графические элементы (например, фото)
  • Подписи к изображениям
  • Цитирование
  • Сочетание стилей serif и sans serif для элементов

10 примеров читабельных шрифтов

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

Ссылка на основную публикацию
Как сделать шрифт больше на планшете
Не все пользователи знают, что на планшетах на базе Android пользователи могут сами менять размер шрифта. Вернее, выбирать из тех...
Как сделать календарь на сайте
Выбор даты применяется на сайтах, торгующих авиа и железнодорожными билетами, ведь посетителя интересует заказ билета на определённый день. Календари также...
Как сделать картинку 16 на 16 пикселей
Главное нужно указать файл на вашем компьютере или телефоне, ввести размеры в пикселях и нажать кнопку ОК. Остальные настройки выставлены...
Как сделать шрифт читаемым
Автор: Сергей Оболонков Дата записи Nielsen Norman Group публикует рекомендации, касающиеся размещения текста на фоне изображений при оформлении сайтов. Суть...
Adblock detector