Размеры шрифтов в UI дизайне: полное руководство

Начинающие UI-дизайнеры довольно часто спрашивают меня: «Какой размер шрифта лучше использовать в моём проекте?» «Проектом» может быть веб сайт или приложение для Android или для iPhone/iPad.

Хочется же, чтобы кто-нибудь собрал уже все правила на эту тему в одном месте?

Если да, дорогие читатели, то эта страница — то, что вам нужно, добавляйте её в закладки на всех своих устройствах. Здесь я собрал свежие рекомендации (на 2019 г.) и наработки по размерам шрифтов на всех основных платформах: для IOS 12, Android/Material Design и адаптивного веба. Ловите удобную навигацию по содержанию:

• iPhone и iPad
• Материальный Дизайн — Мобильный и Десктоп
• Веб — Мобильный и Десктоп
• Принципы и полезные ссылки

Один центральный источник

По материальному дизайну уже есть неплохие гайдлайны, но их там страниц на 50. Что же касается IOS... что ж, тут даже таких нет! А уж в вебе (до сих пор) царит беззаконие. Кто-то вот советует для скейлинга шрифтов использовать принцип золотого сечения, но... разве этот совет может как-то мне помочь?! (Вкратце: нет)

Три разные платформы, три комплекса проблем и два противоположных языка дизайна?

Так было раньше.

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

Объясняю за px, pt, sp, и dp

Быстрое распространение HD-экранов посеяло настоящий хаос в дизайнерскую терминологию. Слово «пиксель» теперь обозначает 3 разных явления: «точки», «масштабируемые пиксели» и — в нагрузку — «пиксели, не зависящие от плотности»! Как дизайнерам, вам крайне важно знать следующее:

Какое число ввести в поле

Что бы вы ни выбрали: Sketch, Figma, Adobe XD и т.д. — чтобы установить размер шрифта, надо ввести определенное число в текстовое поле. В данном руководстве я буду неизменно указывать, какое число подойдет лучше всего. При этом всё равно, как называется единица измерения — «пиксели», «точки» или ещё как — вводите число в поле в Sketch, и получаете подходящий размер шрифта.

Здесь есть одна оговорка: макеты нужно делать в масштабе 1x. Если вы не знаете, что это такое, не переживайте — скорее всего вы все делаете правильно.

Что такое пиксель?

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

Чтобы не путаться, под «пикселями» в данном руководстве я буду подразумевать только «CSS пиксели» — единицу измерения на веб-сайтах. Это то самое число, которое вы вводите в поле, работая в Скетче/Фигме/где угодно, когда создаёте макет страницы, и это то самое число, которое программист вносит в CSS, когда font-size: 16px.

Что такое точки (points)?

Точка («pt») — специальный термин вселенной Apple для обозначения «числа, которое вводится в поле», поэтому в главе по iOS мы всё будем мерить точками.

«Точка» — хорошая единица для дизайнера, потому что на уровне комплектующих одна точка иногда преобразуется в четыре аппаратных пикселя (начиная с iPhone 4) — или даже в девять (начиная с iPhone X) — или, попирая всё, что есть хорошего и святого в этом мире, иногда она преобразуется в девять ПО пикселей, но в таком случае на устройстве она расплющивается до 6.81 пикселей, и того на экране происходит целая куча совмещений — и всё это ради отображения на экране простейшей прямой строчки. Да чтоб тебя, iPhone 6+, 7+ и 8+! Весь кайф обломали.

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

Что такое dp? А sp?

Как будто мы и без этого мало страдали... Google ввёл даже не одну, а две новых единицы. Как «dp» или «пиксели, не зависящие от плотности» (англ. density-independent pixels), так и «sp» или «масштабируемые пиксели» (англ. scaleable pixels) — это, по сути, то же самое что и «pt», только для Android. Единственная разница между «sp» и «dp» в том, что «sp» используется для измерения размеров шрифта, а «dp» — всего остального.

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

Есть одна деталь в определении «sp» и «dp» относительно «pt» (но на практике она на нашу работу никак НЕ влияет): Android хочет, чтобы dp сохранялся одного размера на всех возможных устройствах, посему он, по сути, заперт в 1/160-ой дюйма. Конечно, если в пользовательских настройках размер шрифта, допустим, имеет такое же значение, тогда и «sp» будет равен 1/160-ой дюйма. У iPhone всё не так: «pt» на iPhone Х составляет примерно 1/152-ую дюйма. Однако точка на iPhone 8 равна 1/163-ей дюйма.

Меньше знаешь, крепче что? Впрочем, не забивайте себе сильно голову. Для Android-приложений просто вбивайте «dp» в поле и всё.

Отлично. К бою готовы? Погнали.