Теория Дизайна_типографика

1.

в диз
айне
типографика
это искусство оформления текста, которое 

основано на работе со шрифтами и распределении 

текста и других элементов в макете (или версткой)
типографика влияет на читабельность и восприятие текста, 

управляя вниманием читателя.

2.

Molodo-font
Regular
110 pt
/font
Шрифт
буквы и символы, объединенные едиными
пропорциями и стилем

3.

Molodo-font
Regular
110 pt
/font size
Кегль
единица измерения высоты шрифта
измеряемый в пунктах

4.

по левому
краю
по
центру
по правому
краю
по
ширине
Как ходить на все
Как ходить на все
Как ходить на все
Как
пары (мне кажется
пары (мне кажется
пары (мне кажется
пары (мне кажется
это бесцельным,
привыкла
прогуливать 

и сдавать долги)
это бесцельным,
привыкла
прогуливать 

и сдавать долги)
это бесцельным,
привыкла
прогуливать 

и сдавать долги)
/alignment
Выключка
или выравнивание текста по ширине
текстового блока
ходить
это
долги)
все
бесцельным,
привыкла
вать
на
и
прогулисдавать

5.

Как ходить на все пары (мне кажется
это бесцельным, привыкла прогуливать 

и сдавать долги)
/interligne
интерлиньяж
расстояние между строками текста 

по вертикали (обычно выставляется 

на 15–25% больше размера текста)

6.

alt + </>
Кер нинг
/kerning
Кернинг
расстояние между отдельными символами 

в зависимости от их формы

7.

Трекинг
/tracking
Трекинг
увеличивая или уменьшая трекинг, можно
регулировать интервал сразу между всеми
символами.

8.

/font style
Начертание
разделяют по наклону и толщине. 

Один шрифт может включать в себя прямые
начертания и наклонные

9.

Прямые
начертания
являются основными. 


Такие шрифты используются чаще, поэтому они есть практически 

во всех шрифтовых гарнитурах.

10.

Наклонные 

или курсивные
(italics)
шрифты, знаки в которых расположены под наклоном относительно 

прямых начертаний. Такие шрифты можно использовать для выделения 

текста или для оформления заголовков и цитат. Как правило, курсив 

создают в пару к прямым начертаниям.

11.

Группы начертаний:
тонкие:
нормальные:
полужирные 

и жирные:
Thin
ExtraLight
Light
Regular
Normal
Medium
SemiBold
Bold
ExtraBold
Black
ExtraBlack

12.

Классификация 

шрифтов

13.

/serif
Антиква
характеризуется наличием засечек 

на концах буквенных элементов

14.

/sans serif
Гротеск
группа шрифтов без засечек. 

Универсальные шрифты, функциональные
и чаще спокойные по характеру

15.

/display
Акцидентные
иногда называют заголовочными, т.к. 

ими оформляют заголовки или выделяют
броские надписи

16.

script typeface
personal font
/script
Рукописные
имитирует письмо от руки 

и персонализирует текст

17.

/slab serif
БрусковыЕ
шрифты с брутальными,
мощными засечками

18.

Как определить 

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


Любой шрифт может быть подходящий, 

если правильно его применять

19.

Как определить 

хороший шрифт
2
Плохих шрифтов не бывает, 

есть некачественные. 

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

20.

Как подбирать 

шрифт
1
Внимательно изучите характер шрифта, 

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

21.

Как подбирать 

шрифт
2
Тестируйте!
Некоторые шрифтовые студии предоставляют

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

22.

/интерльяж
Интерлиньяж должен компенсировать высоту 

“
лайфхаки
строчных букв + обеспечить “воздух” между строками 

для комфортного чтения
“
1
2
Базовые пропорции:
Основной текст: 1.5 – 1.75
Заголовки: 1.1 – 1.4
Интерльяж = 150% – 175% от размера шрифта
Пример: если размер шрифта 16px, 

то интерльяж должен быть 24px – 28px (1.5 – 1.75)

23.

лайфхаки
/выбор кегля
Универсальное золотое правило 

(для большинства форматов):
Заголовок : Подзаголовок : Основной текст 

= 2.5 : 1.5 : 1
Пример:
Основной текст: 16px
Подзаголовок: 16 × 1.5 = 24px
Заголовок: 16 × 2.5 = 40px

24.

полезный

сервис
typescale.com
автоматически
рассчитывает пары 

font-size + line-height
задание 

там

25.

Задание
А4

RGB

72 dpi
Задача: создать постер используя

только текст, эффекты и простые

геометрические формы
В работе используйте свои знания в области
типографики, композиции и работы с цветом
рефы
тут