Удобочитаемость (или «читабельность») — свойство текстового материала, характеризующее легкость восприятия его человеком. Одним из его составляющих является выбор шрифта, его цвет, фон текста и другие полиграфические особенности.
Текст может быть красивым, простым, неординарным, волнующим и много еще каким. Он может вызвать в читателе эмоции либо передать какую-либо мысль. А каким шрифтом этот текст должен быть написан? Ответ: любым, который можно назвать читабельным.
Удивительно, но именно об этой характеристике шрифта часто забывают. Дизайнеры либо пытаются уместить огромное количество информации на крошечном кусочке пространства, либо делают ставку на визуальную часть. Однако правило одинаково для всех: если ваш шрифт нечитабелен, ваш дизайн не работает в полную силу.
Вы можете спросить, а если шрифт непосредственно является элементом дизайна? Что ж, такой вариант имеет право на существование только в одном случае: если вы совмещаете красивый, но нечитабельный шрифт с другим — обычным, легким для восприятия читателем.
Читабельность в общих чертах
Итак, каков же признак читабельности шрифта? На самом деле, читабельность шрифта определяется набором таких характеристик, как длина строки, межстрочный интервал, начертание шрифта, отступы и выравнивание, цвет и контрастность.
Каждая из этих характеристик влияет на легкость (или сложность?) восприятия текста с экрана монитора. И учитывать их под силу любого дизайнера. Обратите внимание, что мы говорим о читабельности именно основного текста сайта, ведь именно в нем содержится важная для посетителя информация.
- Длина строки: количество символов в строке текста — пожалуй, главнейший фактор, влияющий на читабельность. Чересчур широкий текст зачастую очень сложно воспринимать. Но не стоит увлекаться и делать текст слишком коротким: «прыганье» со строчки на строчку каждую секунду дает нагрузку на зрение и также вредит качеству понимания текста. Истина, как говорится, где-то посередине.
- Межстрочный интервал: интервал между строками играет не менее важную роль. Если вех и низ букв будет соприкасаться с буквами в предыдущей и следующей строчке, текст просто сольется в одно нечитабельное нечто!
- Начертание шрифта: шрифты стилей простой serif и sans serif являются самыми оптимальными для восприятия, в то время как шрифты в витиеватом, рукописном и других незаурядных стилей бывает очень сложно разобрать.
- Отступы и выравнивание: подобно межстрочному интревалу, интервал вокруг и между объектами также влияет на качество восприятия текста читателем.
- Цвет и контрастность: необходимо следить за тем, чтобы цвет шрифта выглядел контрастно на фоне текста. Естественно, мало кто сможет с легкостью прочитать что-то, напечатанное зеленым шрифтом на зеленом же фоне. Именно по этой причине многие дизайнеры останавливаются делают выбор в пользу светлого шрифта на темном фоне либо наоборот — темного шрифта на светлом. Контраст между ними повышает читабельность текста.
Читабельность на разных экранах
Итак, как же нам создать самый читабельный шрифт? Если говорить об основном тексте страницы, то существует несколько правил, касающихся количества символов в строке в зависимости от устройства, на которых этот текст читается.
С чего же начать? Оптимальная длина строк поможет вам определить размер текста, а именно ширину текстовой рамки — обычно ее можно задать для размеров экрана настольного ПК, планшета или мобильного устройства — и подобрать такой шрифт, чтобы текст укладывался в идеальное количество символов.
- Настольный ПК: 55 – 75 символов в строке, включая пробелы; самое оптимальное количество — 65.
- Мобильные устройства: 35 – 50 символов в строке.
Совместив оптимальную длину строки с идеальным междустрочным интервалом, который может высчитывается как процент от объема текста или равняться ширине самой широкой букве данного шрифта.
- Настольные ПК: размер шрифта, умноженный на 1,5
- Мобильные устройства: размер шрифта, умноженный на 1,75 – 2
Отличный инструмент для такой математики:
Еще несколько советов
Читабельность текста зависит не только от выбора шрифта. Заголовки, маркированные списки, дополнительные интервалы между абзацами, адекватный цвет — все это в сумме также увеличивает читабельность и улучшает юзабилити сайта.
Подумайте, как вы можете добавить следующие элементы в свой дизайн для создания функционального веб-сайта. И не забудьте выделить каждый из них особенным шрифтом, размером и цветом, сочетающимся с основным текстовым материалом сайта:
- Заголовки
- Ссылки
- Выделение жирным или курсивом
- Маркированные или нумерованные списки
- Графические элементы (например, фото)
- Подписи к изображениям
- Цитирование
- Сочетание стилей serif и sans serif для элементов
10 примеров читабельных шрифтов
Конечно, было бы грубейшей ошибкой не подкрепить все вышесказанное примерами. Поэтому ниже приводится список из десяти наиболее читабельных (и довольно популярных) шрифтов для вашего веб-сайта.
Sans Serifs
Open Sans
Lato
Exo
Nobile
Droid Sans
Serifs
Arvo
Old Standard TT
Abril Fatface
Vollkorn
Josefin Slab
Проверка на читабельность
Теперь, когда у вас уже, возможно, появилась мысль о том, какой шрифт и стиль использовать в следующем дизайн-проекте, самое время проверить, отвечает ли ваша идея всем правилам читабельности:
Достаточно ли большой размер шрифта для основного текста? Укладывается ли он в рамки оптимальной длины строки для экрана каждого вида устройств?
Достаточно ли велик межстрочный интервал?
Есть ли отступы между текстом и краем страницы и другими элементами дизайна?
Контрастирует ли цвет текста с цветом фона?
Добавлен ли дополнительный интервал между абзацами?
Отличаются ли по стилю заголовки и другие текстовые элементы от основного текста?
Использованы ли дополнительные элементы (списки, выделение) для «разбавления» большого объема текста?
Является ли стиль шрифта основного текста читабельным (лучше, если это simple serif или sans serif)?
В заключение
Соблюдение читабельности текста — неотъемлемая часть дизайна веб-сайта. Если пользователь не сможет прочесть и понять информацию, данную на вашем сайте, он просто уйдет.
А как вы учитываете читабельность текста при разработке дизайна? Может, у вас есть свои хитрости и приемы? Поделитесь ими в комментариях!
Автор: Кэрри Казинз
Источник:
