логотип Taptop
Типографика в веб–дизайне: основы и правила
Навигация по статье:

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

    Еще 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 и дизайнерские пользовательские варианты.

    Может быть интересно
    все статьи
    Оставить заявку
    Имя
    Это поле обязательно для заполнения
    Телефон
    Это поле обязательно для заполнения
    Почта
    Это поле обязательно для заполнения
    Радио группа
    Это поле обязательно для заполнения
    Комментарий
    Это поле обязательно для заполнения
    Галочка
    Это поле обязательно для заполнения
    Спасибо!
    Форма отправлена
    Что-то не так. Попробуйте позже