Отзывчивая типографика — часть 1: основы

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

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

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

Термин «шрифт» относится к набору цифровых символов. Дизайн шрифта в цифровых текстовых документах и в Интернете известен как веб-типографика. Это связано с традиционной типографикой, поскольку читабельность текста в Интернете зависит, помимо прочего, от размера шрифта, длины строки и межстрочного интервала. При создании цифровых текстов также важно учитывать формат файла и глубину отображения Ls.

Использование различных шрифтов в Интернете со временем претерпело значительные изменения. В прошлом существовали ограниченные способы представления текста в браузере; только некоторые шрифты, такие как Times New Roman или Arial, были универсально совместимы, поскольку они были установлены на большинстве компьютеров и были доступны веб-сайтам. В настоящее время в виде веб-шрифтов можно использовать множество различных стилей. Веб-шрифты — это шрифты, которые компьютер может загрузить из Интернета с помощью CSS и отображаемого веб-сайта. Независимо от того, используются ли веб-шрифты или локально установленные шрифты, современные тексты почти исключительно пишутся векторными шрифтами, которые выглядят четко при любом масштабе и отображаются в браузере с помощью массива пикселей. Наиболее распространенными форматами векторных шрифтов являются TrueType (TTF) и OpenType (OTF).

С момента своего зарождения веб-типографика претерпела значительное развитие, но отзывчивый дизайн по-прежнему ставит перед веб-дизайнерами новые задачи. Отзывчивый веб-дизайн — это широко используемая техника веб-дизайна, при которой отображение деталей изображения веб-сайта совместимо со всеми устройствами и оптимизировано под размер соответствующего экрана. Содержимое сайта должно адаптироваться к различным размерам экрана для оптимального отображения на всех устройствах, включая смартфоны, планшеты, ноутбуки и настольные компьютеры. Это напрямую влияет на размер шрифта, который должен плавно вписываться в общую композицию. Поэтому шрифт должен быть адаптирован ко всем размерам экрана. Вот еще несколько факторов, которые следует учитывать при использовании отзывчивой типографики:

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

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

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

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

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