21 августа 2017

Основной текст на вашем сайте слишком мелкий

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

Зачем ограничивать эффективность основного текста, уменьшая его — даже на больших экранах — до дефолтного размера браузера, который не менялся уже 20 лет?

Что подразумевается под “слишком мелким”?

На большинстве сайтов размер текста все еще находится в пределах 15-18px. Можно заметить, что некоторые сайты уже используют размер около 20px (и даже крупнее) даже на небольших экранах, но, по-моему, этого недостаточно*.

* В этой статье я привожу размеры шрифтов в px (пикселях), а не в pt (пунктах), чтобы было проще соотнести размер шрифта с веб-фреймворком в цифровом пространстве.

Сразу скажу: я не утверждаю, что мелкий шрифт — это плохо. Шрифт в 18px отлично различим с правильного расстояния. Более мелкий шрифт бывает просто необходим для подписей, карточек и других элементов интерфейса. Но вот что касается основного текста, есть сразу несколько весомых причин, чтобы делать его на несколько размеров крупнее.

Немного истории

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

Такое понятие как “пункт” появилось в 1600-х годах и относилось к высоте металлического корпуса, на котором были отлиты символы. Однако, в современном цифровом пространстве сложно определить точный размер пункта.
В 1990-х годах цифровые платформы предложили систему перевода пунктов в пиксели, но, конечно же, в те времена мы имели дело с 14-дюймовыми экранами с низким разрешением. В операционной системе Apple Mac 12pt равнялись 12px при плотности пикселей 72 ppi. А вот Microsoft решили, что 12pt — это 16px при плотности пикселей 96 ppi: именно поэтому в IE был установлен дефолтный базовый размер 16px.

На протяжении конца 1990-х и начала 2000-х, основной текст на сайтах существовал в пределах 9-14px. Какое-то время дизайнеры были уверены, что 16px — это слишком крупный размер, потому что привыкли 12pt (12px), которых стоял по умолчанию на их Маках.

Перенесемся в 2007 год, и — хотите верьте, хотите нет — 16px все еще считается слишком огромным для основного текста. Но в 2011 году, когда в моду вошел отзывчивый дизайн, и начали появляться дисплеи с высоким разрешением, дизайнеры приняли 16px за минимальный размер. С тех самых пор мы усиленно пытаемся подстроиться под это значение.

Почему основной текст не делают крупнее?

Чтобы оценить все преимущества более крупного основного текста, нужно разобрать причины, по которым дизайнеры (и разработчики) предпочитают мелкий. Чаще всего главной причиной выступает привычка: мы привыкли к мелкому тексту, так делают все — значит, наверное, и нам стоит.

Мы проектируем под мобильные (стратегия mobile-first)

Следуя стратегии mobile-first, мы с самого начала оптимизируем дизайн (и, соответственно, основной текст) под мобильные устройства. Это подразумевает размер 15-18px. Но при проектировании своего отзывчивого сайта мы часто забываем, что люди будут читать контент не только с мобильных устройств, но и с больших экранов: ноутбуков, настольных компьютеров и да — смарт-телевизоров.
В итоге, увлекшись идеей создания универсального сайта, мы больше заботимся о маленьких экранах и не думаем, как контент будет масштабироваться на больших.

Мы считаем крупное “громоздким”

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

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

Есть возможность увеличить текст

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

Разборчивость путают с читабельностью

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

Мы хотим избежать скроллинга

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

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

Так настроен фреймворк

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

Одним из самых популярных фреймворков для создания отзывчивых веб-проектов является Bootstrap. Хотите — верьте, хотите — нет, но в самой стабильной третьей версии фреймворка для основного текста по умолчанию установлен единый размер 14px, а в ранних релизах четверной версии он увеличен до 16px. Да, Bootstrap заточен под стратегию mobile-first, но дизайнеры и разработчики могут адаптировать некоторые настройки под разные случаи использования сайта. Если оставить все размеры шрифтов по умолчанию, то мы будет использовать мобильные версии даже на больших экранах.

Зачем делать основной текст крупнее

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

1. Крупный шрифт лучше работает на расстоянии

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

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

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

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

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

2. Крупный шрифт повышает читабельность

В среднем пользователи читают лишь около 28% слов на странице — даже скорее сканируют, чем читают, потому что в интернете очень много информации, а время пользователя ограничено. Люди очень редко читают “интенсивно” — для этого требуется гораздо больше концентрации.

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

Крупный шрифт подразумевает меньшую плотность текста и подстегивает автора текста говорить меньше лишних слов и сразу переходить к делу.

Улучшая читабельность текста (а не просто разборчивость), мы увеличиваем вероятность того, что пользователь прочитает (или просканирует) наш контент. Чтобы читать крупный текст, требуется меньше концентрации.

3. Крупный шрифт улучшает юзабилити

Вычислительная мощность нашего мозга ограничена; ее размер определяет нашу способность усваивать большие объемы информации. Если информация сложная, требуется больше времени, чтобы ее понять. В результате производительность мозга падает, он перегружается и может пропускать важные детали.

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

4. Крупный шрифт повышает визуальную значимость

Более крупные заголовки формируют более сильную эмоциональную связь — то же самое можно сказать и об основном тексте. Слова могут выглядеть более значительно. Идеи могут звучать громче, увереннее и убедительнее.

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

Кто переходит на крупный шрифт?

Ниже приведен список сайтов, которые используют крупный шрифт даже на небольших экранах (например, с разрешением  1440х900). Они перешли на шрифты от 20px и вплоть до 58px!

The Washington Post — 20px

Fortune Magazine — 20px

Zeit Online — 20px

CSS-Tricks — 20px

Edenspiekermann — 20px

The Great Discontent — 20px

Medium — 21px

Forbes — 21px

Ways We Work — 21px

Jeffrey Zeldman — 24px

Alessandro Scarpellini — 24px

Misplaced — 24px

Trent Walton — 25px

Commando Group — 26px

Ediciones Daga — 34px

Eli Rousso — 36px

Sang Han — 48px

Van Schneider — 58px

Оптимизируем крупный основной текст

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

1. Проработайте дизайн основного текста в первую очередь

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

2. Подберите шрифт, который хорошо масштабируется

Для основного текста используются шрифты как с засечками, так и без — главное выбрать, что подходит именно вам, и придерживаться этого выбора. Однако не каждый шрифт хорошо масштабируется. Некоторые выглядят четко и сочно в мелком размере, а вот в крупном смотрятся неуклюже и некачественно. Системные шрифты — такие как Georgia и Arial — при увеличении смотрятся громоздко: их проектировали под размер 14px, поэтому в них меньше деталей.

Текстовые шрифты проектируются и оптимизируются под размер 6-14 пунктов (8-18px), но из-за яркого контраста, высоты строчных букв и увеличенных межбуквенных интервалов в размере 24-26px они могут выглядеть непривлекательно. С другой стороны, некоторые шрифты остаются самобытными и целостными в любом размере — все, что нужно, это настроить трекинг.

Что касается шрифтов с засечками — важно посмотреть, как выглядят некоторые их характеристики (особенно волосяные линии, засечки и острые углы) в большом масштабе. Под крупный размер можно подобрать шрифт с засечками с большим количеством деталей: более контрастными штрихами и меньшей высотой строчных букв. Однако, если придется уменьшить размер шрифта под более мелкие экраны, есть риск, что он станет неразборчивым. Вот несколько примеров шрифтов с засечками, которые хорошо работают в крупном масштабе:  Equity, Franziska, Leitura News, Merriweather, Miller, PT Serif, и Tisa.

Шрифты без засечек — несмотря на то, что они менее популярны для основного текста, чем шрифты с засечками — могут работать эффективно, если текст очень крупный. Обычно с ними не возникает тех проблем при масштабировании, какие бывают с засечками: у шрифтов без засечек низкий контраст, фиксированная толщина штриха и лишь небольшое количество деталей и завитушек. Они сохраняют свою форму. Вот несколько примеров шрифтов без засечек, которые хорошо подходят для крупного основного текста: Atlas Grotesk, Futura, Lato, Maison Neue, Real Text, Roboto, и Suisse Int’l.

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

Таким образом, лучше всего опробовать шрифт для основного текста в деле: в крупном и мелком размере. Так вы сможете в деталях оценить шрифт, прежде чем останавливать на нем свой выбор. Такие инструменты как Typecast позволяют посмотреть большинство шрифтов в работе (т.е. в массиве текста) — так вы можете внести необходимые поправки в свой шрифт или сравнить несколько “кандидатов”.

3. Подбирайте размер на глаз, но отталкивайтесь от минимального 20px

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

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

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

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

4. Оптимизируйте межбуквенные интервалы

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

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

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

5. Оптимизируйте длину строки и высоту строки

В своей книге Основы стиля в типографике Роберт Брингхерст утверждает, что оптимальная длина строки, или количество символов в строке (characters per line, CPL) в типографике составляет от 55 до 75. Более длинные строки вызывают усталость, так как читателям приходится проходить более длинный путь глазами и дольше искать начало следующей строки. Если же строка слишком короткая, слова и фразы, которые должны быть цельными, постоянно “разрываются”.

Этот принцип применим к основному тексту любого размера, потому что длина строки зависит от размера шрифта.

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

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

В заключение

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

Подписывайтесь на меня в Твиттере

Статья также опубликована здесь

  • Jonikru

    А у самих основной шрифт 18px )))

    • Как всегда текст о дизайне от дизайнеров, которые сами не следуют этому тексту. Лишь бы контент создать. Так и живем )))

      • Илья Иванов

        Справедливости ради, если вы доберетесь до первоисточника, то увидите там Crimson Text размером в 22px.

        А здесь формально ~18px при просмотре с ноута, но это Noto Serif, у которого очень высокие строчные буквы. За счет пропорций гарнитуры строки выглядят крупнее. Они эквивалентны набору 21-22px для того же Crimson или даже ~24px для какого-нибудь Garamond. И это вполне адекватно статье.

        Размер в пикселях это ориентир, а не догма. Речь ведь идет об оптических размерах, а не метрических.

        Это примерно как «идеальная» женская фигура 90-60-90: она рассчитана исходя из среднего «модельного» роста — не надо ее точно переносить на женщин ростом в 160 или 195 см) Важны пропорции, гармоничное сложение, а не количество сантиметров.

Дальше — большe

Идеи, которые нас вдохновляют, видео-интервью и переводы исследований, которые были нам полезны в процессе работы.

17 марта 2016

Как создать сервис для онлайн-мероприятий, которым легко может воспользоваться каждый: редизайн Webinar.ru

6 октября 2016

10 приемов в Скетч, о которых Боярский сказал бы «Тыща чертей, канальи!»

23 августа 2017

Сколько процентов населения составляют продвинутые пользователи? Все хуже, чем кажется

21 июня 2016

Бихевиористский подход к дизайну

10 октября 2016

«Мемфис» в веб-дизайне: как «яркий» тренд из 80-х возвращается в 2016 году

26 января 2017

Невероятная новость об искусственном интеллекте Google, которую вы, возможно, пропустили