Типографика в вебе

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

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

Слово «типографика» произошло от греческого τύπος — «отпечаток» и γράφω — «пишу» и означает художественное оформление текста с помощью шрифтов, символов и знаков.

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

Типографика является неотъемлемой частью любого проекта в вебе. Каждый сайт/лендинг и мобильное приложение разработано с использованием элементов типографики. Заголовки, текстовые блоки, кнопки и формы и даже подписи к изображениям — все это создается на основе типографики.

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

Таким образом, первая функция, которую выполняет типографика будет коммуникативная.

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

Помимо информационной функции, типографика также выполняет эстетическую функцию.

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

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

Набор букв и символов, которые имеют определенные конструктивные особенности, называют гарнитурой.

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

То, что обычно обыватели называют шрифтом, на самом деле является гарнитурой. Например, Arial, Helvetica, Roboto. А вот уже группа символов из определенной гарнитуры с особенностями начертания (например, Light (легкий), Regular (нормальный), Bold (жирный) и т.д.). называется шрифтом. Например, Helvetica Light или Roboto Bold.

Кегль — это вертикальная высота буквы. Этот размер измеряется в пикселях. Одной из важных характеристик типографики является интерлиньяж — это расстояние между базовыми линиями соседних строк текста. Интерлиньяж не следует путать с межстрочным интервалом, который является расстоянием от базовой линии до верхней части строчных букв на следующей строке.

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

Рассмотрим базовую классификацию шрифтов по видам:

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

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

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

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

5. Современные шрифты. Эти шрифты отличаются своей универсальностью и создают эффект новизны. Они часто имеют футуристический характер. Современные шрифты отлично подходят для технологических проектов, IT-сферы и проектов, которые связаны с образованием.

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

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

Соблюдайте иерархию заголовков и подзаголовков

Весь контент на веб-странице должен быть структурирован по степени важности и приоритетности. Для оформления текста нельзя использовать только один шрифт. На странице всегда должен быть заголовок и основной текст. Также могут использоваться дополнительные подзаголовки и текст подсказок, пояснения, дополнительная информация, которые оформлены самым маленьким по размеру шрифтом.

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

Выравнивайте текст по левому краю

Выравнивание по левому краю — это самый удобный для чтения вид выравнивания текста. В редких случаях заголовки/подзаголовки и основной текст могут быть выровнены по центру. Выравнивание по правому краю для текстов не используется (исключение – числовые значения в таблицах).

Ограничьте длину строки

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

Отдавайте предпочтение стандартным шрифтам

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

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

Откажитесь от капса

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

Добавьте пространства

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

Внимательно подходите к выбору цветов

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

Научитесь работать с символами

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

Не путайте тире и дефис

Разберитесь с кавычками

Запомнить правила оформления кавычек очень просто. Кавычки-ёлочки — для русского языка. Кавычки лапки — в русском языке только для выделения цитируемого текста в цитате. В британском английском языке — одинарные лапки, а двойные лапки — для выделения цитируемого текста в цитате. В американском английском наоборот, снаружи текста — двойные лапки, для цитируемого текста в цитате — одинарные.

Пробелы

Следите за тем, чтобы в тексте не было двойных и лишних пробелов. Пробелов не должно быть перед точкой, запятой, восклицательным и вопросительным знаками. Нельзя отбивать пробелами дефис, тире нужно отбивать либо с двух сторон, либо вовсе обойтись без пробелов. Математические знаки отбиваются только в том случае, если они стоят между двумя цифрами. Если знаки стоят рядом с одной цифрой (например, +2), то отбивать пробел не нужно.

Текст, в котором неправильно расставлены пробелы, смотрится неаккуратно и неэстетично. Такой текст неудобно читать, так как слова сливаются друг с другом.

Избегайте курсива

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

Не публикуйте непроверенный текст

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

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