Как работать с типографикой на сайте: 7 правил
В 80-х годах прошлого века специалисты Microsoft и MIT провели исследование и определили, что аудитория охотнее читает и положительно реагирует на продумано оформленный текст. Так в деле себя показывает типографика в веб-дизайне. Для современного бизнеса это не просто дань моде или желание подчеркнуть индивидуальность своего онлайн-проекта, но и инструмент, обеспечивающий хорошее взаимодействие web-ресурса с целевой аудиторией. В ход идут работа с цветом, стилем, масса различных подходов, чтобы привлечь внимание посетителя, как можно доходчивее донести до него продвигаемую мысль.
Как следует работать с типографикой в веб-дизайне – тема нашей статьи.
Что такое веб-типографика и зачем она нужна
Это своеобразное искусство оформлять тексты с помощью разных шрифтов, цветовых решений, параметров. Веб-типографика играет значительную роль в разработке привлекательного, комфортного для восприятия интерфейса. Правильно, гармонично подобранные элементы помогают улучшить читабельность. Это особо актуально для ресурсов, где большая часть информации подается в текстовом формате (блоги, новостные ленты, различные статьи).
Почему важно уделять внимание шрифтам, даже если вы не дизайнер
Предвидим, что большинство владельцев онлайн-проектов далеки от профессионального подхода к дизайну. Однако, уделять должное внимание веб-типографике необходимо. Назовем ряд причин для мотивации:
- Улучшается читаемость. Продуманный подбор шрифтов, их размеры, возможные интервалы делают содержание более читабельным. Этот фактор особенно актуален для людей, имеющих проблемы со зрением.
- Формируется общий стиль, отвечающий теме и основной цели.
- Повышается уровень восприятия. Правильно оформленный текст будет лучше восприниматься, легче запоминаться. Это положительно отразится на коммуникации сайта с целевой аудиторией.
- Оказывается благоприятное влияние на общее впечатление от нахождения на данной онлайн-площадке. Правильное оформление будет говорить о профессионализме и желании подчеркнуть уважение к посетителям.
Базовые элементы типографики
Типографика в веб-дизайне – это кропотливая работа, затрагивающая сразу много элементов оформления. Разберем основные из них.
Шрифт и гарнитура
Шрифт – это ряд символов, имеющих определенный стиль, размер. Уникальность заключается в начертаниях букв и цифр, в пропорциях и т. д. Некоторые компании стремятся создать свои варианты, чтобы повысить узнаваемость, выделиться на фоне конкурирующих организаций. Например, в Яндексе используется фирменный Yandex Sans.
Гарнитурой называется набор шрифтов, имеющих общую стилистику. Различают 2 ее разновидности:
- С засечками. Данная группа применяется, когда нужно придать статье, документу нотку официальности, например, в книгах, новостях, экспертных статьях. Часто используются Times, Antiqua.
- Без засечек. Примеры типа Arial применяются на сайтах, приложениях, когда хотят облегчить восприятие текстового формата на различных носителях, подчеркнуть практичность.
Кегль (размер шрифта)
Кегель измеряют в pt (punkt). Выбор определенной величины будет зависеть от ЦА, целей самого ресурса. Высота букв, цифр варьируется: для заголовков бОльшая, для основного текста – меньшая. 1 pt – это 1/72 дюйма. Самый расхожий размер, который предпочитают использовать в различных документах – 12 кегль.
Необходимо помнить, что неоправданно мелкие или крупные знаки затрудняют чтение, влияют на эффективность веб-типографики.
Межстрочный интервал (интерлиньяж)
Термин «межстрочный интервал» говорит сам за себя: это расстояние между строками и еще один фактор, влияющий на читабельность. Слишком маленький интерлиньяж создает эффект сбитости, скомканности в публикации, слишком большой – растянутости, затрудняющей восприятие.
Чаще всего для обыкновенного текста подходит одинарный, полуторный интервал между строками.
Межбуквенное расстояние (кернинг и трекинг)
Под термином «кернинг» подразумевают регулировку интервала между определенными парами символов, чтобы улучшить зрительную гармонию. Чаще расстояние выставляется автоматически, но при необходимости кернинг можно увеличить или уменьшить.
Трекинг – отладка расстояния для всех букв в конкретной части, например, статьи. Пробелы можно регулировать между словами, абзацами. Правильно настроенные параметры помогут не допустить «налепленности» или «растянутости» текста.
Длина строки и ширина текстового блока
Эти элементы типографики в веб-дизайне тоже оказывают влияние на читаемость. Длинные строки усложняют чтение и понимание, слишком короткие – создают эффект прерывистости, лишают повествование плавности. Оптимальные параметры строки связаны с размерами букв, интерлиньяжем.
Ширина блока, как правило, соотносится с длиной строки и должна обеспечить пространство для удобного чтения.
7 правил типографики на сайте, которые стоит запомнить
Корректная типографика в веб-дизайне делает текстовые блоки понятнее, привлекательнее для посетителей. Как этого добиться? Перечислим 7 правил веб-типографики, которые пригодятся при создании дизайна.
1. Не используйте больше двух шрифтов одновременно
Не рекомендуется использовать три и более разновидностей на каждой из веб-страниц. Зрительно это будет восприниматься, как хаос, который отвлекает внимание, затрудняет чтение. Оптимально использовать не больше 1-2 вариантов, которые вместе смотрятся гармонично и могут быть применены ко всему сайту. Это подчеркнет единообразие, целостность стиля.
2. Следите за читаемостью: не мельчите
Мелкие буквы сложно прочитать, особенно, если аудитория пользуется мобильными устройствами. Следует убедиться, что размеры символов оптимальные для чтения без усилий. Приемлемым будет 16px, если мы говорим о типичном текстовом материале.
3. Контраст важнее красоты: цвет, фон, насыщенность
Не стоит забывать, что типографика в веб-дизайне – это не столько про красоту, сколько про удобство. Поэтому использование умеренного цветового контраста между текстовой частью и общим фоном поможет сделать информационную составляющую заметнее.
Для фона специалисты советуют выбирать цвет, который будет выгодно оттенять само повествование, облегчать его прочтение. При этом нужно избегать насыщенные, сильно контрастирующие цвета. Это может сказаться на быстрой утомляемости глаз.
4. Делайте тексты адаптивными для разных экранов
Очередное правило веб-типографики – не пренебрегать адаптивным дизайном. Он позволит содержанию страницы правильно отображаться на разнообразных устройствах. Следует убедиться, что страницы адаптируются к разным параметрам экранов, что помогает поддерживать комфортность чтения на смартфонах, планшетах.
5. Соблюдайте иерархию заголовков
Соблюдение иерархии относительно заголовков поможет структурировать, систематизировать информацию, а также выделить важные части. Для этого используют различные стили для H1-H6. Это подчеркнет значимость частей статьи (основная информация, детализация разных уровней), сделает легче навигацию.
6. Правильно подбирайте межстрочный интервал
Расстояние между строк заметно влияет на читабельность. Очень маленький интерлиньяж затрудняет восприятие, заставляет напрягать зрение, слишком большой – создает неоправданные, пустые пространства. Необходимо выбирать оптимальные варианты, обеспечивающие такие интервалы между строками, чтобы было удобно читать.
7. Не злоупотребляйте выравниванием по ширине
Стремясь придать презентабельный вид статье, не стоит сильно увлекаться ее выравниванием по ширине. В некоторых случаях могут появиться неравномерные расстояния между словами. Визуально это некрасиво, действует как отвлекающий фактор. В такой ситуации рекомендуется делать выравнивание относительно левого края. Чтобы выбрать подходящий вариант, попробуйте несколько вариантов, выберите удачный.
Как выбрать шрифты для сайта
Делая выбор для типографики в веб-дизайне, учитывайте следующие нюансы:
- Читаемость. Все должно быть легко различимо на разнообразных цифровых устройствах, мониторах. Здесь подходит написание символов с простыми, четко очерченными формами.
- Совместимость со стилистикой бренда. Должны поддерживаться дух, характер компании с учетом привычек целевой аудитории.
- Универсальность. Рекомендуется выбирать наборы символов, хорошо смотрящиеся в разных видах (например, жирный, курсив). Это даст возможность применять один набор для заголовков всех уровней и основного содержания, сохранить общую гармонию.
- Адаптивность под используемые браузеры, устройства;
- Поддержка букв кириллицы. Если онлайн-проект ведется на русском языке, необходимо убедиться, что определенный шрифтовой набор поддерживает кириллицу. Это условие важно для корректного показа слов (может произойти замена букв на другие значки), сохранения читабельности.
В поисках подходящих вариантов для веб-типографики могут помочь бесплатные сервисы, типа Google Fonts и Adobe Fonts.
Заключение
Типографика в веб-дизайне – не развлечение для эстета, а своеобразная борьба за удобство для пользователей. Это искусство, которое основывается на опыте, череде удач и ошибок. Надеемся, что правила веб-типографики, которым мы рекомендуем следовать, помогут сделать уникальный, эффектный, удобный дизайн.
