Выбор шрифтов, интервалов и цветов для мобильных приложений

Выбор шрифтов, интервалов и цветов 

Шрифт

Шрифт текста в вашем блоге должен быть простым и легкочитаемым. Без засечек, курсива, жирности и подчеркиваний. Наиболее предпочтительными являются шрифты, доступные во всех браузерах: Arial, Times New Roman, Verdana, Georgia и т.д. Редкие шрифты лучше не использовать.


Шрифт с засечками и без
Размер шрифта

По поводу того, каким должен быть размер шрифта, существует много споров: кто-то утверждает, что шрифт крупней 11-ого кегля – это моветон, а кто-то, наоборот, рекомендует делать его как можно крупней. Моя позиция в этом вопросе такова: шрифт в блоге должен быть от 14 до 18 px. Почему?
Более мелкие шрифты – это прошлый век. Посмотрите на самые популярные блоги в своей нише и убедитесь в этом сами. В нашей тематике все топовые сайты используют крупные шрифты: Siliconrus – 20, Mailchimp – 16, Content Marketing Institute – 16, Buffer – 14, новый Seonews – 14, Lpgenerator – 14. На самом деле, перечислять можно долго.
16-ый кегль на среднем по размеру экране смотрится так же, как и 12-ый кегль в газете или журнале – стандартный размер для большинства изданий, поскольку он является наиболее удобным для чтения.
Многим пользователям (особенно, тем, кто постарше) трудно читать более мелкий текст.
Согласно недавнему исследованию Нейла Пателя, увеличение кегля и интервала между строками (с учетом того, что вы используете простой и легкочитаемый шрифт) увеличивает время пребывания пользователя на сайте.

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

Этот текст написан 8-ым кеглем.

Этот текст написан 10-ым кеглем.

Этот текст написан 12-ым кеглем.

Этот текст написан 14-ым кеглем.

А вот этот – нашим привычным, 16-ым. Не знаю, как реагируют ваши глаза, но моим нравятся два последних :)
Цвет шрифта и фона

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

Рекомендуемый размер для интервалов между строк варьируется от 130 до 160%. Чтобы понять, о чем речь, приведу несколько примеров:
Вот этот абзац написан 16-ым шрифтом и 16-ым интервалом (100%). Как видите, расстояние между строк слишком мало, и читать такой текст неудобно – быстро устают глаза и рассеивается внимание. Такой интервал использовать не рекомендуется.
Вот этот абзац также написан 16-ым шрифтом, но уже с большим интервалом – 32 px (200%). Читать такой текст по-прежнему неудобно – строки находятся слишком далеко друг от друга. Приходится тратить усилия на то, чтобы переводить взгляд с одной строки на другую.
И, наконец, последний пример. 16-ый шрифт и 22-ой интервал (137%). Размеры, которые используются в нашем блоге. Из трех абзацев кажется самым приятным, не так ли?
Ширина строки

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

Большие по ширине тексты читать очень сложно



Какие тексты удобно читать пользователям в Интернете? 10 правил удобочитаемости!
В рубриках: Юзабилити сайтов | Комментариев: 20

Сегодня пост по оформлению текста для максимального удобство его прочтения (читабельности).

1 Начертание шрифтов

Используйте шрифты без засечек (еще их называют Sans Serif или рубленные). Классическими примерами являются Arial, Verdana, Tahoma и другие. На экранах мониторов, имеющих гораздо меньшее разрешение, чем печатные материалы, засечки на краях букв мешают чтению. Классический шрифт с засечками, который ухудшает читабельность – Times New Roman.

2 Размеры шрифтов

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

3 Разнообразие шрифтов

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



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

4 Выравнивание текста

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


За примерами далеко ходить не надо, взгляните на тексты газетных интернет-изданий:



Уж они то знают толк в читабельности. У всех контент выравнен только по левому краю!

5 Не используйте верхний регистр

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

6 Длина строк

Колонки текста, имеющие ширину более 50-70 символов читать трудно. Не зря газетчики не делают строки длинными и печатают тексты в несколько колонок.




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

7 Контрастность текста

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

8 Тексты ссылок

вот пример активной ссылки

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

9 Подчеркивания в тексте

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

10 Фоновый цвет и графика

Не используйте в качестве фона для текста высококонтрастные изображения. Они затрудняют чтение и отвлекают внимание.




Выбор шрифтов, интервалов и цветов для мобильных приложений

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

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

Особенности типографики iOS и Android


До запуска iOS 9 системным шрифтом iOS был Helvetica Neue, однако после выхода новой версии его заменили на San Francisco. Шрифт предлагается в двух начертаниях: Display (для использования в UI-элементах интерфейса и для текстов с большим кеглем) и Text (для объёмного текста меньшего размера).



В подсемействе Text расстояние между буквами больше, чем в Display. Апертуры этих текстовых шрифтов тоже шире, чтобы маленький кегль был более разборчивым. Одна из особенностей San Francisco заключается в том, что это динамический шрифт: он меняет начертание в зависимости от кегля. Система автоматически переключает шрифт на Display после того, как его размер превысит 20pt.




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






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




В iOS с этой целью, как правило, используют не размер шрифта, а его насыщенность. Если у Roboto только шесть её вариаций, то у San Francisco их 15: шесть для подсемейства Text и девять — для Display.




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




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

Разборчивость




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

Source Sans Pro (слева) и Helvetica (справа)




В Helvetica почти невозможно разобрать первые три буквы, тогда как Source Sans Pro читать легко. Helvetica не подходит для работы с интерфейсами: шрифт создавался ещё в 1957 году и изначально не был предусмотрен для использования на небольших экранах. Именно поэтому Apple разработала San Francisco.

Размер шрифта и иерархия контента







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




Однако слишком крупный шрифт также неудобен. Из-за чересчур короткой строки мы вынуждаем читателя бегать глазами и тем самым сбиваем его ритм чтения. В таких условиях информацию воспринимать сложнее. Лучше использовать базовые параметры устройства, для которого создаётся дизайн. Для iOS это 17pt, для Android — 13sp.




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




Величину заголовков и подзаголовков поможет определить типографическая шкала. Классическая шкала по терминологии Роберта Брингхёрста прогрессирует следующим образом: 6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24 и так далее. Однако можно использовать другую градацию (золотое сечение или гармонические интервалы). Расчеты удобно вести с помощью специального калькулятора на сайте modularscale.com.




Необходимо заранее определиться с иерархией контента, чтобы в соответствии с ней подбирать размеры шрифта. Если базовый шрифт — это 1em, то заголовок уровня H1 — 3em. Надписи и маленький текст будут на размер меньше базового кегля.

Пример иерархии контента в приложении «Фотострана»

Длина строки




Оптимальная для комфортного чтения длина строки — 50-60 знаков с пробелами. Такой размер подходит для десктопных приложений, однако экраны мобильных устройств меньше, поэтому для них лучше использовать строки длиной в 30-40 знаков.






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

«Воздух» в тексте

Чем меньше размер экрана, тем больше внимания стоит уделить межбуквенному расстоянию.

Лучше добавить в текст «воздуха» и увеличить высоту строки так, чтобы она была пропорциональна базовому размеру шрифта (обычно она соответствует 120-150% от кегля основного текста) — так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.

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

Расстояние между элементами в приложении «Фотостраны»

При организации композиции экрана нужно помнить о «законе близости»: расположенные рядом объекты воспринимаются как единая группа. И наоборот: однородные элементы, между которыми есть интервал, не будут считаться одним целым.

Цветовой контраст




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

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

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




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




Минимальный коэффициент контраста для шрифтовых блоков — 4,5:1, рекомендуемый — 7:1. Но из этого правила есть исключения:

Крупный текст (18 кегль и выше или 14 кегль в полужирном начертании) — 3:1.

Текст, который выступает частью неактивного элемента интерфейса, не требует контрастности.






Обеспечить достаточную контрастность текста поможет сервис Color Contrast Checker.

Тестирование




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




Если используется два шрифта, лучше обратиться к сайту discover.typography.com: он поможет подобрать пару шрифтов, которые будут хорошо сочетаться друг с другом. Можно также создать матрицу, которая покажет, как смотрятся различные комбинации. Чтобы узнать, как шрифт влияет на конверсию, нужно применять A/В-тестирование.