Правильное использование шрифтов играет ключевую роль в веб-дизайне. Это особенно важно для адаптивного веб-дизайна, где шрифты имеют решающее значение для восприятия сайта. В этой серии из трёх статей мы предлагаем обзор адаптивной типографики для веба и объясняем, как применять её на вашем сайте, включая ссылки на ресурсы для адаптивных шрифтов. Для начала мы рассмотрим основы типографики и её использование в адаптивном дизайне.
Что нужно знать о типографике
Изначально термин «типографика» обозначал искусство печати текста с использованием подвижных литер, так называемого «типа». С исторической точки зрения этот термин тесно связан с развитием письма и технологии его воспроизводства через печатный станок. Со временем его значение стало намного шире: теперь типографика охватывает дизайн шрифтов, их использование в широком смысле, а также цифровую типографику, применяемую на веб-сайтах или в компьютерных программах.
Типографика делится на микро- и макротипографику.
- Микротипографика включает в себя дизайн самого шрифта, а также расстояния между символами и словами.
- Макротипографика охватывает все аспекты дизайна страницы текста, будь то печатной или цифровой: формат страницы, её композицию, размер шрифта, межстрочные расстояния, количество строк, ширину между ними и расположение других графических элементов (например, изображений).
Типографика в цифровых медиа и интернете
Термин «шрифт» относится к набору цифровых символов, то есть к определённому типу компьютерного текста. Дизайн шрифта в текстовом документе или на веб-странице называется веб-типографикой, которая основывается на классической типографике. Однако в веб-типографике читабельность зависит, среди прочего, от размера шрифта, длины строк и межстрочных интервалов. Кроме того, при использовании шрифтов в интернете важно учитывать форматы файлов и технологии их отображения.
Использование различных шрифтов в вебе значительно изменилось со временем. Ранее возможности отображения шрифтов в браузере были сильно ограничены: всего несколько шрифтов, таких как Times New Roman или Arial, были универсально совместимы, так как они были установлены на большинстве компьютеров и могли легко вызываться на любой веб-странице. Сегодня же используются разнообразные шрифты в виде веб-шрифтов. Эти шрифты загружаются компьютером через CSS вместе с веб-страницей, которую нужно отобразить. Независимо от того, являются ли шрифты веб-шрифтами или локально установленными, сегодня почти исключительно используются векторные шрифты. Они выглядят одинаково на любом уровне увеличения и отображаются в браузере в виде пиксельной сетки. Наиболее распространённые форматы векторных шрифтов — TrueType (TTF) и OpenType (OTF).
Шрифты в адаптивном веб-дизайне
Веб-типографика уже достигла значительного развития, однако адаптивный дизайн сайтов ставит перед веб-дизайнерами новые задачи. Адаптивный веб-дизайн — это популярная сегодня технология, в которой отображение сайта адаптируется к используемому устройству и размеру экрана. На экране смартфона главная страница сайта выглядит иначе, чем на планшете, ноутбуке или настольном компьютере.
Адаптация всех элементов страницы к соответствующим размерам экрана также касается и шрифтов: они должны быть корректно интегрированы в макет страницы. Это значит, что шрифт тоже должен быть адаптивным. Размер шрифта и перенос строк текста должны, в идеале, подстраиваться под любой абзац. При этом важно учитывать следующие факторы:
- Размер шрифта должен зависеть не только от размера экрана, но и от средней дистанции до экрана. Например, расстояние от глаз пользователя до экрана смартфона меньше, чем до монитора настольного компьютера.
- Размер шрифта зависит от разрешения экрана.
- Межстрочный интервал должен соответствовать длине строки, чтобы обеспечить удобство чтения.
- Макет страницы должен предусматривать достаточное количество пустого пространства (белых зон), что улучшает читабельность текста.
- Для маленьких экранов цвет текста должен быть более насыщенным, а контраст выше, чем на экране компьютера. Это связано с тем, что мобильные устройства часто используются на улице, где освещение может быть неконтролируемым. В таких условиях читаемость шрифта можно улучшить за счёт более жирного начертания.
Работа с адаптивным веб-дизайном и настройка шрифтов
Для обеспечения максимальной читаемости шрифтов на всех устройствах в адаптивном веб-дизайне применяются векторные шрифты. Они масштабируются без потери качества, что отличает их от растровых шрифтов, отображающихся на основе пикселей. Однако векторные шрифты (как и любые другие векторные изображения) требуют преобразования формата, так как экраны компьютеров предназначены для работы с растровыми изображениями. В конечном счёте векторные шрифты отображаются на экране в виде пиксельной сетки. Благодаря этому вы можете всегда обеспечить читаемость текста в адаптивном дизайне.
Чтобы использовать кастомные шрифты и не зависеть от небольшого набора предустановленных шрифтов, вы можете интегрировать их на страницу с помощью CSS. В следующих частях нашей серии мы расскажем, какие адаптивные веб-шрифты подходят лучше всего и как правильно подключить их к вашему сайту.
🔥 Не пропустите!
Подпишитесь на наш канал, чтобы первыми узнавать о лучших шрифтах, адаптивном дизайне и самых полезных советах по веб-дизайну. У нас только качественный и практичный контент для тех, кто стремится к совершенству!