Презентация для студентов и начинающих дизайнеров.

1. ВВЕДЕНИЕ
В ТИПОГРАФИКУ
Константин Горшков
арт-директор Progressive Media
«Давайте займемся текстом». Часть 1

3. Butterick’s Practical Typography
ТИПОГРАФИКА
ЭТО ВИЗУАЛЬНАЯ
СОСТАВЛЯЮЩАЯ
СЛОВА

4. Шрифты являются
частью типографики,
но типографика выходит
за рамки шрифтов.

5. Типографика помогает сохранить
наиболее ценное для писателя
— внимание читателя.

6. ПРОЧТИ
ЭТОСПАСИБО

7. ХОРОШАЯ
ТИПОГРАФИКА
УСИЛИВАЕТ
СМЫСЛ ТЕКСТА
Для одного и того же текста существует много
решений, которые были бы одинаково хорошими.
Типографика — не математическая задача
с одним правильным ответом.
P.S.

8. ТИПОГРАФИКА
ДЛЯ ЧИТАТЕЛЯ,
А НЕ ДЛЯ
ПИСАТЕЛЯ
ВАЖНО ПОМНИТЬ ОБ ЭТОМ

9. ТИПОГРАФИКА
СУЩЕСТВУЕТ,
В ЧЕСТЬ
СОДЕРЖАНИЯ

10. ТИПОГРАФИКА
КОРОЛЕВА
ДИЗАЙНА

11. ТИПОГРАФИКА
СЕГОДНЯ
Глава 1

12. ВЫВЕСКИ
ПЕЧАТНЫЕ ИЗДАНИЯ
АЙДЕНТИКА
УПАКОВКИ
ЛОГОТИПЫ
КАЛЛИГРАФИЯ
И ЛЕТТЕРИНГ
ПОСТЕРЫ
ВЕБ-ДИЗАЙН

13. НАВИГАЦИЯ
МЕБЕЛЬ
МОУШН ДИЗАЙН
КВИЛЛИНГ
КУЛИНАРИЯ
ИНФОГРАФИКА
ИЛЛЮСТРАЦИЯ
ИНДАСТРИАЛ
УЛИЧНОЕ ИСКУССТВО

14. ТИПОГРАФИКА
ПОВСЮДУ

15. 95%ВЕБ-ДИЗАЙНА
СОСТАВЛЯЕТ
ТИПОГРАФИКА

16. Глава 2
ОСНОВНЫЕ
ТЕРМИНЫ

17. ШРИФТ —
комплект литер, воспроизводящий
какой-либо алфавит, а также цифры, знаки
препинания и другие символы, необходимые
для набора текста на одном или нескольких
языках.
ГАРНИТУРА —
обладающее собственным наименованием
семейство начертаний шрифта, имеющих общие
стилевые особенности и детали рисунка знаков,
но отличающихся друг от друга некоторыми
характеристиками, как например, насыщенностью,
пропорциями и углом наклона знаков.

18. НАЧЕРТАНИЕ —
вариант рисунка наборного шрифта одной
гарнитуры. Начертания шрифта
характеризуются едиными стилевыми
особенностями рисунка, определенными
пропорциями, насыщенностью или наклоном
знаков.
НАСЫЩЕННОСТЬ
ШРИФТА —
одна из характеристик начертания шрифта,
отношение толщины основных штрихов
к высоте прямого знака. Изменения этого
отношения образуют, светлое, нормальное,
полужирное, жирное и другие начертания.

19. ПРОПОРЦИИ
ШРИФТА —
показатель изменения ширины
одноименных знаков в начертаниях
одной гарнитуры от сверхузких
до сверхшироких.
КОНТРАСТНОСТЬ —
отношение ширины и высоты знаков шрифта.
Измеряется, как правило, по внешним контурам
основных штрихов знака «Н». Изменения этого
отношения образуют сверхузкое, узкое, нормальное,
широкое, сверхширокое начертания.

20. КЕГЛЬ —
в цифровом шрифте кегль задается
при верстке с клавиатуры и измеряется
в типографских пунктах. Приблизительно
соответствует росту строчного знака,
плюс величина верхних и нижних
выносных элементов.
КОМПЛЕКТ ЗНАКОВ
ШРИФТА —
определенное количество знаков шрифта
одного начертания, позволяющее набирать
текст на том или ином языке.

21. Глава 3
КЛАССИФИКАЦИЯ
ШРИФТОВ
ОСНОВАНА НА ИСТОРИЧЕСКИХ ХАРАКТЕРИСТИКАХ

22. ШРИФТЫ С ЗАСЕЧКАМИ
(ANITQUA, SERIF)1.
Засечки – обычно перпендикулярный штрих, которым начинается и заканчивается
буква. Будучи придуманными еще во времена римлян в монументальном шрифте,
выгравированном на камне, засечка была естественным способом плавно свести
штрих на нет, заодно придав его окончанию четкость. Отсюда их собирательное
название антиква от лат. antiquus – древний.

23. ГУМАНИСТИЧЕСКАЯ / ВЕНЕЦИАНСКАЯ
АНТИКВА (HUMANIST/VENETIAN)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Гарнитуры очень каллиграфичны;
• Ярко выраженная наклонная ось овала “o”;
• Наклонная перекладина буквы “e”;
• Пропорции знаков довольно широкие;
• Засечки чуть прогнутые;
• Небольшая высота строчных букв;
• Малый контраст между основными
и соединительными штрихами.
Adobe Jenson

24. АНТИКВА СТАРОГО СТИЛЯ, ГАРАЛЬДЫ
(GARALDES)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Гарнитуры менее каллиграфичны;
• Оси овалов стремятся к перпендикуляру;
• Перекладина строчной “e” параллельна линии шрифта;
• Засечки более длинные и острые;
• Символы более пропорциональные;
• Более заметный контраст между основными
и соединительными штрихами.
Adobe Caslon

25. ПЕРЕХОДНАЯ АНТИКВА
(TRANSITIONAL)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Оси овалов вертикальные;
• Сильный контраст между основными и соединительными штрихами;
• Засечки приобретают плавность.
Baskerville old face

26. АНТИКВА НОВОГО СТИЛЯ
(DIDONE / ROMANTICS / MODERN SERIF)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Трудночитаемый визуальный ритм, подходит
для крупных надписей;
• Основные штрихи очень контрастны,
соединительные имеют минимальную толщину;
• Оси овалов вертикальны;
• Засечки длинные и тонкие;
Didot

27. БРУСКОВАЯ АНТИКВА
(STAB SERIF)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Мощные засечки прямоугольной формы
без скруглений;
• Небольшой контраст или полное
отсутствие контраста между основными
и соединительными штрихами
Clarendon

28. РУБЛЕНЫЕ ШРИФТЫ
(SANS SERIF)
Самые ранние буквы без засечек известны еще со времен античной Греции 5 века
до н.э., тем не менее в новое время первые рубленные шрифты были созданы
не для латинского алфавита, а для использования в академических работах XVIII
века по этрусской культуре.
2.

29. СТАРЫЕ ГРОТЕСКИ
(GROTESQUE)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Отличительный признак старых гротесков
заглавная G со “шпорой” на конце;
• Толщина штрихов как правило слегка различна,
но не настолько чтоб оказывать влияние
на каллиграфию или логический узор.

30. НОВЫЕ ГРОТЕСКИ
(NEO GROTESQUE)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Закрытые одноширинные шрифты;
• Почти без контраста, сильно развитые по начертаниям;

31. ГУМАНИСТИЧЕСКИЕ ГРОТЕСКИ
(HUMANIST SANS SERIF)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Высокий контраст штрихов;
• Разношириные с не очень большим очком строчных;
• Строчная “а” и “g” чаще двухчастотная;
• Большинство этих шрифтов имеют настоящие
курсивные начертания. Углы наклона знаков
в курсивах могут быть малые или средние;

32. ГЕОМЕТРИЧЕСКИЕ ГРОТЕСКИ
(GEOMETRIC SANS)
ХАРАКТЕРНЫЕ ЧЕРТЫ:
• Данный тип построен на простейших геометрических
фигурах – окружности, квадрате, треугольнике;
• Отсутствие контраста штрихов;

33. РУКОПИСНЫЕ ШРИФТЫ
(SCRIPT)3.
Шрифты по рисунку имитирующих чей-то почерк или каллиграфический стиль.
Рукописные шрифты делятся в зависимости от пишущего инструмента на шрифты,
имитирующие письмо ширококонечным пером, остроконечным пером, кистью
и другими инструментами. Кроме того, рукописные шрифты могут быть связные
и несвязные.

34. АКЦИДЕНТНЫЕ ШРИФТЫ
(DISPLAY)4.
Шрифты, предназначенные для набора титульных листов, ярлыков, афиш,
плакатов, а также для шрифтовых выделений и т.п.

35. Глава 4
КЛАССИФИКАЦИЯ
ШРИФТОВ
ПО ТИПУ ФОРМООБРАЗОВАНИЯ

36. Александр Тарбеев, дизайнер шрифта, профессор

37. Fedra Sans+Jenson

38. Glypha+Helvetica

39. ДО ТОГО, КАК НАЧАТЬ ДИЗАЙН
ВЫБЕРИ
ШРИФТОВУЮ
ПАРУ

40. ПРЕЖДЕ ЧЕМ ВЫБРАТЬ
ИЗУЧИ
ШРИФТОВЫЕ
СЕМЬИ

41. myfonts.com

42. typekit.com

43. typetester.org

44. typewonder.com

45. ПРЕЖДЕ ЧЕМ ОФОРМЛЯТЬ
ПРОЧИТАЙ
ТЕКСТ

46. Глава 5
АНАТОМИЯ
ШРИФТОВ

47. Оригинал тут + другая версия

48. ФОРМА КОНТРФОРМА

51. ПРИНЦИПЫ ЧИТАБЕЛЬНОСТИ БУКВ
Какой текст
легче прочитать?

52. Очевидно, что вариант А, потому что гораздо проще разобрать
верхние части букв, нежели нижние.
Поэтому менять нижние части букв в дизайне безопаснее
для читабельности, чем верхние.

53. Взглянем еще на один пример, наглядно демонстрирующий
факторы, которые влияют на читабельность:

54. Человек в силу привычки реагирует не на конкретные буквы,
а на формы целых слов. Поэтому в верхнем регистре читать
сложнее.

55. КЕРНИНГ
Изменение расстояния между знаками, входящими в определенные сочетания
(кернинговые пары), например: AV, ТД и пр. Кернинг может быть как положительный,
так и отрицательный. Служит для визуального выравнивания апрошей.

56. КЕРНИНГ
ПЛОХОБУКВЫ РАЗЛЕТЕЛИСЬ

57. КЕРНИНГ
АПРОШ, МЕЖБУКВЕННЫЙ ПРОБЕЛ
Расстояние между соседними буквами
или другими шрифтовыми знаками.
ХОРОШО

58. КЕРНИНГ
НОРМАЛЬНЫЙ РИТМ

59. ПОЛУАПРОШ
Расстояние от крайней боковой точки очка до ближайшей стенки литеры.
Под полуапрошем понимается расстояние от экстремальной точки контура знака
до ближайшего края кегельной площадки. Каждый шрифтовой знак имеет два
полуапроша – левый и правый.

60. ТИПЫ БУКВ
ПРЯМОУГОЛЬНЫЕ
И, М
ОКРУГЛЫЕ
О, Ф
ПОЛУОКРУГЛЫЕ
В, Ю
ПОЛУОТКРЫТЫЕ
Г, Е, С
ОТКРЫТЫЕ
Ж, Т
с вертикальными элементами
с прямыми элементами с одной стороны и закругленными с другой
с одной открытой стороной

61. КАК КЕРНИТЬ ТЕКСТ
Если слово состоит только из букв с вертикальными элементами,
то расстановка с равными расстояниями дает хороший результат:

62. МЕТОД РАССТАНОВКИ ТРОЙКАМИ
1. Выбираем самую сложную кернинговую пару, зазор между буквами которой
будет самым узким. Например, комбинации букв с открытыми формами.
Такая пара кернится первой.

63. МЕТОД РАССТАНОВКИ ТРОЙКАМИ
2. Прибавляем соседнюю букву к выбранной откерненной паре и получаем
тройку букв. Над которой и начинаем работать. Двигая новую букву,
добиваемся равномерности воздуха в этой тройке.

64. МЕТОД РАССТАНОВКИ ТРОЙКАМИ
Дальше сдвигаем тройку на одну букву в сторону и керним следующую букву.

65. МЕТОД РАССТАНОВКИ ТРОЙКАМИ
И таким образом проходим всё слово.

66. МЕТОД РАССТАНОВКИ ТРОЙКАМИ
При наложении заметна разница.

67. ТРЕКИНГ
Пропорциональное изменение всех межбуквенных пробелов в слове, строке,
абзаце или всем тексте при неизменном формате набора. Трекинг может быть
как положительный, так и отрицательный.
По умолчанию По умолчанию
Разряжены
Слиплись
Разряжены
Слиплись
ПРОПИСНЫЕ СТРОЧНЫЕ

68. н и когда н е ра з ря ж а й те
с т р о ч н ы е б у к в ы

69. КЕРНИНГ И ТРЕКИНГ В CREATIVE CLOUD
КЕРНИНГ ТРЕКИНГ
Чтобы изменить кернинг пары, поставьте перед ней курсор
и двигайте букву сочетанием Alt+влево / Alt+вправо

70. НЕ ПУТАЙТЕ

71. type.method.ac

72. ИНТЕРЛИНЬЯЖ
Межстрочный пробел. Расстояние между линиями шрифта соседних
строк. Возможно как положительное, так и отрицательное изменение
интерлиньяжа, которое задается программными средствами.
ИНТЕРЛИНЬЯЖ В СС

73. 15-25
Аа ПИКСЕЛЕЙ
КЕГЛЬ ЭКРАННОГО ТЕКСТА

74. 120–145%
ОТ КЕГЛЯ ШРИФТА
ИНТЕРЛИНЬЯЖ

75. ИНТЕРЛИНЬЯЖ
МАЛО ВОЗДУХА ХОРОШО МНОГО ВОЗДУХА
Кегль: 15 pt
Интерлиньяж: 18 pt

76. ЛИТЕРАТУРА ПО ТИПОГРАФИКЕ
Живая типографика
Александра Королькова
Книга про буквы от Аа до Яя
Юрий Гордон
Основы стиля в типографике
Роберт Брингхерст
Новая типографика.
Руководство
для современного дизайнера
Ян Чихольд
Типографика
Эмиль Рудер
Шрифт в айдентике, рекламе,
многостраничниках, упаковке,
навигации и вебе
Облик книги
Ян Чихольд
Ководство
Артемий Лебедев

77. ПОЛЕЗНЫЕ РЕСУРСЫ
Советы Ильи Бирмана
Леттердей
Советы Артема Горбунова
Журнал [кАк)
Типографика
Typespiration
ilovetypography
Журнал «Шрифт»
Типографика на хабре
ЖЖ Александры Корольковой
ЖЖ Юрия Гордона
Блог Сергея Рассказова
Sayhi
ПараТайп
Уроки по типографике

78. СПАСИБО
ЗА ВНИМАНИЕ
Следующая лекция:
Математика в типографике
Константин Горшков
арт-директор Progressive Media