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

Какой минимальный размер шрифта на мобильной версии

  • автор:

Совет №26

Минимальный, рекомендованный Яндексом размер шрифта (кегля) — 12px, на практике чаще используют кегель — 14px. Размер же текста, который вы сейчас читаете — 16px на мобильном и 13px на стационарном компьютере.

7 критериев проверки мобильной версии

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

  1. Задано значение meta-тега viewport и указано значение атрибута device-width.
  2. Отсутствие горизонтальной прокрутки (контент не шире экрана).
  3. Нет Java-апплетов.
  4. Нет Flash-элементов.
  5. Текст удобно читается с мобильных (достаточный размер шрифта и отступы).
  6. Отсутствие Silverlight-плагинов.
  7. Интерактивные элементы не расположены слишком близко (в Google).

Доп. рекомендация оптимизация текста для чтения

Используйте строки около 70-80 знаков (8-11 слов), по опыту, они наиболее комфортны для чтения.

Размер шрифта для адаптивных сайтов

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

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

Размер шрифта в веб-дизайне

Размер шрифтов в Интернете можно изменять разными способами:

  • Pixel (px) — Пиксель.
  • Point (pt) — Пункты.
  • em — размер шрифта зависит от размера шрифта родительского контейнера.
  • Root em (rem) — размер шрифта наследуется от корня стиля.
  • Percentage (%) — процент.
  • (vw или vh) — ширина или высота области просмотра.
  • (см) — сантиметр.
  • (мм) — миллиметр.
  • Inch (in) — дюйм.

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

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

Другой вариант — использовать em и rem. em наследует свой размер от своего родителя, а rem наследует от корневого стиля (поэтому он назван root em).

Размер шрифта по умолчанию во всех браузерах составляет примерно 16 пикселей. Обычной практикой является установка корневого font-size равным 62,5%, что переводит значение по умолчанию 16 пикселей примерно в 10 пикселей. Мы делаем это, чтобы упростить мысленное преобразование размера шрифта при использовании em или rem (например, 1 rem = примерно 10 px, а 1,8 rem = примерно 18 px). Это удобный подход по двум причинам:

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

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

В CSS это делается с помощью медиа-запросов.

Например, мы можем установить размер шрифта по умолчанию для элемента h1 равным 3,5 rem. Это может отлично смотреться на настольном компьютере, но на мобильном устройстве будет слишком большим. Следовательно, у нас может быть медиа-запрос вроде:

h1 < font-size: 3.5rem; >@media only screen and (max-width: 400px) < h1 < font-size: 2rem; >>

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

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

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

Оптимальные размеры шрифтов для рабочего стола

Нет точных правил для размера шрифта, но есть несколько хороших практик, о которых следует подумать при разработке для настольных ПК (также есть рекомендации Google):

Body text (Основной текст) — размер шрифта должен составлять от 16 до 18 пикселей для удобочитаемости (или от 1,6 до 1,8 бэр, используя наши правила изменения размеров, упомянутые выше). Если можно позволить увеличить изображение, то даже 21 пиксель может быть приятным для чтения.

Headings (Заголовки) — заголовки должны быть примерно в 1,96 раза больше основного текста, чтобы создать достаточный контраст. Это будет означать, что если использование 18 пикселей для размера основного шрифта, тогда будет применено около 35 пикселей для заголовков.

Subheadings (Подзаголовки) — они должны быть немного меньше, чем размер заголовка, с некоторыми корректировками, такими как меньший вес, чтобы создать контраст между ними. Например, если использовались 35 пикселей для заголовка, то для подзаголовка использовать около 30 пикселей.

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

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

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

Body text (Основной текст) — размер шрифта для основного текста должен быть не менее 16 пикселей. В некоторых случаях можно уменьшить размер шрифта (например, если шрифт имеет необычно большие символы или используются прописные буквы), при этом минимальным размером будет 14 пикселей. Для контекста в Material Design от Google используется минимальный предлагаемый размер дополнительного шрифта в 14 пикселей, а в рекомендациях Apple — 15 пикселей.

Headings (Заголовки). Заголовки должны быть примерно в 1,3 раза больше, чем основной текст, чтобы создать достаточный контраст. Это будет означать, что если используется 16 пикселей для размера основного шрифта, то для заголовков должен использоваться ~ 21 пиксель. Это уменьшено по сравнению с 3,5 бэр, которые использовались на настольных компьютерах.

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

Input fields (Поля ввода) — они должны точно соответствовать правилам основного текста.

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

Простые правила мобильной типографики

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

Иллюстрация: Kanate / Rawpixel / Annie для Skillbox Media

Анна Турос

Анна Турос

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

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

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

Основной текст

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

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

Хорошие шрифты для основного текста из библиотеки Google Fonts: Open Sans, Montserrat, Rubik, Source Sans Pro, Spectral.

Экраны телефонов с текстом, набранным разными шрифтами. Слева — Pacifico, это плохой выбор шрифта. Справа — только Montserrat, это хорошее решение.

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

Размер основного шрифта установите в диапазоне от 16 px до 18 px. Распространённая ошибка — делать размер основного текста слишком мелким:

Экраны телефонов с разным размером шрифта. Слева текст слишком мелкий. Справа — достаточно крупный и хороший.

WCAG (The Web Content Accessibility Guidelines) рекомендует 14 px как минимальный размер основного текста.

Apple в своём руководстве Human Interface Guidelines рекомендует 17 px как минимальный размер основного текста.

Google в руководстве Material Design рекомендует 16 px как минимальный размер основного текста.

Рекомендации Apple и Google относятся к конкретным шрифтам (San Francisco и New York для iOS и Roboto для Android). В каждом проекте выбранный шрифт нужно рассматривать отдельно. Например, если буквы шрифта тонкие, то его нужно сделать крупнее.

Экраны телефонов с разным размером шрифта. Слева текст слишком мелкий. Справа — достаточно крупный и хороший.

Проверьте, как шрифт будет выглядеть на экране телефона. Если вы используете Figma для создания макетов, проверьте свою работу сразу на телефоне с помощью Figma — prototype mirror share. Для этого нужно залогиниться в приложении, перейти во вкладку Mirror и выделить нужный экран внутри Figma.

Заголовки

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

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

Экраны телефонов с разным размером шрифта у заголовков. Слева текст слишком мелкий. Справа — достаточно крупный и хороший.

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

Шрифтовая пара Bespoke Serif Bold и Open Sans Regular.

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

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

Шрифтовая пара Bespoke Asap Condensed Bold и Source Sans Pro Regular.

  • Подбирайте пару из одного суперсемейства шрифтов. Например: Roboto Slab для заголовков и Roboto для основного текста, Noto Serif и Noto Sans, PT Sans Narrow и PT Sans. Создатели этих шрифтов сразу делают их так, чтобы они хорошо сочетались друг с другом.

Шрифтовая пара Noto Serif Bold и Noto Sans Regular.

  • Если у вас не получается самостоятельно подобрать шрифтовую пару, воспользуйтесь сервисами.Fontpair — галерея вариантов разных шрифтовых пар. Fontjoy — генератор пар на основе Google Fonts.

Экраны телефонов с разными шрифтовыми парами. Слева шрифты сочетаются плохо, а справа — хорошо.

Убедитесь, что заголовки не занимают больше трёх строк. Если это произошло — сократите длину заголовков или измените размер шрифта. Иначе текст будет очень трудно прочитать.

Экраны телефонов с разным размером заголовка. Слева заголовок слишком большой, а справа — короткий и хорошо вмещается в две строки.

Отступы и размеры шрифтов

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

Определите расстояние внутри блоков и между ними. Согласно теории близости, объекты, находящиеся близко друг к другу, воспринимаются связанно.

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

Экраны телефонов с разными отступами от заголовка до основного текста. Слева непонятно, к какому абзацу относится текст, а справа — понятно.

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

Чтобы не путаться, пользуйтесь правилом внутреннего и внешнего: внешние расстояния всегда должны быть больше или равны внутренним.

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

Экраны телефонов с разными отступами. Слева иерархия нарушена, а справа — нет.

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

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

  • Основной текст, или базовый, — 16 px.
  • Ключевые фразы и акценты — 16 px × 1,2 ≈ 19 px.
  • Подзаголовки — 19 px × 1,2 ≈ 23 px.
  • Заголовки — 23 px × 1,2 ≈ 28 px.
  • Дополнения и сноски — 16 px × 0,833 ≈ 13 px.

В автоматическом режиме это делает сервис Type-scale. Сайт сразу выдаёт нужные значения в пикселях и в rem .

Сервис Type-scale, который помогает упрорядочить размеры шрифтов.

Прописные и разрядка

Написание ПРОПИСНЫМИ — популярный приём в дизайне. Но важно понимать один нюанс. У строчных букв есть разнообразные выносные элементы, которые помогают визуально узнавать буквы. Слова, написанные прописными буквами, имеют похожие друг на друга прямоугольные силуэты, и сами буквы менее контрастны между собой. Поэтому уходит больше времени, чтобы прочесть их.

Не пишите длинные фразы заглавными буквами. Это значительно замедлит чтение:

Разрядка — это расстояние между символами в словах. Обычно применяется сразу ко всему абзацу.

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

Экраны телефонов с разной разрядкой. Слева заголовок со слишком большой разрядкой. Справа — с разрядкой приемлемого размера.

Если вы используете в заголовках прописные — установите разрядку в 10%. Это уберёт эффект слипшихся букв и улучшит читаемость текста.

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

Цвет

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

Также подобрать контраст вам помогут плагины для Figma.

Выберите ограниченную палитру цветов и придерживайтесь её. Это способствует узнаваемости бренда и упрощает восприятие информации в интерфейсе. Лишние цвета создают дополнительную нагрузку и вызывают путаницу.

Больше о том, как работать с цветом

  • Как подбирать цвета: 8 простых сервисов
  • Градиенты: большой обзор
  • Что такое цветовой круг Иттена и как с его помощью подбирать красивые сочетания
  • Цветовые пространства: большой разбор

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

Экраны телефонов с разными иллюстрациями под текстом. Слева текст не видно из-за слишком яркой картинки. Справа — картинка темнее и текст на ней видно лучше.

Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!

Больше о типографике и вёрстке

  • Этнические шрифты: культурные особенности в дизайнерских продуктах
  • «О шрифте»: простые принципы хорошей типографики
  • Лицензии на шрифты: большой обзор
  • «Модульные системы в графическом дизайне»: основы швейцарской вёрстки

Rem — относительная единица измерения, которую используют в веб-разработке. Итоговый размер рассчитывается относительно основного кегля, который разработчик задаёт в HTML.

Курс

Профессия Графический дизайнер

Вы с нуля получите востребованную профессию на стыке творчества и IT. Научитесь работать в популярных графических редакторах — от Illustrator до Figma. Добавите в портфолио плакаты, логотипы, дизайн упаковки и другие сильные проекты.

Сможете начать зарабатывать уже с 4-го месяца курса.

Узнать про курс

Профессии с трудоустройством

  • Графический дизайнер
  • Python-программист
  • Инженер по тестированию
  • Бизнес-аналитик
  • Интернет-маркетолог 2023

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

​Рекомендации от дизайнеров развлекательной соцсети «Фотострана».

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

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

Особенности типографики 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% от кегля основного текста) — так можно облегчить чтение. Для этого также пригодится система интервалов, которая нужна для определения размера разных элементов текста. Если в кегле используется золотое сечение, то оно должно быть и в интервалах. Так дизайн будет выглядеть аккуратно и гармонично.
  • Следует обращать внимание на пробелы между абзацами: это дополнительное пространство служит опорной точкой для глаза и создаёт ощущение, что текст не слишком плотный и его легко читать.

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *