SlideShare a Scribd company logo
1 of 92
Типографика
Роман Мусаткин
contact@ppilot.ru
1
&
Работа с набором Работа с версткой
2
Набор
Типографика
3
Шрифт
Цвет
Начертание
Кегль (размер)
Кернинг (межбуквенное расстояние)
Интерлиньяж (межстрочное расстояние)
4
5
Ровные линии
6
Ровные линии
Паттерны
7
Ровные линии Равное распределение
Паттерны
8
Шрифт
Набор
9
Serif Sans Slab-serif
10
Monotype
11
Чтение
Набор
12
Serif Sans
vs.
13
Times New Roman
14
Myriad Pro..и
15
Myriad Pro
16
..и Times New Roman
17
бананы
бананы
кокосы
кокосы
18
Начертание
Чтение
19
20
Но никогда не underlined
21
22
italic != oblique
23
Цвет
Начертание
24
25
Кегль
Начертание
26
Единообразие
27
Адаптивность
28
Структура
29
30
Детали
Начертание
31
Small capitals
32
Минускульный набор
33
Черточки
34
Кавычки
35
Пробелы
А. С. Пушкин
А. С. Пушкин
400 м
400 м
1 298 300
1 298 300
36
И прочее
37
38
Кернинг
39
40
http://type.method.ac/
41
Интерлиньяж
42
Интерлиньяж
43
Интерлиньяж
кегль: 16pt
44
Интерлиньяж
кегль: 16pt
высота строки: 22pt
45
Параграфы
46
Параграфы
высота строки: 22px
47
Параграфы
абзац: 11px
высота строки: 22px
48
#hint 1
Разработчики ничего не знают о
кернинге, межстрочном и межбуквенном
расстоянии
49
Ссылки
Детали
50
Link Link Link Not link
Not link
Not link
51
Link Link Link Not link
Not link
Not link
но и тут есть исключения
52
Ссылки должны быть
подчеркнутыми
«
»
53
54
Ссылки должны быть
различимыми
55
56
Верстка
Типографика
Композиция
Расстрояние между объектами
Навигация (различимость)
Whitespace
Ритм
Управление вниманием
57
Композиция
Текст
58
59
50-70 символов
60
и снова не без исключений
50-70 символов
61
Физические ограничения
62
Приоритет в структурировании
63
50-140 символов
64
Whitespace
65
Sample lines
of text
text
space whitespace
66
Висячая пунктуация
67
и центрирование
68
69
Good
70
и строки
71
и параграфы
72
Внимание
Текст
73
74
75
но если страница нам знакома
76
77
Более сложные примеры
78
Погрешности сглаживания
79
80
81
Ритм
Текст
82
83
Общий ритм
(оффтоп)
84
85
Почитать
86
http://smashed.by
87
http://ia.net/
88
89
90
Слайд номер 90
91
Спасибо за внимание!
Роман Мусаткин
contact@ppilot.ru
@hashtag_design

More Related Content

Viewers also liked

Fees structure mahatma gandhi university sd admission solution
Fees structure mahatma gandhi university sd admission solutionFees structure mahatma gandhi university sd admission solution
Fees structure mahatma gandhi university sd admission solutionSD Admission Solution
 
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurances
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurancesEtude PwC 2013 sur les fusions-acquisitions dans le secteur des assurances
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurancesPwC France
 
blurring the lines with technoglogy
blurring the lines with technoglogyblurring the lines with technoglogy
blurring the lines with technoglogyJenny Williams
 

Viewers also liked (6)

Fees structure mahatma gandhi university sd admission solution
Fees structure mahatma gandhi university sd admission solutionFees structure mahatma gandhi university sd admission solution
Fees structure mahatma gandhi university sd admission solution
 
Olivera Z Mijuskovic - biography
Olivera Z Mijuskovic - biographyOlivera Z Mijuskovic - biography
Olivera Z Mijuskovic - biography
 
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurances
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurancesEtude PwC 2013 sur les fusions-acquisitions dans le secteur des assurances
Etude PwC 2013 sur les fusions-acquisitions dans le secteur des assurances
 
Knight Templar Gown
Knight Templar Gown Knight Templar Gown
Knight Templar Gown
 
blurring the lines with technoglogy
blurring the lines with technoglogyblurring the lines with technoglogy
blurring the lines with technoglogy
 
Unit 8: Heroes
Unit 8: HeroesUnit 8: Heroes
Unit 8: Heroes
 

Typography (Russian)