{"id":11244,"title":"\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f, \u043b\u043e\u043f\u043d\u0435\u0442 \u043b\u0438 \u0440\u044b\u043d\u043e\u043a \u0418\u0422 \r\n ","url":"\/redirect?component=advertising&id=11244&url=https:\/\/vc.ru\/promo\/353949-razbiraemsya-lopnet-li-rynok-it&placeBit=1&hash=d208029863fe4571a57bd41458f0ed509048b262392aaffae456a4ea928923a5","isPaidAndBannersEnabled":false}
Дизайн
Glory Mlory

Эстетика типографики

При поддержке канала UI/UX Designer.

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

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

Элементы типографики

Гарнитура и шрифт

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

Линия строчных знаков

Средняя линия указывает на вершину строчных букв (или вершину x-высоты).

Базовая линия

Базовая линия — это линия, на которой расположено большинство букв.

х-высота

Это расстояние между базовой линией и верхом строчных букв.

Кернинг

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

Интервал

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

Интерлиньяж

Интерлиньяж (Leading или line-height) — это расстояние между двумя строками текста. Хорошо продуманное расстояние делает текст более разборчивым, поскольку помогает глазу легче переходить от одной строки текста к следующей. Стандартный интерлиньяж составляет 120% размера шрифта, но он может варьироваться.

Негативное пространство

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

Различные классификации шрифтов

С засечками (Serif)

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

​Шрифт с засечками

Без засечек (Sans Serif)

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

​Шрифт без засечек

Моноширинный

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

​Моноширинный шрифт

Дисплейный

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

​Дисплейный шрифт

Рукописный

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

​Рукописный шрифт

Лучшие практики

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

Airbnb

font-family: Circular​

Uber

​font-family: UberMove

Dropbox

​font-family: SharpGroteskWide

Evernote

​font-family: Soleil

Intercom

​font-family Graphik

Spotify

​font-family: Circular

Basecamp

​font-family: Graphik

Slack

​font-family: Slack-Larsseit

Все они используют шрифт без засечек в геометрическом или гуманистическом стиле. Некоторые бренды, такие как Basecamp, Intercom, Airbnb и Spotify, используют один и тот же шрифт, но в разных вариантах. Каждый шрифт имеет очень хорошую читаемость. Они используют более смелый вариант шрифта для своих заголовков, чтобы обеспечить хороший контраст с подзаголовками и основным текстом.

Рекомендации по улучшению типографики в пользовательских интерфейсах

Минимальное количество используемых шрифтов

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

Хорошая контрастность и выбор правильного цвета очень важны для разборчивости и восприятия

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

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

Используйте как можно меньше цветов для вашего контента (менее 3)

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

Шрифты без засечек лучше для текста на экранах

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

Обратите внимание на ваш межстрочный интервал

Для оптимальной разборчивости межстрочный интервал должен быть около 140–180% размера вашего текста.

Уменьшите длину вашего текста

Длинная строка текста негативно влияет на читабельность и может сбить с толку, поэтому ограничьте длину строки до 70–80 символов.

Маленький текст нуждается в большем интервале

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

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

Обратите внимание на расстояние между буквами

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

Создайте хорошую иерархию для ваших текстовых элементов

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

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

При выборе шрифта для вашего продукта следует учитывать три критерия:

  • Разборчивость: отдельные буквы и знаки препинания должны быть узнаваемы. Здесь вступают в игру элементы кернинга и межстрочного интервала.
  • Читабельность: общая картина текста очень важна для хорошего взаимодействия с клиентом.
  • Многосторонность: визуальная иерархия на вашем сайте имеет важное значение. Убедитесь, что выбранный вами шрифт будет иметь разные веса и стили.

Заключение

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

0
2 комментария
Популярные
По порядку
Михаил Нежник

Спасибо, стал больше разбираться в типографике. 

Ответить
3
Развернуть ветку
Nika Troitskaya

У Basecamp на иллюстрации не Graphic, а UberMove, перепутали иллюстрации, видимо

Ответить
0
Развернуть ветку
Читать все 2 комментария
Я запущу 12 стартапов за 12 месяцев

Привет! Меня зовут Коля и в этом году я решил принять участие в популярном челлендже: запустить 12 проектов за 12 месяцев.

Я не смог найти работу, поэтому создал сервис для поиска стажировок и вакансий для молодых специалистов

Привет! Меня зовут Коля. Я создал сервис «Юниор» для поиска стажировок и вакансия для начинающих специалистов. В этой статье я расскажу, почему это важно и как развиваю сервис.

Биржевой стакан в мобильном приложении БКС Мир инвестиций
Успешные стартапы — 4 признака, глазами разработчика

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

От техподдержки через переводчик до главного канала продаж

Как изменился «AliExpress Россия»: рассказывают «старички» маркетплейса.

Три простых правила для закрепления привычек

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

На Wildberries стало невыгодно работать: 2500 селлеров, сотни ПВЗ и даже курьеры готовят бунт на корабле WB

Самое время Еноту сказать «А я говорил».

Винни-Пух и всё: герой детских рассказов больше не принадлежит Disney

Объясняем на динозаврах, стоит ли переживать за известную анимационную студию.

Иллюстрация к первому изданию книги Алана Милна. Автор: Эрнест Хауэрд Шепард
Просмотр сетки ордеров
С днём рождения, NTA!
Субботний самопиар на vc.ru

Делимся в комментах ссылками на свои проекты и скидками для читателей vc.ru!

null