Готовим типографику: 4 основных ингридиента

«Контент решает все» – часто говорят создатели сайтов. Но никто не сможет поспорить с тем утверждением, что даже очень хороший контент нуждается в качественном дизайне.

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

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

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

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

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

Выделение фоном и использование контраста

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

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

Пробел

Согласно словам французского философа Жака Деррида, алфавит, служит для воспроизведения звуков, но его невозможно воспринимать без пауз и пробелов.

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

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

Масштабирование и кернинг

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

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

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

Интерлиньяж и высота строки

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

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

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

Поля и пробелы между столбцами

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

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

Иерархия текста

Иерархия текста позволяет определить его положение на странице относительно других элементов, передать степень значения и смысл.

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

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

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

Размер

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

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

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

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

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

Оригинал статьи: DWUser