—»     —»   Введение в адаптивную типографику
  Раздел: Шрифты   Нет комментариев  

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



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

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

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

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

Что же такое адаптивный шрифт (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 символов на строку.

Контраст


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

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

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

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

Завершение

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

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

Тестируйте все, что возможно тестировать, дважды или даже трижды! Вам нужно создать текст, который будет отлично смотреться, просто читаться и будет привлекать внимание. Не забывайте думать о выборе подходящего шрифта, размера, интервалов и контраста при создании адаптивных характеристик.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, шрифты
Опубликовал Design FactoRy   Прочитано (раз): 5727   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2018    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031