Типографика в веб-дизайне
Под термином «типография» в веб-дизайне понимают технику организации шрифтов. В частности это выбор подходящих для веб-проекта шрифтов, позиционирование букв, подбор расстояния между буквами и строками, размер шрифта.
26.07.2016 06:55
Владимир Заиченко
Президент
Правильное использование типографии – залог успешности проекта, ведь это основной способ передачи информации пользователям. Правильно подобранные и красиво оформленные шрифты помогают улучшить восприятие данных, значительно облегчить этот процесс, не отвлекая от сути самого контента.
Подбор шрифтов
Раньше при создании дизайна сайта дизайнерам приходилось использовать только «веб-совместимые» шрифты. Они присутствовали в большинстве операционных систем. Только так можно было гарантировать корректное отображение информации на мониторах пользователей.
Эти времена давно прошли. Современные браузеры могут отображать любые шрифты благодаря поддержке правила @font-face через CSS и загрузке нужных шрифтов на сервер. Браузер пользователя автоматически скачивает его.
Однако не все шрифты являются бесплатными и могут свободно распространяться. В то же время, в сети есть много сервисов для подбора бесплатных шрифтов, которые можно свободно использовать в своем веб-дизайне. Большинство из них оптимизированы и корректно отображаются в браузерах, обеспечивая привлекательный дизайн.
Сервисы для подбора шрифтов
Самыми популярными являются Google Fonts и Adobe Typekit.
Google Fonts – это огромный каталог бесплатных шрифтов. У этого веб-сервиса есть много настроек, которые помогут определиться с выбором: поддержка кириллицы, просмотр жирного и курсивного текста, различные размеры.
Там же есть инструкции по работе со шрифтами и ссылки на скачивание. Если зайти в карточку конкретного шрифта, можно увидеть насколько использование каждого конкретного шрифта влияет на скорость загрузки сайта.
Adobe Typekit – это платный сервис подбора шрифтов от компании Adobe. Большинство шрифтов более качественные, чем те, что представлены в Google Fonts. Здесь реализована возможность синхронизации сервиса с другими продуктами от Adobe – Photoshop, Illustrator и др. Это отличный вариант для веб-проектов с большим бюджетом. Он позволит сделать проект по-настоящему уникальным.
Параметры выбора шрифта
На что нужно обращать внимание при выборе шрифтов?
Общая концепция – для кого создается сайт или приложение? Шрифты должны быть уместными и предсказуемыми для целевой аудитории.
Адаптивность – если дизайн разрабатывается не только для десктопной версии, но и для мобильной, нужно протестировать, как будет выглядеть текст на экранах мобильных телефонов и планшетов. Особенно это касается дизайна заголовков.
CMS – большинство сайтов наполняются через системы управления сайтами. Как будет выглядеть текст различной длины? Короткие заголовки и очень длинные. Ведь сайты зачастую наполняются людьми, далекими от веб-дизайна. Необходимо протестировать различные варианты наполнения.
