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

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

UI-дизайнеры руководствуются весьма строгими правилами. Так что решения, которые на первый взгляд кажутся случайными, обоснованы рядом принципов. Это касается в том числе и шрифтов. К примеру, пользователю проще, когда все буквы имеют одинаковый размер. 

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

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

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

Несмотря на то, что правило не требует дополнительных разъяснений, все просто лишь в теории. На практике вы можете столкнуться с рядом неприятностей и проблем: 

• Все используют гаджеты по-разному, расстояние, естественно, тоже разное. 

• Размер пикселей на устройствах также существенно отличается. 

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

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

Никто не отменял правило 1/16”

Как было сказано выше, пользователи будут читать ваш текст с разного расстояния. Но эта простая формула поможет вам разобраться и правильно настроить размеры текста: 

Размер букв, измеряемый в дюймах, должен равнятся 1/16” расстоянию от пользователя. Последний параметр измеряется в футах, что крайне важно учитывать. 

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

Учитывайте плотность пикселей при расчете расстояния

Каждый, кто использовал шрифты в веб дизайне, знает базовый принцип: чем меньше размер экрана, тем меньшее количество пикселей. Соответственно, на маленьких экранах количество пикселей на один дюйм выше. Поэтому шрифт на телефоне будет меньше, чем на планшете. Аналогично и с компьютерами, телевизорами. 

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

Хоть это и кажется логичным, но нет. Ведь нет ничего плохого в том, чтобы текст на экране компьютера был на 33% больше, чем на мобильном устройстве. Это особо актуально, если страница предполагает продолжительное чтение. 

Это и есть основные принципы типографики. Об этом и остальных правилах вам не стоит забывать при разработке. 

На самом деле типографика в web дизайне – это очень интересно. Поэтому мы рекомендуем изучить дополнительные материалы по теме, что позволит вам получить больше полезных знаний: 

• Здесь вы найдете информацию от Google, как о ряде физических параметров, так и о пикселях самых разнообразных устройств на разных платформах. 

• Если вам интересен дизайн в iOS, рекомендуем перейти по этой ссылке. Здесь вы найдете множество полезных материалов, которые помогут вам детально разобраться в этой теме. 

• Как создавать человеческий интерфейс. 

Если вы разрабатываете дизайн для телевидения, почитайте познавательный материал от Molly Lafferty. Не лишним будет и изучение статьи от Apple и Android.