Ключевые факторы адаптивной веб-типографики
Говорят: «Никогда не судите о книге по ее обложке», но исследования показывают, что онлайн-пользователю требуется 50 миллисекунд, чтобы решить, стоит ли ему оставаться на вашем сайте или нет.
Другое исследование, проведенное Стэнфордом, в котором изучалось доверие к сети, показало, что 75% пользователей признались, что судят о надежности компании на основе дизайна их веб-сайта. Хорошая веб-типографика — это ворота для создания большего количества бизнес-запросов и последующих конверсий.
Само собой разумеется, информация должна быть представлена привлекательно и эффектно. Однако проблема в том, что существует большое разнообразие мобильных устройств, и поэтому типографика должна соответствовать всем этим платформам.
Так как же нам наилучшим образом использовать веб-типографику?
1 Разумное использование шрифтов гарантирует, что типографика будет отзывчивой, но эффективной
С тех пор, как была представлена функция Font Face, веб-дизайнеры приветствовали свободу использования различных шрифтов в своих проектах. Это резко контрастировало с более ранней эпохой, когда использовались только веб-безопасные цвета.
Имея в своем распоряжении множество шрифтов, дизайнеры должны знать, как правильно их использовать. Отзывчивый веб-дизайн используется большинством веб-сайтов, и он установил ограничения на игру типографики, которая теперь разрабатывается в соответствии с различными типами устройств и соответствующими размерами экрана. Следовательно, веб-дизайнеры должны быть осторожны при комбинировании нескольких шрифтов в адаптивной системе веб-дизайна. Не используйте слишком много шрифтов для веб-сайта. Скорее держите его до набора из трех. Это обеспечит более чистый и эффективный веб-дизайн. В то же время избегайте использования очень популярных шрифтов, так как это может не дать вашей странице преимущества перед другими.
Практический пример: Checkout vox.com. Этот сайт сочетает в себе два шрифта Sans-Serif и делает это без особых усилий. Они используют Balto для всех своих заголовков, Allright Sans для основного текста, за исключением Harriet, который перемежается внутри сайта. В результате внешний вид выглядит чистым и элегантным.
Наоборот, загляните на сайт angelfire. Этот сайт содержит несколько шрифтов и выглядит ветхим и непрофессиональным.
2 Выделите заголовки
Исследования веб-типографики показали, что типографика веб-сайта выделяет его заголовки. Это означает, что ваши веб-посетители проводят больше времени на вашем сайте. Для этого используйте глифы и лигатуры, чтобы придать заголовкам уникальный вид.
Лигатуры — это буквы, которые кажутся соединенными вместе. Например, буквы f и i, составляющие первую часть слова fish, в шрифте соединяются вместе как «fi». Вы можете легко добавлять лигатуры через настройки функции шрифта вашего браузера или с помощью функций «Текстовый рендеринг — Оптимизация разборчивости». Firefox уже имеет лигатуры по умолчанию. Использование определенной комбинации лигатур в определенных типах шрифтов может добавить красоту и стиль вашему веб-дизайну. Лигатуры можно включать и выключать в меню «Текст», «Тип» или «Открыть тип» программного обеспечения для верстки. Программное обеспечение обеспечит автоматическую вставку лигатур в местах соединения соответствующих букв.
Практический пример: посетите этот веб-сайт, и вы легко увидите, насколько элегантно выглядят их лигатуры. Эти красиво оформленные заголовки при добавлении на ваш веб-сайт определенно улучшат его внешний вид и дадут вашим зрителям лучший пользовательский интерфейс.
3 Заставьте ваш веб-сайт общаться со своей аудиторией за счет соответствующего использования шрифтов разного размера и цвета.
Как видно из рисунка выше, нам нужно выбрать шрифты, которые можно читать и четко видеть как на экранах мобильных устройств, так и на экранах настольных компьютеров. Стиль, в котором шрифты отображаются на печатных носителях, отличается от того, как они отображаются на цифровых носителях. Нам нужно понять семейство шрифтов, стиль и эффект. Спецификации для веб-шрифтов приведены в спецификациях CSS от W3C, в которых указано, что семействами шрифтов являются Serif, Sans-Serif, Monospace, Fantasy и Cursive.
Во-вторых, выберите шрифт в соответствии с темой или категорией вашего сайта. Это гарантирует, что ваша веб-страница будет общаться с вашей целевой аудиторией и даст желаемый результат. Шрифты с засечками также можно использовать для повышения разборчивости текста, что еще больше помогает усилить воздействие голоса. Проблема здесь в том, что этот атрибут Serif хорошо работает на экранах с высоким разрешением, но может привести к нежелательным результатам на экранах с более низким разрешением. Для коротких заголовков рекомендуется использовать художественные шрифты, а для основного текста — более приглушенные.
4 Модуляция показателя важна для адаптивной типографики
Длина строки веб-страницы должна модулироваться. Модуляция меры или длины строки шрифта способствует отзывчивости типографики. Адаптивный дизайн включает адаптивные изменения шрифтов в соответствии с требованиями разных размеров экрана. Следовательно, это обязательно.
Термин «мера» или «длина строки» связан с удобочитаемостью или с тем, как люди читают фрагмент текста в Интернете. Увеличение или уменьшение длины строки шрифта — один из способов создания адаптивной веб-типографики. Идеальная длина строки или мера составляет от 45 до 75 символов в строке на печатную или веб-страницу, включая пробелы и знаки препинания. Это может быть расширено до 45-85 символов в строке. Это было получено из исследований о том, как люди читают текст, и о соответствующих движениях глаз. Исходя из этого, некоторые эксперты рекомендуют текст, выровненный по левому краю, как подходящий для веб-контента, поскольку движения глаз при чтении следуют горизонтальному направлению слева направо.
Практический пример: набор веб-сайтов ограничивает количество символов в строке примерно до 75 символов. Как видите, он выглядит элегантно и может заинтересовать зрителей во время чтения.
С другой стороны, на сайте gatesnfences не менее 120 символов в строке. В результате это выглядит неприятно и отговаривает от чтения содержимого.
5 Использование разных размеров шрифта улучшит читаемость на разных расстояниях от экрана. Это требование для адаптивной типографики.
Выберите размер шрифта, обеспечивающий видимость и читаемость шрифта. Возможно, придется пойти на компромисс в отношении «идеальной меры», что может быть немного сложно для дизайнеров. Сложность заключается в том, что «идеальной мерой» является либо уменьшение размера шрифта, либо увеличение размера шрифта, что может сделать текст нечитаемым. Суть в том, что контент должен быть удобочитаемым для зрителей. Следовательно, одним из ключевых элементов адаптивной типографики является использование разных размеров шрифта для разных расстояний чтения. Существует метод расчета размера шрифта, воспринимаемого на разном расстоянии чтения, и для этого доступны калькуляторы размера.
Практический пример: посетите веб-сайт moonbase. Это веб-сайт, который помогает клиентам создавать свои веб-сайты и брендировать свой бизнес. Текст в центре изображения выделяется и передает смысл того, о чем сайт. Мы можем видеть это только на первый взгляд. Это привлекает внимание пользователя и побуждает его просмотреть остальную часть веб-сайта, написанную шрифтом стандартного размера.
6 Адаптивная типографика требует, чтобы веб-браузеры поддерживали разные шрифты.
Когда вы разрабатываете веб-сайты с определенными настроенными шрифтами, вы должны убедиться, что браузер поддерживает загрузку и отображение этих шрифтов. Даже если ваш код безошибочен и ясен, проблемы несовместимости браузера могут свести на нет ваши усилия. Вы также должны проверить, совместим ли формат, в котором сохранены ваши файлы шрифтов, со шрифтом, который вы хотите использовать на веб-странице. Проблемы несовместимости могут повлиять на загрузку ваших шрифтов и, следовательно, на отображение ваших веб-страниц.
Пример из практики: из вышеизложенного мы можем сделать вывод, что нам нужно либо использовать стандартные шрифты, либо использовать «стеки шрифтов». Первым шагом является «тестирование шрифта», чтобы выяснить, является ли шрифт «веб-безопасным» или нет. По сути, браузер рассматривает каждую последовательность шрифтов как первый выбор шрифта, второй выбор шрифта, третий выбор шрифта и так далее. Если браузер не может найти какой-либо из шрифтов в последовательности, он вернется к стандартному шрифту с засечками, без засечек или моноширинному шрифту, в зависимости от используемой классификации шрифтов.
Например, в большом проценте операционных систем установлен шрифт Century Gothic. Таким образом, вы можете создать набор шрифтов, начиная с Century Gothic в качестве первого шрифта, за которым следуют Arial, Helvetica и, наконец, общая классификация Sans-Serif. Обратите внимание, что в CSS шрифты с несколькими словами в заголовке должны быть заключены в кавычки. Например, семейство шрифтов: «Century Gothic», Arial, Helvetica, Sans-Serif.
Это укажет браузеру сначала искать шрифт Century Gothic. Поскольку этот шрифт используется на большинстве систем, большинство ваших зрителей увидят сайт, отображаемый с помощью Century Gothic. Для зрителей без Century Gothic браузер сначала вернется к Arial, затем Helvetica и, наконец, к альтернативе Sans-Serif.
7 Факторы, связанные с физическими характеристиками шрифтов, могут влиять на гибкость использования шрифтов в дизайне.
Несмотря на то, что существует значительная возможность гибкости в отношении размера, межстрочного интервала, размера шрифта и хотя их вариации могут быть сделаны в соответствии с макетом, отзывчивая типографика может быть ограничена факторами, которые влияют на сами глифы. Это вес, ширина, контраст штриха, спуск и оптический размер. Изменения этих параметров могут повлиять на работу сайта. Доступны инструменты, которые помогают дизайнерам преодолевать эти ограничения, создавая различные виды стилей шрифтов посредством математической интерполяции между семействами шрифтов в пределах установленных ими физических параметров.
Двумя примерами таких инструментов являются Superpolator или FlowType.js. По мере уменьшения размера экрана относительная пропорциональная разница между шкалами увеличивается. Следовательно, должен быть баланс между размером экрана и относительным масштабом. С учетом этого были разработаны некоторые шкалы, которые можно использовать для разработки более эффективных веб-сайтов. Пропорция означает, во сколько раз шрифт заголовка больше или меньше основного текста. Вот почему нам нужна адаптивная типографика. Нам нужна типографика, которая будет приспосабливаться к сжатию в точках останова, потому что дизайнеры не могут сбрасывать все свои базовые стили для каждого типографского элемента на своей странице.
Практический пример: проверьте тип потока. Перетащите ползунок, и вы увидите, что делает адаптивная типографика благодаря таким инструментам, как Superpolator и FlowType.js.
Отзывчивая типографика совершенствуется с практикой. Имея некоторые знания о том, как использовать медиа-запросы и набор устройств с разными размерами экрана для тестирования, вы можете справиться с этим. Теперь, когда вы знаете, что нужно сделать, чтобы получить лучшую типографику, привлечь больше просмотров и конвертировать больше лидов, вы можете реализовать вышеизложенные принципы, чтобы увидеть, как они материализуются в физической реальности.