Гид по основам типографики для начинающих и недизайнеров
2026-02-21 07:50 Diff
https://skillbox.ru/media/design/typo-basics/

#статьи

  • 20 июл 2023
  • 0

Гид по основам типографики для начинающих и недизайнеров

Простые советы для всех: как обращаться со шрифтами, размерами букв, отступами и цветом, чтобы красиво оформлять тексты.

Иллюстрация: Полина Честнова для Skillbox Media

Учится на графического дизайнера в BBE, преподаёт английский и развивает до разорения убыточный керамический проект Bröken.

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

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

Простыми словами объясняем:

Типографика — это комплекс приёмов оформления текста, причём любого: в толстой книге, на лендинге, в карточке товара, в объявлении, на адресной табличке и в документе. Задача дизайнера в работе с типографикой — наладить взаимодействие всех текстовых и графических элементов на странице, чтобы контент выглядел эффектно, аккуратно, спокойно или броско.

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

Даже не зная языка, на котором написан текст, зритель понимает, что на странице главное, а что второстепенное. Так типографика помогает управлять вниманием в вебе
Скриншот: сайт Elena Mora / Skillbox MediaСтруктура, которую создаёт грамотная типографика, делает дизайн удобным
Изображение: Daria Kwon / Alexandra Loginevskaya / Ksenya Ippolitova / Behance

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

Есть пять крупных групп шрифтов: гротеск и антиква, брусковые, акцидентные (декоративные), рукописные (каллиграфические).

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

Вы наверняка знакомы с представителями этого типа: Calibri, Arial, Helvetica, Futura. Шрифты всех уведомлений в ваших смартфонах — тоже гротески: Roboto в устройствах на Android и San Francisco в iPhone.

Все шрифты на странице интернет-магазина — гротески
Скриншот: сайт «Золотое яблоко» / Skillbox MediaОформление карточек для бренда кофе такое лаконичное не только благодаря большому объёму белого, но и благодаря шрифту без засечек
Изображение: Masha Chern / öppen studios. / Anastasiia Iakovleva / Behance

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

Самые известные шрифты такого типа — Times New Roman, Georgia, Garamond, Playfair.

Антиквами, как правило, оформляют длинные тексты. Для восприятия это привычно и удобно
Изображение: Masha Kasatkina / BehanceКрупные заголовки антиквой на сайте Alta Moda Dolce & Gabbana — кутюрного направления, в рамках которого вручную шьют уникальные наряды, вдохновлённые историей и эстетикой разных регионов Италии. Такой шрифт подчёркивает связь с традициями, прошлым и подсказывает, что бренд — это что-то великолепное
Скриншот: сайт Dolce& Gabbana Alta Moda / Skillbox Media

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

Примеры шрифтов такого типа: Rockwell, Clarendon и Courier New
Скриншот: сайт Paratype / Skillbox MediaБрусковый шрифт в дизайне сайта
Скриншот: сайт Secret Stache / Skillbox Media

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

Широко известные примеры: AvantGarde, Lobster, Pacifico.

Акцидентный шрифт Suogert
Изображение: Oleg Gert / BehanceЧасто акцидентные шрифты неразборчивы: их главная задача — привлекать внимание, а не быстро передавать информацию. Но в этом примере верхнюю надпись на развороте книги прочитать легко, хотя она и набрана декоративным шрифтом
Изображение: Tomás Gouveia / Leonardo Silva / Mané AP / Behance

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

Примеры таких шрифтов: Zapfino, Brush Script и Allura.

Рукописный шрифт «Васёк»
Изображение: Ilya Designgsta / BehanceScript-шрифты могут быть похожи на курсив. Поэтому, если оформлять ими большие объёмы текста, это может создать впечатление, что информация неважная, дополнительная — как примечания
Изображение: Studio Anna Haas

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

В каждую гарнитуру входят подобные, родственные шрифты, которые различаются характеристиками стиля:

  • По ширине — от узкого (condensed или narrow) до широкого (wide или extended).
  • По наклону — от прямого (roman или upright) до курсивного (italic или oblique).
  • По жирности штрихов — от тонких (thin или light) до очень насыщенных (bold или black).

Например, Montserrat — это гарнитура, а Montserrat Medium Italic — один из шрифтов этой гарнитуры.

Четыре стиля шрифтов в одном семействе
Скриншот: сайт Brownfox / Skillbox MediaЖирный шрифт с зауженным рисунком букв — Condensed Bold
Изображение: Marina Bolotina / Behance

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

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

Примеры суперсемейств: Lucida, Frutiger.

Roboto — суперсемейство: в него входят и гротески, и брусковые, и антиквенные форматы
Скриншот: сайт Google Fonts / Skillbox Media

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

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

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

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

Три простых совета по подбору шрифтовых комбинаций:

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

Самый простой способ создать контраст — сочетать шрифт с засечками и шрифт без засечек. Ещё найти удачный контраст можно на стыке красивых декоративных и простых привычных шрифтов: акцидентные варианты сбалансировать, например, вариантами без засечек.

И если вы только начинаете работать с типографикой, в одном проекте лучше не использовать больше двух, максимум трёх разных шрифтов.

Акцидентный шрифт плюс гротеск в дизайне приглашения
Изображение: из личного архива Анастасии Белокобыльской

Шрифты из одного суперсемейства априори сочетаются друг с другом.

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

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

Три шрифта одного автора
Скриншот: type.today / Skillbox Media

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

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

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

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

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

Шесть вариантов цветовых комбинаций для текста и фона
Изображение: Anna HaasКонтраст текста и фона на упаковке кремов практически отсутствует. Но именно в таком дизайне это эффективное решение: рядом с яркими логотипами и упаковками конкурентов эти едва видные надписи привлекут внимание
Изображение: Oksana Paley / Jane Berezhna / omsky studio / andrew kuzmin / Behance

Подбор цвета в типографике прямо связан с теорией цвета в дизайне вообще. Начать разбираться в этой области стоит с цветового круга Иттена — одной из теоретических основ современного дизайна.

Кроме того, есть множество онлайн-сервисов и приложений, предлагающих как механику подбора цветов, так и готовые цветовые схемы, — например, Adobe Color.

Размер букв в типографике задаёт иерархию, которая, в свою очередь, определяет направление внимания читателя.

Есть три простых принципа, по которым создают визуальную иерархию в текстах:

  • Заголовки делают крупнее и жирнее, чем основной текст, чтобы привлечь внимание к основным идеям. Для печатного текста это в среднем от 26 до 38 пунктов.
  • Подзаголовки, которые обозначают внутренние разделы или подтемы, обычно меньше, чем заголовки, но крупнее, чем основной текст. В среднем — от 18 до 29 пунктов.
  • Шрифт основного текста должен быть достаточно крупным для комфортного чтения, но буквы не должны быть слишком большими, чтобы не отвлекать внимание. Например, в документах это обычно от 10 до 12 пунктов.
Три разных шрифта трёх размеров в оформлении текста
Скриншот: сайт Fontjoy / Skillbox Media

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

Разные размеры шрифтов помогают управлять вниманием читателя, и это даёт среди прочего свободу располагать тексты в нетрадиционных местах макетов
Изображение: Margarita Romanova / Behance

Интерлиньяж — это расстояние между строками текста, и оно формирует ритм чтения. Когда строки расположены слишком близко друг к другу, их становится сложно прочитать. А если межстрочное пространство сделать больше, чем следовало бы, то текст визуально и по смыслу распадётся на отдельные фрагменты.

Когда подбирают интерлиньяж, учитывают:

  • количество текста в блоке;
  • кегль шрифта;
  • характер шрифта — простой он или супердекоративный;
  • размер выносных элементов;
  • длину строки.

Простой совет: начните со значения интерлиньяжа, равного примерно 1,2 размера шрифта. Например, отрывок набран 10-м кеглем — значит, интерлиньяж 12.

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

Трекинг — это подбор расстояния между символами внутри одного слова.

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

Простой совет: изменяйте трекинг в тексте, чтобы он выглядел эстетично, но следите за тем, чтобы сохранялось удобство чтения.

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

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

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

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

Чтобы текст не получился «рваным», в нём нужно расставлять неразрывные пробелы.

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

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

Такие пробелы, например, могут стоять:

  • Между числом и единицей измерения, символом валюты, знаком процента (20 кг, 15 см, 100 £, 4%).
  • Между сокращениями (респ. Коми, и т. д.).
  • В датах и времени (12 июля, 6 часов).
  • Между именем и фамилией.
  • Между топонимами, которые состоят из двух или трёх слов.
  • Между предлогом и словом — так избегают появления «висячих» предлогов.

Неразрывный пробел создаётся комбинацией клавиш: Ctrl + Shift + Space или Cmd + Shift + Space на Mac.

Но ставьте их обдуманно: чрезмерное использование приводит к неестественной длине строки.

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

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

Даже простая сетка позволяет создать сложный, но аккуратный дизайн
Изображение: Stas Aki / Behance
  • Тренды в дизайне постоянно эволюционируют. Они отражают общественные, культурные и технологические перемены вокруг нас. Дизайнеру важно быть в курсе изменений, чтобы создавать свежие и актуальные работы — в том числе типографические.
  • Из просмотра и анализа работ других, сбора самой разной информации мы формируем свой эстетический фильтр — насмотренность.

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

  • Активно анализируйте то, что вы видите. Какие формы, цвета, шрифты привлекают ваше внимание? Как они взаимодействуют между собой? Что в этих работах вызывает эмоции и как использовать это в собственном дизайне? Задавайте эти вопросы, чтобы развивать эстетическое чутьё и сознательно применять его в своих работах.
Курс с трудоустройством: «Профессия Графический дизайнер PRO» Узнать больше