Почему ваша типографика в UI выглядит джуниорской: 6 исправлений с точными значениями
Шесть ошибок в типографике, из-за которых интерфейс выглядит джуниорским, и сеньорское исправление для каждой с точными числами: шкала размеров, одно семейство, читаемый серый, капс, межстрочный интервал и иерархия.
Джуниорская типографика редко бывает одной большой ошибкой. Это шесть мелких, и каждая решена на глаз: размер, который показался подходящим, шрифт, который выглядел забавно, серый, который казался элегантным. Сеньорная типографика выглядит спокойно, потому что каждый из этих выборов подчиняется правилу. Вот эти шесть, с числами.
1. Используйте шкалу размеров
✕ Джуниор: размеры выбраны на глаз
✓ Сеньор: одно отношение, 1.25 от 16
Слева каждый размер выбран сам по себе: 31, 27, 22, 17, 15, 13. Шаги между ними неравномерны, поэтому одни уровни выглядят почти одинаково, а другие скачут. Справа каждый размер равен предыдущему, умноженному на 1.25: 16, 20, 25, 31, 39. Шаги ровные, и каждый уровень явно отличается от соседнего.
Отношение от 1.2 до 1.333 подходит большинству интерфейсов. Выберите одно, запишите и никогда не вводите размер, которого нет в списке. В CSS это короткий набор переменных, а в Figma набор текстовых стилей. Как выбрать отношение, разбираем в руководстве по модульной шкале шрифтов.
:root {
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31px */
--text-3xl: 2.441rem; /* 39px */
}
2. Одно семейство, два начертания
Выходные в Лиссабоне
небольшой дневник путешествияТри дня, два района и одна очень долгая поездка на трамвае.
ЧИТАТЬ ДАЛЬШЕ✕ Джуниор: четыре шрифта на одной карточке
Выходные в Лиссабоне
Небольшой дневник путешествияТри дня, два района и одна очень долгая поездка на трамвае.
Читать дальше✓ Сеньор: одно семейство, обычное и жирное
Каждый новый шрифт приносит свой характер, а четыре характера на одной карточке спорят. Читатель не понимает, какой из них бренд. Одного семейства в двух начертаниях, обычном для чтения и жирном для заголовков, хватает, чтобы построить все уровни, которые нужны экрану.
Если хочется второе семейство, дайте ему одну задачу, например только заголовки, и держите её везде. Никогда не добавляйте шрифт, чтобы сделать один элемент «особенным».
3. Серый, который можно прочитать
Ваш заказ уже в пути
Прибудет с 14:20 до 14:40.Мы пришлём SMS, когда курьер будет рядом.
✕ #B0B0B0 на белом: трудно читать
Ваш заказ уже в пути
Прибудет с 14:20 до 14:40.Мы пришлём SMS, когда курьер будет рядом.
✓ #6B6B6B на белом: легко читать
Светло-серый выглядит изысканно в файле дизайна на ярком мониторе. На телефоне на улице он исчезает. Время прибытия слева самая полезная строка на карточке и при этом самая трудная для чтения.
#6B6B6B по-прежнему выглядит тихо рядом с чёрным заголовком и остаётся читаемым. Как правило, второстепенный текст на белом должен быть не светлее примерно #767676: это самый светлый серый, который проходит минимум доступности для основного текста.
4. Капс только для меток
Мы обновили условия. Пожалуйста, ознакомьтесь с изменениями до следующего заказа.
✕ Джуниор: предложение заглавными
ОБНОВЛЕНИЕ
Мы обновили условия
Пожалуйста, ознакомьтесь с изменениями до следующего заказа.
✓ Сеньор: метка капсом, текст обычным регистром
Заглавные буквы стирают форму слов. В строчных высокие и низкие буквы дают каждому слову контур, который узнаёт глаз; в заглавных каждое слово превращается в прямоугольник, и предложение приходится читать по буквам. Поэтому абзац капсом похож на крик и читается дольше.
Капс хорош для того, для чего его придумали: коротких меток из одного-трёх слов, вроде тега раздела, статуса или кнопки. Всё, что длиннее, пишется обычным регистром.
5. Плотные заголовки, воздушный текст
Интервалы тоже часть типографики
Тесный интервал превращает абзац в стену. Дайте основному тексту дышать, а заголовки держите плотно.
✕ Джуниор: рыхлый заголовок, тесный текст
Интервалы тоже часть типографики
Тесный интервал превращает абзац в стену. Дайте основному тексту дышать, а заголовки держите плотно.
✓ Сеньор: заголовок 1.1, текст 1.5
У межстрочного интервала разные задачи на разных размерах. У крупных заголовков и так много места внутри букв, поэтому заголовок с интервалом 1.1 держится как единая форма. Мелкому основному тексту нужен простор между строками, чтобы глаз находил начало следующей, поэтому ему положено 1.5.
Джуниорская версия делает наоборот, часто потому, что один межстрочный интервал применили ко всему. Задайте два значения и используйте их везде: около 1.1 до 1.2 для заголовков, от 1.4 до 1.6 для основного текста.
6. Размер, вес, цвет, пространство
Заказ №2841
ДоставленСегодня, 14:203 товараИтого 4280 ₽
✕ Джуниор: всё жирным, один размер
● Доставлен
Заказ №2841
Сегодня, 14:20 · 3 товараИтого 4280 ₽
✓ Сеньор: четыре инструмента, один понятный порядок
Когда жирное всё, жирным не является ничто. В джуниорской карточке пять строк одного размера и веса, и читателю приходится прочесть все, чтобы найти важную.
Сеньорная карточка использует четыре инструмента, понемногу каждый: номер заказа крупнее, статус получает цвет и точку, детали уходят в серый, а итог отделён пространством. Ни один инструмент не выкручен до предела, поэтому всё выглядит спокойно. Подробнее об этом в статье про типографическую иерархию.
Шесть исправлений в одной таблице
| Джуниор | Сеньор | Значение |
|---|---|---|
| Размеры на глаз | Одна шкала размеров | 1.25 от 16: 20, 25, 31, 39 |
| Несколько шрифтов | Одно семейство, два начертания | Обычное и жирное |
| Светло-серый текст | Серый, который можно прочитать | #6B6B6B на белом, никогда светлее #767676 |
| Предложения капсом | Капс для коротких меток | От одного до трёх слов |
| Один интервал для всего | Два межстрочных интервала | Заголовки 1.1, текст 1.5 |
| Всё жирным | Четыре инструмента иерархии | Размер, вес, цвет, пространство |
FAQ
Какая шкала размеров подходит для UI?
Отношение от 1.2 до 1.333 от базы 16 px. Отношение 1.25 даёт 16, 20, 25, 31 и 39 px, этого уровней хватает для большинства экранов.
Сколько шрифтов должен использовать UI?
Достаточно одного семейства в двух начертаниях. Второе семейство добавляйте только с одной закреплённой задачей, например для заголовков, и применяйте его везде одинаково.
Какой межстрочный интервал нужен основному тексту?
Около 1.5 для основного текста и около 1.1 до 1.2 для крупных заголовков.
Какой серый читается на белом?
#767676 это самый светлый серый, который проходит минимум WCAG для основного текста на белом. #6B6B6B даёт чуть больший запас и по-прежнему воспринимается как второстепенный.
Нужно ли набирать текст в UI целиком заглавными?
Только короткие метки из одного-трёх слов. Длинный текст заглавными читается медленнее, потому что слова теряют форму.
Источники
- Шкала размеров: 16 × 1.25ⁿ = 20, 25, 31.25 и 39.06, показаны округлённо.
- Контраст на белом, рассчитанный по формуле WCAG 2: #B0B0B0 2.2 к 1, #767676 4.5 к 1, #6B6B6B 5.3 к 1. WCAG требует 4.5 к 1 для основного текста (1.4.3 Contrast (Minimum)).
- Впервые опубликовано как карусель в UX Brainy.
Want type that looks this calm across your whole product? Our team builds UI and design systems with the typography decided once.
Get Started
