Шрифты в UI-дизайне: принципы и полезные ссылки

Вы читаете «Размеры шрифта в UI дизайне: Полное руководство».

Быстрая навигация по главам: Введение · iOS · Android · Веб · Принципы

Принципы типографики

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

Угловой размер

Многое в UI-дизайне на первый взгляд кажется случайным и субъективным а на самом деле работает по вполне разумным принципам. Например, размеры шрифтов: нам нравится читать тексты, в которых буквы одного субъективного размера. Ну, скажем, 0,3° в высоту — от базовой до верхней линии прописных знаков, из точки нашего обзора.

А почему это у нас размер шрифта в градусах? Да потому что, честно говоря, это самый удобный способ сравнения шрифта на разных устройствах. Что там у нас ещё есть — дюймы? Предположим, вы хотите сделать свой шрифт размером в полдюйма (1,27 см). Прекрасно, отлично, но текст в полдюйма на телефоне — это же очень крупно (всего лишь 30 см от глаз) и капец как мелко на ТВ-экране (3 метра от глаз).

Истина проста: когда шрифт находится в два раза дальше, его размер должен быть в два раза больше, для равновесия.

В теории, конечно, звучит прекрасно, но на практике считать всё это ужасно тяжело:

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

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

Правило 1/16’’

Расстояние от зрителя до экрана может варьироваться, но есть общая формула, которая поможет в настройке размеров текстового блока:

Размер шрифта (в дюймах) = 1/16″ x (расстояние в футах от глаз пользователя до устройства)*

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

1/16″ = 1,5875 мм
1 дюйм = 2.54 см
1 фут = 30.48 см

Я не говорю, что в следующий раз, создавая приложение для Apple, обязательно нужно измерять всё линейкой. Нет, но она может пригодиться для работы в новой среде с багажом знаний в digital-дизайне. Например, при оформлении стендов, ТВ-приложений, слайдов для презентации на большую аудиторию и т.д.

Баланс между расстоянием обзора и плотностью пикселей

В целом, чем меньше экран устройства, тем меньше у него пиксели*.

* Под «пикселями» я имею в виду не физические пиксели, а альтернативные «CSS пиксели» (в вебе), «пиксели, не зависящие от плотности» (на Android), или «точки» (в iOS) — подробнее здесь.

Это значит, что на устройствах с меньшим экраном большее количество пикселей на дюйм. А это уже значит, что один и тот же размер шрифта будет физически меньше на телефоне, чем на планшете, и физически меньше на планшете, чем на ПК (и то же самое для ТВ-экранов, кстати).

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

Короткий ответ: нет.

Ответ подлиннее: на момент написания статьи, пиксели на стандартном экране ПК на 33% меньше, чем на стандартном мобильном устройстве. Значит, нет ничего зазорного в том, чтобы увеличить любой текст, отображаемый на ПК примерно на 33% от того размера, какой он занимает на экране телефона, по крайней мере на странице, созданной для долгого чтения (а если не для долгого? Что ж, почитайте раздел «Интерактивные страницы» в главе по вебу).

Вот и всё. Всего лишь ещё одно практическое правило, о котором необходимо помнить при разработке веб-сайтов с адаптивным дизайном.

Полезные ссылки

Материальный дизайн:

• «Рекомендации по материальной digital-типографике» от Google. Официальная страница Google, посвящённая типографике; для полной же картины стоит заглянуть и на страницы, посвящённые другим компонентам (кнопкам, модальным окнам и т.д.)
• «Параметры устройств» от Google. Официальный ресурс от Google с перечнем как физических размеров, так и размеров в пикселях, а также разрешений экранов для многих устройств на платформах Android и iOS.

iOS:

• «Дизайн в iOS: гайдлайны» от Ivo Mynttinen. По-настоящему полезная подборка материалов по работе в iOS. Нет, она не официальная, но, как это ни странно, пользоваться ей проще, чем «Рекомендациями пользовательского интерфейса» из следующего пункта.
• «Человечный интерфейс: гайдлайны. Типографика» от Apple.

ТВ-дизайн:

• «Дизайн для телевидения» от Molly Lafferty.
• «ТВ-типографика: гайдлайны» от Apple
• «ТВ-типографика: гайдлайны для Android» от Google
• «Пользовательский опыт с ТВ: гайдлайны для Amazon Fire» от Amazon

Если я вдруг что-то упустил, пишите письма!