Типографика в веб–дизайне: основы и правила

Еще 40 лет назад ученые из Microsoft доказали, что типографика в дизайне играет решающее значение: текст, оформленный по всем правилам, будет дочитан до конца с вероятностью в 90%. И речь не только о выборе шрифтов. Значение имеет все: от размера отдельных букв, до расстояний между строками и отдельными блоками текста. Если раньше приемы типографики использовались исключительно для оформления печатной продукции – книг, журналов, газет, рекламных буклетов и других материалов, то в эпоху тотальной цифровизации все изменилось.

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

Задачи типографики сайта

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

• Упорядочивание информации. Использование разных размеров шрифта, начертаний и стилей облегчает восприятие текста, позволяя бегло просматривать его и сразу же выделять самые важные тезисы. С помощью основных приемов полиграфического оформления можно без труда выстроить иерархию текста.
• Расстановку акцентов. Привлекайте внимание к самым важным деталям при помощи разных сочетаний цветов, размеров и начертаний шрифта. Такие приемы типографики в веб–дизайне помогают акцентировать внимание пользователей на призывах к действию, формах обратной связи, меню и других важных элементах страницы.
• Создание стиля и атмосферы. Классические шрифтовые пары в дизайне страниц подчеркнут солидность вашей компании, ее надежность и стабильность. Использование креативных начертаний, в свою очередь, создаст легкую, непринужденную атмосферу веселья и беззаботности, и подойдет для личных блогов, сайтов для компаний, работающих в сфере развлечений и развлекательных ресурсов.
• Улучшение восприятия. Текст на всех страницах портала должен легко читаться. Чтобы повысить комфорт восприятия информации пользователями, необходимо подбирать оптимальный размер шрифтов, подходящий интерлиньяж и длину строк.
• Адаптивность. Типографика и верстка сайта для мобильной и десктопной версии не могут быть одинаковыми. Очень важно сохранить выбранный стиль веб–ресурса для всех типов браузеров и гаджетов с разными диагоналями экранов.

Термины и понятия типографики в веб–дизайне

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

Шрифты

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

Часто компании создают собственный шрифт, чтобы повысить узнаваемость бренда и выделиться на фоне конкурентов. Яркий пример – Yandex Sans, отдаленно напоминающий популярный Arial.

Среди гарнитур или отдельных семейств шрифтов выделяют несколько основных групп:

С засечками (Times New Roman, Marxiana Antiqua). Такой вариант знает каждый, кто хотя бы раз держал в руках книгу или газету: их широко используют для печатной продукции. Этот вид начертаний придаст тексту строгий, официальный вид.

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

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

Правила типографики регламентируют объединение отдельных гарнитур шрифтов в суперсемейства с похожими начертаниями отдельных символов. Так, суперсемейство Lucida включало в себя три начертания шрифта Lucida Grande и было специально разработано для MAC OS, где успешно применялось на протяжении 15 лет – с 1999 по 2014 год.

Кегль

За этим термином скрывается высота отдельных букв, измеряемая в точках (pt). При этом, одна точка равна 0,352 мм. Самый популярный кегль для печатных материалов и веб–ресурсов – 12. Он обеспечивает видимость текста с небольшого расстояния.

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

Интерлиньяж

Этот, сложный на первый взгляд, термин обозначает всем известный межстрочный интервал. Как и кегль, интерлиньяж измеряется в точках (pt). Чтобы рассчитать оптимальный интерлиньяж, нужно прибавить 1/5 к размеру кегля. Таким образом, для текста, набранного 12–м кеглем, он составит 16 pt. Если установить размер меньше, строчки будут сливаться, а большее значение приведет к появлению слишком больших и неэстетичных разрывов.

Кернинг

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

Трекинг

Термин не зря ассоциируется со спортом, ведь за ним скрывается расстояние между отдельными абзацами и словами в тексте. Трекинг можно уменьшить или увеличить, добавив тексту визуального объема.

Конечно, здесь далеко не полный перечень терминов, используемых в веб–полиграфии. Но и их достаточно для того, чтобы создать сайт, соответствующий основам типографики.

Простые правила типографики для веб–дизайнера

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

• Выберите 2–3 основных шрифтовых пары для использования на портале. Шрифты должны сочетаться друг с другом, а их стиль – соответствовать характеру вашего бренда и его айдентике. Для основного текста лучше отдать предпочтение лаконичным линиям и простым формам: так вы будете уверены, что ваши статьи точно прочтут.
• Для заголовков используйте крупные, хорошо заметные шрифты, которые сразу же привлекают внимание. Для подзаголовков можно выбрать более мелкие и легкие варианты с тонкими линиями: они должны поддержать основную идею текста и облегчить восприятие информации.
• Для текста и фона лучше подобрать контрастные цвета в соответствии с бренд–буком компании. Конечно, необычные сочетания цветов смотрятся интересно, но не факт, что красный текст на бежевом фоне будет удобно читать. Помните, что черное и белое – тренд, который никогда не выйдет из моды.
• Перед тем, как приступить к верстке окончательной версии сайта, убедитесь, что выбранная вами типографика одинаково хорошо поддерживается разными гаджетами и программами для просмотра сайтов, а отдельные буквы читаемы как с широкоформатных мониторов, так и с небольших экранов смартфонов и планшетов.
• До того, как использовать какой–либо шрифт в собственном проекте, убедитесь, что не нарушаете авторские права. Типографика – не просто эстетичные начертания букв, цифр и символов, а чей –то интеллектуальный труд, использование которого может потребовать лицензии.
• Чтобы весь контент на страницах портала было удобно читать, выравнивайте заголовки и подзаголовки по левому краю, а основной текст – по правому. Так вы визуально структурируете любую размещенную на сайте статью.
• Убедитесь, что подобрали оптимальный размер кегля для заголовков, подзаголовков и основной части статей. Символы должны быть такого размера, чтобы пользователю было удобно читать на расстоянии.
• Чтобы у читателя не возникло ощущения перегруженности страниц информацией, обязательно разбивайте тексты на отдельные блоки–абзацы. Постарайтесь, чтобы каждый из них включал в себя одну законченную мысль. Так информация будет гораздо легче восприниматься, а вероятность того, что вашу статью дочитают – повысится.
• Не забывайте отделять друг от друга пробелами отдельные текстовые блоки на странице. Убедитесь, что расстояния достаточно, чтобы они не сливались при чтении.

И, конечно, не забывайте об онлайн–библиотеках шрифтов и специальных плагинов для браузеров. Так, в Google Fonts собрана обширная библиотека различных шрифтов и пар, которые можно бесплатно использовать в своих проектах, а такие плагины, как WhatFont и Fontface Ninja помогут быстро определить, какой именно шрифт использован на сайте конкурентов и разобраться с его основными параметрами.

Тренды в веб–типографике

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

Геометрические и рукописные шрифты

Классический Arial – это тот вариант, который никогда не выйдет из моды. Этот шрифт популярен благодаря своей универсальности и легкости. Среди рукописных шрифтов популярными остаются Script MT и Brush Script, способные подчеркнуть индивидуальность любого ресурса.

Использование нескольких гарнитур одного шрифта

Этот прием позволяет разнообразить дизайн страниц, не нарушив единой стилистической концепции. Им с удовольствием пользуются топовые специалисты по разработке сайтов.

Сжатие и растяжение символов

Такая методика делает текст легко читаемым и привлекает внимание пользователей.

Жирные и курсивные сочетания

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

Необычная заглавная буква в начале строки

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

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

Функционал Taptop позволяет с легкостью применять основные правила типографики при верстке сайта. Вы можете изменить шрифт в готовом шаблоне из нашей Библиотеки, адаптировав его под собственный бизнес, или создать страницу с нуля, самостоятельно оформив все текстовые материалы на портале. В Taptop могут быть применены любые шрифты из Google Fonts и дизайнерские пользовательские варианты.