Вы находитесь на странице: 1из 159

Сементий Лобач

дизайнер,
преподаватель

ОСНОВЫ
ТИПОГРАФИКИ
ЗАНЯТИЕ 1

ИСТОРИЯ
ШРИФТА

Занятие 1 История шрифта


Занятие 1 История шрифта
Занятие 1 История шрифта
Занятие 1 История шрифта
Занятие 1 История шрифта
Занятие 1 История шрифта
Занятие 1 История шрифта
АПЕРТУРА

Занятие 1 История шрифта


Занятие 1 История шрифта
ОТТИСК

Занятие 1 История шрифта


Занятие 1 История шрифта
Занятие 1 История шрифта
ИТОГИ

• помните о том, что шрифт ― это


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

Занятие 1 История шрифта


ЗАНЯТИЕ 2

СОВРЕМЕННАЯ
БУКВА

Занятие 2 Современная буква


Занятие 2 Современная буква
Занятие 2 Современная буква
Занятие 2 Современная буква
Занятие 2 Современная буква
Занятие 2 Современная буква
Занятие 2 Современная буква
Занятие 2 Современная буква
КЕГЛЬ

Занятие 2 Современная буква


ЗАСЕЧКИ НА БУМАГЕ И НА ЭКРАНАХ

Занятие 2 Современная буква


ЗАСЕЧКИ НА БУМАГЕ И НА ЭКРАНАХ

Занятие 2 Современная буква


ИТОГИ
• пользуйтесь терминологией и называйте
вещи своими именами
• помните о правильном кегле
и характере буквы
• используйте серифы для книг
и журналов
• подбирайте рубленые шрифты
для сайтов и приложений

Занятие 2 Современная буква


ЗАНЯТИЕ 3

ТИПЫ
ШРИФТОВ

Занятие 3 Типы шрифтов


НЕКОТОРЫЕ ТИПЫ ШРИФТОВ

Занятие 3 Типы шрифтов


КАНОНИЧНАЯ АНТИКВА

Занятие 3 Типы шрифтов


НЕКОТОРЫЕ ТИПЫ ШРИФТОВ

Занятие 3 Типы шрифтов


ПЕРЕХОДНАЯ АНТИКВА

Занятие 3 Типы шрифтов


РАННИЕ ГРОТЕСКИ

Занятие 3 Типы шрифтов


КОНСТРУКТИВЫ

Занятие 3 Типы шрифтов


СТАТИЧЕСКИЕ ГРОТЕСКИ

Занятие 3 Типы шрифтов


ГУМАНИСТИЧЕСКИЕ ГРОТЕСКИ

Занятие 3 Типы шрифтов


ЗАНЯТИЕ 4

ТИПЫ
ШРИФТОВ

Занятие 4 Типы шрифтов


БРУСКОВЫЕ

Занятие 4 Типы шрифтов


ТИПЫ ШРИФТОВ

Занятие 4 Типы шрифтов


АКЦИДЕНТНЫЕ

Занятие 4 Типы шрифтов


АКЦИДЕНТНЫЕ
Занятие 4 Типы шрифтов
АКЦИДЕНТНЫЕ

Занятие 4 Типы шрифтов


АКЦИДЕНТНЫЕ

Занятие 4 Типы шрифтов


АКЦИДЕНТНЫЕ

Занятие 4 Типы шрифтов


ПРИМЕР
С ЕЛЕНОЙ

Занятие 4 Типы шрифтов


ИТОГИ
• относитесь внимательно к типу
шрифта и его назначению
• осторожнее с акцидентными
шрифтами!
• благородный шрифт ― благородный
макет
• секрет хорошего восприятия ―
в простоте и пропорциях букв

Занятие 4 Типы шрифтов


ЗАНЯТИЕ 5

СТРОКА

Занятие 5 Строка
Занятие 5 Строка
Занятие 5 Строка
Занятие 5 Строка
СТАТИКА И ДИНАМИКА

Занятие 5 Строка
СТАТИКА И ДИНАМИКА

Занятие 5 Строка
СТАТИКА И ДИНАМИКА

Занятие 5 Строка
СТАТИКА И ДИНАМИКА

Занятие 5 Строка
Занятие 5 Строка
Занятие 5 Строка
ИТОГИ

• будьте аккуратны со строками


• заботьтесь о читаемости
• не злоупотребляйте прописными
буквами

Занятие 5 Строка
ЗАНЯТИЕ 6

БЛОКИ
ТЕКСТА

Занятие 6 Блоки текста


КАРТИНКА
И ТЕКСТ ―
ЭЛЕМЕНТ
СТИЛЯ

Занятие 6 Блоки текста


ТЕКСТ ―
ИНФОРМАЦИЯ,
И ТОЛЬКО

Занятие 6 Блоки текста


ЗАДАЧИ ТЕКСТА
• понимание
• уточнение
• полная информация

Занятие 6 Блоки текста


Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
Занятие 6 Блоки текста
ТЕКСТ В
ЖИЗНИ

ПЕЧАТЬ
• конечность контента
• свобода действий

Занятие 6 Блоки текста


ТЕКСТ В
ЖИЗНИ

ВЕБ
• неясность объема
• куча ограничений

Занятие 6 Блоки текста


Занятие 6 Блоки текста
ИТОГИ

• помните о назначении каждого


текстового блока
• не грузите пользователя большими
текстами или делайте их
интереснее
• всегда помните о примере
с пивом

Занятие 6 Блоки текста


ЗАНЯТИЕ 7

АБЗАЦ

Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
ВЫКЛЮЧКА

Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
Занятие 7 Абзац
ИТОГИ

• в вебе пользуйтесь только выключкой


влево, в книге ― по формату
• на экране не пользуйтесь красными
строками
• делайте правильную отбивку абзацев и
сочетайте ее с модульной сеткой

Занятие 7 Абзац
ЗАНЯТИЕ 8

ПРОПИСНЫЕ
БУКВЫ, КАПИТЕЛЬ
И МАЛАЯ
КАПИТЕЛЬ

Занятие 8 Прописные буквы, капитель и малая капитель


Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
Занятие 8 Прописные буквы, капитель и малая капитель
ИТОГИ

• если уже капитель ― то дорогой


шрифт
• малая капитель грозит ошибками
• только курсив и никакого наклона!

Занятие 8 Прописные буквы, капитель и малая капитель


ЗАНЯТИЕ 9

ХОРОШИЙ
ТОН В РАБОТЕ
С ТЕКСТОМ
Занятие 9 Хороший тон в работе с текстом
ВЫРАВНИВАЕТЕ ПО ЛЕВОМУ КРАЮ

Занятие 9 Хороший тон в работе с текстом


Занятие 9 Хороший тон в работе с текстом
Занятие 9 Хороший тон в работе с текстом
Занятие 9 Хороший тон в работе с текстом
Занятие 9 Хороший тон в работе с текстом
Занятие 9 Хороший тон в работе с текстом
Занятие 9 Хороший тон в работе с текстом
ОГРАНИЧЕНИЯ И НОРМЫ

Занятие 9 Хороший тон в работе с текстом


ХОРОШИЙ ТОН

Занятие 9 Хороший тон в работе с текстом


Занятие 9 Хороший тон в работе с текстом
ХОРОШИЙ ТОН

Занятие 9 Хороший тон в работе с текстом


СОЧЕТАНИЕ
НА КЛАВИАТУРЕ:
― Alt+0151
– Alt+0150
Занятие 9 Хороший тон в работе с текстом
ХОРОШИЙ ТОН

Занятие 9 Хороший тон в работе с текстом


Занятие 9 Хороший тон в работе с текстом
СОЧЕТАНИЕ
НА КЛАВИАТУРЕ:
« ALT+0171
» ALT+0187
Занятие 9 Хороший тон в работе с текстом
ХОРОШИЙ ТОН
Занятие 9 Хороший тон в работе с текстом
СОЧЕТАНИЕ
НА КЛАВИАТУРЕ:
© ALT+0169

Занятие 9 Хороший тон в работе с текстом


ИТОГИ

• чувствуйте интонацию текста и


поддерживайте ее
• пользуйтесь экранной
типографикой
• изучайте правильную пунктуацию

Занятие 9 Хороший тон в работе с текстом


ЗАНЯТИЕ 10

ПОДБОР
ШРИФТОВ
Это поэзия, а не занятие

Занятие 10 Подбор шрифтов


Занятие 10 Подбор шрифтов
Занятие 10 Подбор шрифтов
Занятие 10 Подбор шрифтов
ПРИЗНАКИ
СООТВЕТСТВИЯ
1. Одинаковая удобочитаемость
2. География шрифта
3. Строение шрифта

Занятие 10 Подбор шрифтов


СТРОЕНИЕ
ШРИФТА

Занятие 10 Подбор шрифтов


ГЕОГРАФИЯ
ШРИФТА

Занятие 10 Подбор шрифтов


КОНТРАСТ

Занятие 10 Подбор шрифтов


Занятие 10 Подбор шрифтов
ИТОГИ

• добивайтесь грамотного сочетания


цветов
• проверяйте сайт с разных браузеров
• обязательно дайте введение в текст
• добавляйте примечания

Занятие 10 Подбор шрифтов


ГДЕ ЧИТАТЬ

1. А. Королькова «Живая типографика»


2. Ян Чихольд «Облик книги»
3. Р. Брингхерст «Основы стиля
в типографике»

Занятие 9 Основы типографики


РИМСКАЯ
АНТИКВА

Занятие 3 Типы шрифтов


НОВАЯ
АНТИКВА

Занятие 3 Типы шрифтов


КНИГИ

Ян Чихольд "Облик книги" Эмиль Рудер "Типографика"

Занятие 3 Типы шрифтов


o c

Занятие 5 Строка
БУКВИЦЫ

Занятие 7 Абзац
МAC

PC

СГЛАЖИВАНИЕ
ШРИФТОВ НА МAC И PC
Занятие 5 Строка
ARIAL

HELVETICA

Arial vs Helvetica

Занятие 5 Строка
SMASHING
MAGAZINE

Занятие 5 Строка
СИМВОЛ ДЛЯ
ОБОЗНАЧЕНИЯ
ОКОНЧАНИЯ
АБЗАЦА

Занятие 7 Абзац
ИСПОЛЬЗОВАНИЕ
КРАСНОЙ СТРОКИ
• обзацный отступ равен 3-4 символам
• обязательное использование выключки
по формату

Занятие 7 Абзац
Красная строка ― отдельная строка,

расположенная точно по центральной оси

формата набора.

Ранее красной строкой называли первую

строку абзаца.

Например:
между строчками 18pt, а между абзацами
9pt

Занятие 7 Абзац
TYPESETTER.JS

Занятие 5 Строка
Занятие 6 Блоки текста