SlideShare a Scribd company logo
Основные понятия типографики
для веб–дизайнера
Часть 1-я: восприятие шрифта
skillupdesign.ru | Herman K. Tishkin
Восприятие (часть 1-я)
 Кегль
 Строчные, прописные, капитель,
моноширинный шрифт;
 Апрош, трекинг, интерлиньяж, кернинг;
 Курсив (italic), толщина (weight);
 Гарнитура;
 Антиква (serif), рубленный (sans-serif),
гротеск;
 Контраст;
 Дефис, минус, короткое и длинное тире;
 Кавычки.
Композиция (часть 2-я)
 Сетка;
 Ритмическая структура;
 Внешние и внутренние поля;
 Длина строки;
 Правила переноса;
 Висячие строки и предлоги.
Основные направления
skillupdesign.ru | Herman K. Tishkin
Восприятие > Кегль
Кегль (point size) — по сути это размер шрифта в рамках кегельной площадки.
В компьютерном наборе она приблизительно равна сумме высот строчных букв, верхних и
нижних выносных элементов. А высота строчных составляет в среднем половину высоты
кегельной площадки.
Кегль измеряется в пунктах.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Строчные, прописные, капитель, моноширинный шрифт
1. Строчные (lowercase) — в просторечии «маленькие» буквы, принятые для набора
сплошного текста;
2. Прописные / заглавные (uppercase) — в просторечии «большие» буквы, они выше
строчных и отличаются от них по рисунку;
3. Капитель (small caps) — буквы чуть выше строчных, но с рисунком прописных (в
качестве капители нельзя использовать прописные меньшего кегля, т.к. они
заметно отличаются по насыщенности, контрасту и ширине);
4. Моноширинный шрифт (monospaced face) — шрифт, у которого все кегельные
площадки одной ширины. Разрабатывались для пишущих машинок. В
графдизайне используется для создания определённой стилистики.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Апрош, трекинг, интерлиньяж, кернинг
1. Апро́ш (letterspace) — расстояние между соседними буквами
или другими шрифтовыми знаками. Апрош составляется
из 2-х полуапрошей соседних букв;
2. Трекинг (tracking) — процесс глобального изменения межбуквенных интервалов в
куске текста называют трекингом. Положительный трекинг называется разрядкой.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Апрош, трекинг, кернинг, интерлиньяж
3. Кернинг (letterspace) — избирательное изменение интервала
между буквами в зависимости от их формы;
4. Интерлиньяж (leading) — расстояние между базовыми линиями соседних строк.
Базовый интерлиньяж равен кеглю, т.е. расстояние между базовыми линиями при таком
интерлиньяже равно кегельной площадке. Интерлиньяж определяют, исходя из кегля
шрифта, длины строки и сетки страницы.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Курсив, насыщенность и контраст шрифта
1. Курсив (italic) — рисунок шрифта как правило наклонный вправо, более близкий к
рукописному. Одно из главных средств выделения в тексте. Не следует путать с
наклонным начертанием шрифта, в котором не меняется рисунок знаков.
2. Насыщенность шрифта (weight) — отношение толщины основного шрифта к высоте
буквы.
Изменения этого отношения образуют сверхсветлое (Ultra Light, Extra Light,
Thin), Светлое (Light), нормальное (Book, Regular, Roman), Полужирное
(Medium Demi Bold, Semibold), Жирное (Bold, Heavy), сверхжирное (Extra Bold,
Black, Ultra Bold) начертания.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Курсив, насыщенность и контраст шрифта
3. Контраст шрифта (contrast) — соотношение толщин основного и соединительного
штрихов.
По контрасту шрифт может быть:
a) неконтрастным (monoweight) — если основные и соединительные штрихи
визуально одинаковые;
b) малоконтрастным (low contrast) — если соотношение толщины основных и
соединительных штрихов меньше чем 2:1;
c) контрастным (contrast) — если соотношение больше;
d) сверхконтрастным (high contrast) — если соединительные штрихи в шрифте
ощутимо толще основных, это явление называют обратным контрастом, а шрифт
— итальянским.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Антиква, рубленый (гротеск) шрифт
1. Анти́ква (serif) — контрастный шрифт с засечками.
2. Гроте́ск, ру́бленый шрифт (sans–serif) — шрифт без засечек,
как правило, неконтрастный.
skillupdesign.ru | Herman K. Tishkin
Восприятие > Дефис, минус, короткое и длинное тире
1. Дефис (hyphen) — короткая горизонтальная чёрточка. Служит для связи частей слов
(кто-либо), для присоединения префиксов (во-первых, по-русски), в качестве знака
сокращения (физ-ра, г-ца), а также в качестве знака переноса.
Дефис ничем не отбивается от соседних знаков.
2. Короткое тире (en-dash) — можно поставить между цифрами, например: 20–50.
Оно не отбивается от предыдущего и последующего знака.
Комбинация клавиш: Alt+0151 (в Windows) и Alt+Shift+hyphen (в Mac OS).
3. Длинное тире (em-dash) — это и есть настоящее тире, к которому мы привыкли.
Вместо него обычно набирают дефис с пробелами вокруг.
Комбинация клавиш: Alt+0150
(в Windows) и Alt+hyphen (в Mac OS).
skillupdesign.ru | Herman K. Tishkin
Восприятие > Кавычки
Кавычки (quotes) — в первую очередь следует запомнить, что вот это «"» не кавычки, а
диагональ, например: 17 ". В кириллице принято использовать:
a. «ёлочки», которые набираются так:
 Alt+0171 для « (в Windows)
 Alt+0187 для » (в Windows)
 Alt+: и Shift+Alt+: для « (в латинице на Маке)
 Alt+= и Shift+Alt+= для » (в кириллице на Маке)
b. „лапки“ набираются так:
 Alt+0132 для „ (в Windows)
 Alt+0147 для “ (в Windows)
 Shift+Alt+W и Shift+Alt+/ для „ (в латинице на Маке)
 Alt+[ и Alt+/ для “ (в кириллице на Маке) skillupdesign.ru | Herman K. Tishkin
Используемые источники:
 Википедия;
 «Живая типографика» Александры Корольковой;
 Советы из Ководства Артемия Лебедева.
skillupdesign.ru | Herman K. Tishkin
Спасибо за внимание!
Herman K. Tishkin
+7 (916) 160–45–45
gershmit@gmail.com
http://skillupdesign.ru

More Related Content

Viewers also liked

Как разработать позиционирование
Как разработать позиционированиеКак разработать позиционирование
Как разработать позиционирование
ConcertWith.me
 
Package design for seeds
Package design for seedsPackage design for seeds
Package design for seedsLera Bazankova
 
Визуальные коммуникации. Часть 2
Визуальные коммуникации. Часть 2Визуальные коммуникации. Часть 2
Визуальные коммуникации. Часть 2
SHISHKI
 
Что такое бренд и как его позиционировать
Что такое бренд и как его позиционироватьЧто такое бренд и как его позиционировать
Что такое бренд и как его позиционировать
Екатерина Мартынычева
 
Silkina marina системы навигации в архитектурной среде
Silkina marina системы навигации в архитектурной средеSilkina marina системы навигации в архитектурной среде
Silkina marina системы навигации в архитектурной средеAndrey Karmatsky
 
Визуальные коммуникации
Визуальные коммуникацииВизуальные коммуникации
Визуальные коммуникации
STARTUP WOMEN
 
Шрифты. Происхождение видов
Шрифты. Происхождение видовШрифты. Происхождение видов
Шрифты. Происхождение видов
BBDO Group
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайне
Ekaterina Andreeva
 
Z&G. Упаковка
Z&G. Упаковка Z&G. Упаковка
Z&G. Упаковка
Z&G. Branding
 
Презентация про презентации в версии PowerPoint
Презентация про презентации в версии PowerPointПрезентация про презентации в версии PowerPoint
Презентация про презентации в версии PowerPoint
Alex Novichkov
 
Что такое дизайн-мышление?
Что такое дизайн-мышление?Что такое дизайн-мышление?
Что такое дизайн-мышление?
Wonderfull
 
практика дизайн мышления
практика дизайн мышленияпрактика дизайн мышления
практика дизайн мышления
Katya Labinskaya
 
2016 FMCG Trends and the Channel Revolution
2016 FMCG Trends and the Channel Revolution2016 FMCG Trends and the Channel Revolution
2016 FMCG Trends and the Channel Revolution
Hamutal Schieber
 
Визуальные коммуникации. Часть 1
Визуальные коммуникации. Часть 1Визуальные коммуникации. Часть 1
Визуальные коммуникации. Часть 1
SHISHKI
 
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / RussianДизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Wonderfull
 
САМАЯ ЛУЧШАЯ ПРЕЗА
САМАЯ ЛУЧШАЯ ПРЕЗАСАМАЯ ЛУЧШАЯ ПРЕЗА
САМАЯ ЛУЧШАЯ ПРЕЗА
Vasily Bogdanov
 
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
UX STRAT
 

Viewers also liked (17)

Как разработать позиционирование
Как разработать позиционированиеКак разработать позиционирование
Как разработать позиционирование
 
Package design for seeds
Package design for seedsPackage design for seeds
Package design for seeds
 
Визуальные коммуникации. Часть 2
Визуальные коммуникации. Часть 2Визуальные коммуникации. Часть 2
Визуальные коммуникации. Часть 2
 
Что такое бренд и как его позиционировать
Что такое бренд и как его позиционироватьЧто такое бренд и как его позиционировать
Что такое бренд и как его позиционировать
 
Silkina marina системы навигации в архитектурной среде
Silkina marina системы навигации в архитектурной средеSilkina marina системы навигации в архитектурной среде
Silkina marina системы навигации в архитектурной среде
 
Визуальные коммуникации
Визуальные коммуникацииВизуальные коммуникации
Визуальные коммуникации
 
Шрифты. Происхождение видов
Шрифты. Происхождение видовШрифты. Происхождение видов
Шрифты. Происхождение видов
 
Композиция в веб-дизайне
Композиция в веб-дизайнеКомпозиция в веб-дизайне
Композиция в веб-дизайне
 
Z&G. Упаковка
Z&G. Упаковка Z&G. Упаковка
Z&G. Упаковка
 
Презентация про презентации в версии PowerPoint
Презентация про презентации в версии PowerPointПрезентация про презентации в версии PowerPoint
Презентация про презентации в версии PowerPoint
 
Что такое дизайн-мышление?
Что такое дизайн-мышление?Что такое дизайн-мышление?
Что такое дизайн-мышление?
 
практика дизайн мышления
практика дизайн мышленияпрактика дизайн мышления
практика дизайн мышления
 
2016 FMCG Trends and the Channel Revolution
2016 FMCG Trends and the Channel Revolution2016 FMCG Trends and the Channel Revolution
2016 FMCG Trends and the Channel Revolution
 
Визуальные коммуникации. Часть 1
Визуальные коммуникации. Часть 1Визуальные коммуникации. Часть 1
Визуальные коммуникации. Часть 1
 
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / RussianДизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
Дизайн-мышление. Гайд по процессу / Design Thinking Guide / Russian
 
САМАЯ ЛУЧШАЯ ПРЕЗА
САМАЯ ЛУЧШАЯ ПРЕЗАСАМАЯ ЛУЧШАЯ ПРЕЗА
САМАЯ ЛУЧШАЯ ПРЕЗА
 
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
UX STRAT USA: Beverly May, "Moving Your Team From Good To Great UX"
 

Основные понятия типографики для веб–дизайнера (Часть 1-я)

  • 1. Основные понятия типографики для веб–дизайнера Часть 1-я: восприятие шрифта skillupdesign.ru | Herman K. Tishkin
  • 2. Восприятие (часть 1-я)  Кегль  Строчные, прописные, капитель, моноширинный шрифт;  Апрош, трекинг, интерлиньяж, кернинг;  Курсив (italic), толщина (weight);  Гарнитура;  Антиква (serif), рубленный (sans-serif), гротеск;  Контраст;  Дефис, минус, короткое и длинное тире;  Кавычки. Композиция (часть 2-я)  Сетка;  Ритмическая структура;  Внешние и внутренние поля;  Длина строки;  Правила переноса;  Висячие строки и предлоги. Основные направления skillupdesign.ru | Herman K. Tishkin
  • 3. Восприятие > Кегль Кегль (point size) — по сути это размер шрифта в рамках кегельной площадки. В компьютерном наборе она приблизительно равна сумме высот строчных букв, верхних и нижних выносных элементов. А высота строчных составляет в среднем половину высоты кегельной площадки. Кегль измеряется в пунктах. skillupdesign.ru | Herman K. Tishkin
  • 4. Восприятие > Строчные, прописные, капитель, моноширинный шрифт 1. Строчные (lowercase) — в просторечии «маленькие» буквы, принятые для набора сплошного текста; 2. Прописные / заглавные (uppercase) — в просторечии «большие» буквы, они выше строчных и отличаются от них по рисунку; 3. Капитель (small caps) — буквы чуть выше строчных, но с рисунком прописных (в качестве капители нельзя использовать прописные меньшего кегля, т.к. они заметно отличаются по насыщенности, контрасту и ширине); 4. Моноширинный шрифт (monospaced face) — шрифт, у которого все кегельные площадки одной ширины. Разрабатывались для пишущих машинок. В графдизайне используется для создания определённой стилистики. skillupdesign.ru | Herman K. Tishkin
  • 5. Восприятие > Апрош, трекинг, интерлиньяж, кернинг 1. Апро́ш (letterspace) — расстояние между соседними буквами или другими шрифтовыми знаками. Апрош составляется из 2-х полуапрошей соседних букв; 2. Трекинг (tracking) — процесс глобального изменения межбуквенных интервалов в куске текста называют трекингом. Положительный трекинг называется разрядкой. skillupdesign.ru | Herman K. Tishkin
  • 6. Восприятие > Апрош, трекинг, кернинг, интерлиньяж 3. Кернинг (letterspace) — избирательное изменение интервала между буквами в зависимости от их формы; 4. Интерлиньяж (leading) — расстояние между базовыми линиями соседних строк. Базовый интерлиньяж равен кеглю, т.е. расстояние между базовыми линиями при таком интерлиньяже равно кегельной площадке. Интерлиньяж определяют, исходя из кегля шрифта, длины строки и сетки страницы. skillupdesign.ru | Herman K. Tishkin
  • 7. Восприятие > Курсив, насыщенность и контраст шрифта 1. Курсив (italic) — рисунок шрифта как правило наклонный вправо, более близкий к рукописному. Одно из главных средств выделения в тексте. Не следует путать с наклонным начертанием шрифта, в котором не меняется рисунок знаков. 2. Насыщенность шрифта (weight) — отношение толщины основного шрифта к высоте буквы. Изменения этого отношения образуют сверхсветлое (Ultra Light, Extra Light, Thin), Светлое (Light), нормальное (Book, Regular, Roman), Полужирное (Medium Demi Bold, Semibold), Жирное (Bold, Heavy), сверхжирное (Extra Bold, Black, Ultra Bold) начертания. skillupdesign.ru | Herman K. Tishkin
  • 8. Восприятие > Курсив, насыщенность и контраст шрифта 3. Контраст шрифта (contrast) — соотношение толщин основного и соединительного штрихов. По контрасту шрифт может быть: a) неконтрастным (monoweight) — если основные и соединительные штрихи визуально одинаковые; b) малоконтрастным (low contrast) — если соотношение толщины основных и соединительных штрихов меньше чем 2:1; c) контрастным (contrast) — если соотношение больше; d) сверхконтрастным (high contrast) — если соединительные штрихи в шрифте ощутимо толще основных, это явление называют обратным контрастом, а шрифт — итальянским. skillupdesign.ru | Herman K. Tishkin
  • 9. Восприятие > Антиква, рубленый (гротеск) шрифт 1. Анти́ква (serif) — контрастный шрифт с засечками. 2. Гроте́ск, ру́бленый шрифт (sans–serif) — шрифт без засечек, как правило, неконтрастный. skillupdesign.ru | Herman K. Tishkin
  • 10. Восприятие > Дефис, минус, короткое и длинное тире 1. Дефис (hyphen) — короткая горизонтальная чёрточка. Служит для связи частей слов (кто-либо), для присоединения префиксов (во-первых, по-русски), в качестве знака сокращения (физ-ра, г-ца), а также в качестве знака переноса. Дефис ничем не отбивается от соседних знаков. 2. Короткое тире (en-dash) — можно поставить между цифрами, например: 20–50. Оно не отбивается от предыдущего и последующего знака. Комбинация клавиш: Alt+0151 (в Windows) и Alt+Shift+hyphen (в Mac OS). 3. Длинное тире (em-dash) — это и есть настоящее тире, к которому мы привыкли. Вместо него обычно набирают дефис с пробелами вокруг. Комбинация клавиш: Alt+0150 (в Windows) и Alt+hyphen (в Mac OS). skillupdesign.ru | Herman K. Tishkin
  • 11. Восприятие > Кавычки Кавычки (quotes) — в первую очередь следует запомнить, что вот это «"» не кавычки, а диагональ, например: 17 ". В кириллице принято использовать: a. «ёлочки», которые набираются так:  Alt+0171 для « (в Windows)  Alt+0187 для » (в Windows)  Alt+: и Shift+Alt+: для « (в латинице на Маке)  Alt+= и Shift+Alt+= для » (в кириллице на Маке) b. „лапки“ набираются так:  Alt+0132 для „ (в Windows)  Alt+0147 для “ (в Windows)  Shift+Alt+W и Shift+Alt+/ для „ (в латинице на Маке)  Alt+[ и Alt+/ для “ (в кириллице на Маке) skillupdesign.ru | Herman K. Tishkin
  • 12. Используемые источники:  Википедия;  «Живая типографика» Александры Корольковой;  Советы из Ководства Артемия Лебедева. skillupdesign.ru | Herman K. Tishkin
  • 13. Спасибо за внимание! Herman K. Tishkin +7 (916) 160–45–45 gershmit@gmail.com http://skillupdesign.ru