Главная > Шрифты > Введение в адаптивную типографику

Введение в адаптивную типографику


12 марта 2013, 15:45. Разместил: Design FactoRy
Адаптивный дизайн сегодня стал неотъемлемым свойством при разработке дизайнов сайта. Адаптивность позволяет дизайну одного сайта адаптироваться под планшеты и мобильные устройства, и способствует его корректному отображению на множестве различных разрешений и ориентациях.

Но слышали ли вы когда-нибудь, чтобы это свойство каким-то образом относилось к шрифтам?

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

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

Что же такое адаптивный шрифт (Responsive Type)?

Введение в адаптивную типографику
перейти на веб-сайт

Введение в адаптивную типографику
перейти на веб-сайт

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

Адаптивный шрифт способен изменяться в размере. Он может изменяться относительно размеров экрана или по предпочтению пользователя.

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

Адаптивный шрифт также подстраивается под различия в плотности пикселей и разрешение экрана, чтобы символы не становились размытыми или, наоборот, слишком резкими.

Гарнитуры

Введение в адаптивную типографику
перейти на веб-сайт

Вам не нужно выбирать новый шрифт, чтобы он лучше читался на экранах мобильных устройств. Или все-таки нужно?

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

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

Изменение размера

Введение в адаптивную типографику
перейти на веб-сайт

Когда устанавливаешь размеры шрифта, первое, что приходит на ум – это размеры в единице измерения pt – например, шрифт 14pt для основного текста в блоге. Если же думать об адаптивности, дизайнерам также следует учитывать и пиксели, и em, и rem.

Единицу измерения в пикселях (px) можно приравнять к pt (point или точки). Обычный CSS-код, к примеру, допускает изменение размера шрифта, и он может составлять любое угодное вам число. Там он указывается как {font-size: 16px}. Большинство дизайнеров думают, что это наиболее точный метод изменения шрифтов.

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

Rem чем-то походит на em, но есть одно ключевое различие – rem относительны html-элементам. По мере того, как меняется размер сайта, rem изменяют размер шрифта на основе формулы процентного соотношения и сторон относительно всего размера элемента body. Rem зачастую подходит больше, но пока что вызывает довольно много проблем касательно совместимости с браузерами.

Так какую же меру использовать? Используйте ту, которую вам будет удобнее всего использовать, и которая подходит под ваш случай. Если вам нравятся все три варианта, то используйте rem для шрифтов и em для объектов, окружающих шрифт (поля и отступы, так как они масштабируются вместе со шрифтом).

Междустрочный и межбуквенный интервал

Введение в адаптивную типографику
перейти на веб-сайт

Пространство между строками так же важно, как и размер шрифта.

Веб-стандарт междустрочного интервала в больших блоках текста или теле документа должен быть примерно 140% pt-размера используемого шрифта. То же правило применимо и к экранам маленького размера.

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

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

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

Длина строки

Введение в адаптивную типографику
перейти на веб-сайт

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

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

Исходный стандарт удобного для чтения текста составляет от 50 до 75 символов на строку (это для веб-сайтов). Для меньших по размеру экранов, вроде мобильных устройств, более предпочтительно использовать 35-50 символов на строку.

Контраст

Введение в адаптивную типографику
перейти на веб-сайт

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

Старайтесь использовать простые цвета без эффектов – это способствует читабельности.

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

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

Завершение

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

Старайтесь отдавать наивысший приоритет читабельности. Если пользователи не смогут прочесть ваш текст, то вы провалитесь.

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