Не упусти!

Круто, что тебе интересны наши курсы!

И именно за твой интерес и желание развиваться мы дарим тебе скидку!

Заполни данные ниже и на почту прийдет письмо с промокодом для тебя со скидкой на любой курс!

Отлично!

Ваш промокод на скидку отправлен на Ваш E-mail. Проверте пожалуйста Вашу почту.

Проверьте все папки в вашем почтовом ящике (спам, промоакции).

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

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

ПРИНЦИПЫ ТИПОГРАФИКИ

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

 
УГЛОВОЙ РАЗМЕР
Многое в 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.
 
ТВ-ДИЗАЙН:
Поделиться:
Выберите курс:
Выберите оператора:
Мероприятия

Написать нам в