Елена Булыгина предлагает Вам запомнить сайт «Ленусик»
С тех пор как дизайн стал профессией, типографика является одним из основных предметов в этой области. По сути, это искусство доносить смысл до читателя или пользователя посредством визуального оформления наборного текста. Грамотная работа с текстом — база и залог успеха любого дизайнерского решения.
Типографика — это еще и наука, изучению которой специалисты посвящают всю жизнь. Она развивается и изменяется, вызывает споры и заставляет думать о прекрасном. Шрифт больше не должен быть незаметным — сегодня он может быть любым: забавным, витиеватым, неаккуратным, дерзким, нелогичным, а в лучших образцах — изящным.
Типографика включает сотни терминов и принципов, но сегодня мы разберем самые основные. Чтобы было легче их запомнить, рекомендуем добавить статью в закладки, а также записать самое важное и разместить конспект на видном месте.
Анатомия шрифта
Шрифт состоит из букв, и это не просто линии и круги, соединенные в знакомые формы. Каждая буква индивидуальна и формируется из множества элементов со своими названиями. Как и у людей, у букв есть характер, настроение и даже анатомические детали.
Для более ясного понимания, что такое типографика текста, мы собрали важные понятия в одной картинке — для наглядности и удобства. Время достать ручку и начать записывать!
Символы — это отдельные буквы, знаки пунктуации, цифры и прочие элементы, которые используются в типографском наборе.
Строчные буквы — это буквы обычной величины, используются для написания во всех случаях, кроме тех, когда по правилам орфографии и пунктуации требуется употребление прописной буквы.
Прописные буквы — это заглавные буквы, отличающиеся от строчных размером, а иногда и начертанием. С прописной буквы пишется первое слово в тексте и цитате.
Линия шрифта — воображаемая линия, проходящая по нижнему краю строчных символов без учета нижних выносных элементов.
Верхняя линия — воображаемая линия, проходящая по верхнему краю строчных символов без учета верхних выносных элементов.
Верхний выносной элемент — элемент строчных букв, выходящий за верхнюю линию (например, в буквах б и в).
Нижний выносной элемент — элемент строчных букв, опущенный ниже линии шрифта (например, в буквах у и ф).
Засечка (сериф) — короткий, обычно перпендикулярный штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. У рубленых шрифтов засечки отсутствуют, отсюда и их название «sans serif» («без засечек»).
Понятие шрифта и его характеристики
Вы наверняка слышали, что человек воспринимает чуть ли не 90% информации глазами, то есть зрительным путем. Точную цифру привести сложно, но ясно, что визуальный способ зачастую доминирует, если сравнивать его с аудиальным и тактильным восприятием.
Именно поэтому почти вся информация вокруг нас представлена в виде текста. Шрифт — это элемент типографики, который помогает донести ее правильно и быстро. Не обладая достаточными знаниями о нем, дизайнер упускает изящные, а иногда и единственно верные способы решения задач. Пора разобраться, что представляет собой шрифт и какими характеристиками он обладает. Начнем с понятия гарнитуры.
Гарнитура — это семейство начертаний шрифта, имеющих общие стилевые особенности. Есть множество известных гарнитур: Helvetica, Futura, Roboto и другие.
Шрифт — это комплект строчных и прописных символов, знаков препинания, цифр и спецсимволов одного размера и начертания для отдельной гарнитуры.
Текст этой статьи набран гарнитурой Roboto, шрифтом Roboto Regular. Зачастую дизайнеры без углубленного знания о том, что такое типографика, совмещают понятия гарнитуры и шрифта и считают, что текст этого предложения «набран шрифтом Roboto». С точки зрения терминологии это грубая ошибка, но на качество повседневной коммуникации между дизайнерами она не влияет.
Начертание — это внешний вид шрифта. Большинство гарнитур предполагают стандартный набор начертаний: Regular (обычное), Italic (курсивное), Semibold (полужирное) и Bold (жирное).
Типографская система мер
Для оформления текста дизайнеры используют типографские приемы. Это не только правильный подбор гарнитуры и начертания, но и грамотная работа с расстояниями.
Дизайнер может работать с расстояниями между буквами, словами, строками, абзацами. Этот аспект может стать самым сложным для новичка. Напишите в комментариях, если нужен подробный разбор по композиции и расстояниям в типографике.
В типографике есть четыре основных термина: кегль, интерлиньяж, кернинг и трекинг. Важно иметь четкое представление о каждом из них — обратное часто выдает уровень начинающих дизайнеров.
Кегль — размер буквы или знака по вертикали, включающий ее нижние и верхние выносные элементы. Единица измерения кегля — пункт (pt). Например, популярны кегли шрифта в 14, 16, 24 pt и многие другие.
Интерлиньяж (межстрочный интервал) — это вертикальный интервал между строками текста. Измеряется в пунктах, но его размер зависит от кегля шрифта. Интерлиньяж в 120 % от размера шрифта принято считать минимальным. То есть при шрифте в 14 pt интерлиньяж составит по меньшей мере 17 pt. Размер межстрочного интервала зависит от кегля и начертания шрифта, а также от расположения текста, поэтому универсальной формулы по вычислению интерлиньяжа нет.
Теперь о понятиях, которые постоянно путают: кернинг и трекинг. Кернинг — это изменения расстояния между конкретными символами, а трекинг — между символами и словами. Трекинг позволяет разрядить или уплотнить текст, в то время как кернинг используется для повышения удобочитаемости символов.
Полезные советы и ресурсы по теме
- Прочитайте книгу Александры Корольковой «Живая типографика». Это базовое пособие о типографике для начинающих дизайнеров, которое доступно бесплатно.
- Еще один электронный ресурс, но по платной подписке — учебник «Типографика и верстка» издательства «Бюро Горбунова». Обратите внимание на оформление сайта — это лучшая реклама содержания.
- На начальном этапе полагайтесь на готовые подборки сочетаний гарнитур. Они есть на множестве сайтов: FontPair, Fontjoy, Canva Font Combinations и других.
- Используйте не более 2–3 гарнитур в одном проекте. Это правило универсально для задач любой направленности. Если вы только начинаете изучать что такое типографика, рекомендуем сперва ограничиться одной гарнитурой.
- Установите расширение WhatFont для Chrome или для Safari, чтобы быстро узнать название понравившегося шрифта.
- Типографика построена на акцентах. Используйте начертания и кегль, чтобы расставлять их и создавать структуру текста. Традиционно заголовок имеет жирное начертание и значительно больший кегль, чем основной текст. Например, он может быть выполнен шрифтом Helvetica Bold 48 pt, а основной текст — Helvetica Regular 14 pt.
В работе веб-интерфейсом полезно играть с толщиной шрифта:
Не берите шрифты толщиной меньше 400 для работы с пользовательским интерфейсом. Они могут неплохо работать с крупными буквами заголовка, но если буквы маленькие, их сложно читать. Если надо показать незначительность текста, не уменьшайте его толщину — лучше используйте светлый оттенок или шрифт меньшего размера.
Светло-серый текст на белом фоне хорошо подходит, если вы хотите, чтобы текст не привлекал внимание читателя. Но на цветном фоне светло-серый текст уже смотрится плохо. Так происходит из-за уменьшения контраста. Выстроить иерархию в тексте позволяет приближение цвета текста к цвету фона, а не светло-серый цвет. 
Уменьшить контраст при работе с цветным фоном можно двумя способами.
Выберите цвет того же оттенка, что и фон, а дальше настраивайте насыщенность и яркость, пока цвет не покажется вам правильным.
Чтобы тени были заметнее, вместо blur и spread добавьте вертикальное смещение. Такой эффект смотрится более естественно, потому что симулирует источник света, расположенный сверху. Мы привыкли к такому освещению в реальном мире. Это работает и со встроенной тенью, которую можно использовать в ячейках или формах ввода: 
Если хотите узнать больше о дизайне с тенью, 
Если нужно разделить два элемента, не хватайтесь за границы, будто это единственный способ. Слишком частое использование границ может перегрузить дизайн. В следующий раз, когда решите воспользоваться границами, вспомните про одну из следующих идей.
Если вы работаете над чем-то, где можно использовать большие иконки (пример — раздел «Функциональные возможности» на лендинге»), возможно, вы инстинктивно берёте бесплатный набор иконок (например, Font Awesome или Zondicons) и увеличиваете размер, пока он не покажется вам подходящим. Это векторные изображения, так что качество при масштабировании не страдает, так? Но если размер иконок был 16—24 px, после трёхкратного или четырёхкратного увеличения они не будут смотреться профессионально. У них не будет нужной детализации, так что они всегда будут казаться непропорциональными и грубыми. 
Если у вас есть только маленькие иконки, попробуйте вставить их в фигуру другого цвета: 
С одной стороны, сама иконка будет ближе к своему размеру, с другой, она займёт больше пространства на странице. А если позволяет бюджет, вы можете воспользоваться премиум-набором иконок, изначально созданных большими. Попробуйте Heroicons или Iconic.
Если вы не графический дизайнер, как добавить веб-интерфейсу визуальную изюминку, которая у дизайнеров появляется благодаря красивым фотографиям или цветным иллюстрациям? Очень простой способ — с помощью цветных границ добавить акцент в те части интерфейса, которые иначе бы смотрелись слишком бледно. Например, сбоку от предупреждения: 
Чтобы добавить в UI цветной прямоугольник, не нужен талант графического дизайнера. Но такой прямоугольник может придать вашему сайту более профессиональный вид. Сложно выбрать цвета? Попробуйте начать с ограниченной палитры Color Search от Dribbble, чтобы не попасть под влияние бесконечных возможностей обычной палитры цветов.
Когда пользователь может произвести много разных действий на странице, очень легко попасться в ловушку и сделать дизайн этих действий, опираясь исключительно на семантику. Шаблоны сервисов вроде Bootstrap даже поощряют это — предоставляют меню семантических стилей при выборе кнопки: 
«Это положительное действие? Сделайте кнопку зелёной». «Это удаление данных? Сделайте кнопку красной». Но существует более важный момент, о котором обычно забывают, — иерархия. Каждое действие на странице имеет своё место в пирамиде важности. На большинстве страниц есть одно главное действие, пара менее важных второстепенных действий и несколько редко используемых действий третьестепенной важности. Дизайн должен отражать место действий в этой иерархии:
«А что с деструктивными действиями? Разве не нужно их всегда выделять красным?». Необязательно. Если деструктивное действие не является главным на этой странице, лучше сделать его в стиле второстепенного или третьестепенного действия. 
Приберегите такое стилевое оформление — жирный шрифт, красный цвет — для тех случаев, когда негативное действие является основным действием в интерфейсе. Например, в диалоговом окне подтверждения: 
