Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#статьи</a>

2 <ul><li>20 июл 2023</li>

3 <li>0</li>

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

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

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

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

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

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

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

11 <ul><li><a>зачем ориентироваться</a>в основах типографики;</li>

12 <li><a>как строят</a>понятные типографические композиции;</li>

13 <li><a>как правильно выделять</a>главную и не терять второстепенную информацию;</li>

14 <li><a>в каких случаях нужен</a>яркий цвет и большой размер шрифта;</li>

15 <li><a>что делать</a>с расстояниями между словами;</li>

16 <li><a>как заметно улучшить</a>оформление текста.</li>

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

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

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

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

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

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

23 Все шрифты на странице интернет-магазина - гротескиСкриншот: сайт "<a>Золотое яблоко</a>" / Skillbox MediaОформление карточек для бренда кофе такое лаконичное не только благодаря большому объёму белого, но и благодаря шрифту без засечекИзображение: Masha Chern / öppen studios. / Anastasiia Iakovleva /<a>Behance</a>Антиквы, или шрифты с засечками, имеют маленькие декоративные элементы, которые будто подчёркивают каждый штрих. Такие характерные линии или хвостики на концах основных штрихов букв создают более традиционное, классическое впечатление и обычно подходят для больших текстов в книгах или статей в журналах.

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

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

26 Примеры шрифтов такого типа: Rockwell, Clarendon и Courier NewСкриншот: сайт<a>Paratype</a>/ Skillbox MediaБрусковый шрифт в дизайне сайтаСкриншот: сайт<a>Secret Stache</a>/ Skillbox MediaАкцидентные, или декоративные, шрифты - это все те шрифты, что не попадают в стандартные категории. У них может быть сложный рисунок и выразительная графика, поэтому такие шрифты становятся ярким акцентом в дизайне. Мы не увидим их в длинных текстах - скорее в логотипах, заголовках или других коротких блоках.

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

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

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

30 Рукописный шрифт "Васёк"Изображение: Ilya Designgsta /<a>Behance</a>Script-шрифты могут быть похожи на курсив. Поэтому, если оформлять ими большие объёмы текста, это может создать впечатление, что информация неважная, дополнительная - как примечанияИзображение:<a>Studio Anna Haas</a>Шрифты одного происхождения, одной структуры и с одной графической базой объединяют в небольшие семейства, которые называютсягарнитурами(правда, в повседневной речи понятия "гарнитура" и "шрифт" часто путают и используют как синонимы).

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

32 <ul><li>По ширине - от узкого (condensed или narrow) до широкого (wide или extended).</li>

33 <li>По наклону - от прямого (roman или upright) до курсивного (italic или oblique).</li>

34 <li>По жирности штрихов - от тонких (thin или light) до очень насыщенных (bold или black).</li>

35 </ul>Например, Montserrat - это гарнитура, а Montserrat Medium Italic - один из шрифтов этой гарнитуры.

36 Четыре стиля шрифтов в одном семействеСкриншот: сайт<a>Brownfox</a>/ Skillbox MediaЖирный шрифт с зауженным рисунком букв - Condensed BoldИзображение: Marina Bolotina /<a>Behance</a>Суперсемейства - это группы шрифтов, состоящие из нескольких семейств. В отличие от гарнитуры, где все шрифты имеют одну структуру (например, все с засечками или все без засечек), суперсемейство может включать в себя разные варианты.

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

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

39 Roboto - суперсемейство: в него входят и гротески, и брусковые, и антиквенные форматыСкриншот: сайт<a>Google Fonts</a>/ Skillbox MediaРазные шрифты могут хорошо сочетаться друг с другом или конфликтовать. Если для оформления текстов нужны комбинации шрифтов, то задача дизайнера - найти те, что контрастируют, но не конфликтуют.

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

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

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

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

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

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

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

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

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

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

50 Три шрифта одного автораСкриншот:<a>type.today</a>/ Skillbox MediaПомните: много разных шрифтов в одном дизайне дадут ощущение "мусорности" и сделают информацию сложной для восприятия. К этому может привести увлечение "игрой в шрифты" и подбор сочетаний без должного понимания контекста.

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

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

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

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

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

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

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

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

59 <ul><li>Заголовки делают крупнее и жирнее, чем основной текст, чтобы привлечь внимание к основным идеям. Для печатного текста это в среднем от 26 до 38 пунктов.</li>

60 <li>Подзаголовки, которые обозначают внутренние разделы или подтемы, обычно меньше, чем заголовки, но крупнее, чем основной текст. В среднем - от 18 до 29 пунктов.</li>

61 <li>Шрифт основного текста должен быть достаточно крупным для комфортного чтения, но буквы не должны быть слишком большими, чтобы не отвлекать внимание. Например, в документах это обычно от 10 до 12 пунктов.</li>

62 </ul>Три разных шрифта трёх размеров в оформлении текстаСкриншот: сайт<a>Fontjoy</a>/ Skillbox MediaНо в зависимости от контекста, целевой аудитории и особенностей проекта эти значения меняются: для билбордов размеры должны быть больше, для картинок в соцсетях - меньше.

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

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

65 <ul><li>количество текста в блоке;</li>

66 <li>кегль шрифта;</li>

67 <li>характер шрифта - простой он или супердекоративный;</li>

68 <li>размер выносных элементов;</li>

69 <li>длину строки.</li>

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

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

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

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

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

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

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

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

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

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

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

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

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

83 <ul><li>Между числом и единицей измерения, символом валюты, знаком процента (20 кг, 15 см, 100 £, 4%).</li>

84 <li>Между сокращениями (респ. Коми, и т. д.).</li>

85 <li>В датах и времени (12 июля, 6 часов).</li>

86 <li>Между именем и фамилией.</li>

87 <li>Между топонимами, которые состоят из двух или трёх слов.</li>

88 <li>Между предлогом и словом - так избегают появления "висячих" предлогов.</li>

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

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

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

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

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

94 </ul><ul><li>Из просмотра и анализа работ других, сбора самой разной информации мы формируем свой эстетический фильтр - насмотренность.</li>

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

96 <ul><li>Активно анализируйте то, что вы видите. Какие формы, цвета, шрифты привлекают ваше внимание? Как они взаимодействуют между собой? Что в этих работах вызывает эмоции и как использовать это в собственном дизайне? Задавайте эти вопросы, чтобы развивать эстетическое чутьё и сознательно применять его в своих работах.</li>

97 </ul><a>Курс с трудоустройством: "Профессия Графический дизайнер PRO" Узнать больше</a>