Смолякова Анастасия
ОСНОВЫ
ТИПОГРАФИКИ
ОСНОВНЫЕ ТЕРМИНЫ
Классификация
Гарнитура
Насыщенность
Кегль
Оплечики
Кернинг
Трекинг
Интерлиньяж
Часть
1
Шрифты без засечек,
или «Гротеск»
Шрифты с засечками,
или «Антиква»
Декоративные
(акцидентные) шрифты
Arial
Garamond
Badaboom
Рукописные
шрифты Milkshake
ГАРНИТУРА
совокупность шрифтов, объединенных общими
стилевыми признаками, отличными от других шрифтов
Gotham Light. For both text and
Gotham Light
Gotham Light Italic
Gotham Book
Gotham Book Italic
Gotham Bold
Gotham Bold Italic
Gotham Light Italic. For both text and
Gotham Book. For both text and
Gotham Book Italic. For both text and
Gotham Bold. For both text and
Gotham Bold Italic. For both text and
определяется изменением толщины основных и
соединительных штрихов одноименных знаков
НАСЫЩЕННОСТЬ
Roboto Thin & Thin Oblique
Roboto Light & Light Oblique
Roboto Regular & Oblique
Roboto Medium & Medium Oblique
Roboto Bold & Bold Oblique
Roboto Black & Black Oblique
Кегль
Кегль - высота символов шрифта.
Определяется расстоянием между верхним и нижним
выносными элементами с учетом оплечиков (заплечиков)
M а r
o s w
Оплечики
КЕГЛЬ
Оплечики (заплечики) - это небольшой зазор над верхним и
под нижним выносными элементами; это понятие досталось
нам в наследство от металлических литер
Кегль
M а r
o s w
Оплечики
ОПЛЕЧИКИ
Керининг - это изменение расстояния между знаками,
входящими в определенные сочетания – кернинговые
пары (напр. ar). Служит для визуального выравнивания
M а r
o s w
КЕРНИНГ
Кернинг
ТРЕКИНГ
Трекинг – изменение межбуквенных расстояний. В отличие
от кернинга, корректирует межбуквенный интервал для
целого ряда букв, а не между двумя избранными символами
M а r
o s w
Трекинг
Интерлиньяж - это расстояние между базовыми линиями
соседних строк текста (складывается из кегля шрифта и
расстояния между строками)
M а r
o s w
ИНТЕРЛИНЬЯЖ
Интерлиньяж
базовая линия
ВОСПРИЯТИЕ ШРИФТА
Как выбрать шрифт?
Насыщенность
Ширина
Контраст
Скругление углов
Свободные шрифты
Часть
2
КАК ВЫБРАТЬ
ШРИФТ?
Для начала Вы должны определить тему проекта
(строгая, деловая, минималистичная, фантазийная,
женская/мужская, аристократичная) и следовать
этому «настроению» на протяжении всей работы
НАСЫЩЕННОСТЬ
Roboto Thin
Roboto Regular
Roboto Medium
Roboto Bold
Roboto Black
Жирность шрифта мы замечаем в первую очередь
и в любых условиях
Тонкие начертания. Такая надпись не привлечет
внимания, если вы сами этого не захотите. Отсюда
ощущение деликатности и бережности
Нормальные начертания эмоционально нейтральны,
на них меньше всего влияют оптические искажения
или плохая резкость. Идеально для чтения
Полужирные начертания, сохраняют читабельность и
добавляют значимости тексту. Используются для
выделений в тексте
Жирные начертания созданы для привлечения внимания
к коротким надписям
Сверхжирные шрифты создают ощущение тяжести, мощи,
Такие начертания провоцируют быстрый эмоциональный
отклик, поэтому их часто применяют: в играх, рекламе,
шоу-бизнесе
ШИРИНА
Ширина знаков шрифта, как и насыщенность, различается
быстро и сильно влияет на читабельность и заметность надписи
Murka
Murka
Murka
Cверхузких начертаний. На них очень легко обратить
внимание, из-за вертикальных линий, которые начинают
преобладать в надписи. Из-за низкой читабельности узких
букв такой шрифт может передавать лишь краткие слова
исключительной важности. Сверхузкие шрифты органично
смотрятся там, где нужен стоп-эффект: в объявлениях,
газетных заголовках, агитации
Начертания нормальной ширины оптимальны для чтения
Широкие и сверхширокие начертания сильно меняют
восприятие текста. Форма букв изменяется, появляется
больше горизонталей. Даже короткое слово начинает
читаться медленно, становится важным и
запоминающимся. Все вокруг надписи кажется
изобильным и внушительным. Широкие
начертания прекрасно читаются под углом или при
скоростном движении – перспектива нормализует
пропорции. Такие шрифты часто используют
производители машин, самолетов и спортивных товаров
КОНТРАСТ
Разница толщины основных и дополнительных штрихов. Контраст определяет
положение шрифта на шкале читабельность / эстетичность
Murka
Murka
Murka
При полном отсутствии контраста надпись выглядит просто
и лаконично. Неконтрастные шрифты разрывают связь набора
с ручным письмом, опираясь на индустриальную и
постиндустриальную городскую эстетику, от палочных
шрифтов до неоновых вывесок. Эти особенности делают
шрифты отличным решением для всех, кто хочет выглядеть
современно и прогрессивно
Слабый и средний контраст помогает при длительном чтении
и не всегда создает особое настроение
Очень сильный контраст – художественный прием,
характерный для шрифтов романтизма и классицизма.
Контрастные шрифты жертвуют читабельностью ради красоты
титульного листа, обложки или плаката. Чередование толстых
и тонких линий напоминает драматическое противостояние
силы и слабости, а соединение контрастных штрихов создает
изящный силуэт и ритм. Логично, что контрастные шрифты так
хорошо подходят для театра, моды и роскоши
СКРУГЛЕНИЕ УГЛОВ
Murka
Murka
Замена привычных, ожидаемых углов на округлости
уменьшает зрительное напряжение и ассоциируется
с гладкими, приятными на ощупь поверхностями. Это
вызывают приятные эмоции и чувство комфорта. Также
скругленные буквы работают с нашими первобытными
инстинктами, ведь округлости – основа бэбишейпа,
то-есть формы детеныша. Поэтому жирные и скругленные
шрифты используют для детского питания, шампуней,
подгузников. А еще скругление, в сочетании с некоторой
рукотворностью делает шрифт похожим на еду:
булочки, мороженое, фрукты
Заострение углов и краев штрихов привлекает
повышенное внимание, создает напряжение и даже
дискомфорт. Но это полезно, если вы продаете
«острые ощущения», удивляете, шокируете. Поэтому
«колючие» шрифты так часто встречаются в
подростковых товарах, атрибутике металлистов и других
субкультур
СВОБОДНЫЕ ШРИФТЫ
Murka
Murka
Murka
Наклонный шрифт с виньетками обычно применяется в рекламе
продукции, нацеленной на женскую аудиторию. Данный стиль
шрифта отличается легкостью и красотой, вызывая у девушек
и женщин приятные ассоциации. Использование курсива делает
информацию еще более легкой для восприятия
Рукописный стиль эффективно использовать стремясь
подчеркнуть исключительность и оригинальность.
Использование данного стиля написания букв подчеркивает
надежность транслируемой информации и вызывает доверие
Декоративные шрифты - общее название шрифтов с элементами
декоративного оформления. Основной задачей декоративных
шрифтов является отражение стиля, направления, при
необходимости, рождение ассоциаций с содержанием сообщения
Наклонный шрифт с виньетками, рукописный шрифт,
декоративный шрифт
ВОСПРИЯТИЕ ЦВЕТА
Как выбрать цвет?
Красный, оранжевый
Желтый, зеленый
Синий, голубой, фиолетовый
Розовый, серый
Черный, белый
Заключение
Часть
3
КАК ВЫБРАТЬ
ЦВЕТ?
80% цвета воспринимается человеком
подсознательно, и только 20% приходится на
зрительное восприятие. Цвет вызывает
определенные эмоции, ассоциации, воспоминания,
влияет на психологическое состояние,
причем каждый цвет – по-своему
ОСНОВНЫЕ ЦВЕТА
Красный цвет
Цвет, кричащий «Внимание!»
и удерживающий его. При
использовании в умеренном
количестве, является самым
лучшим цветом для
стимулирования продаж.
Яркий и агрессивный,
красный цвет символизирует
решительность, здоровые
амбиции, лидерство. Но
стоит подходить осторожно,
чтобы не переборщить с ним
Оранжевый цвет
Это цвет энергии, оптимизма,
активности, жизнерадостности,
отлично тонизирует.
Оранжевый цвет в дизайне
хорошо продает продукты на
тему спорта и детей. А
использование этого цвета
в своих фирменных цветах
компании будет вызывать
у клиентов ощущение, что
они имеют дело с передовой
компанией
ОСНОВНЫЕ ЦВЕТА
Желтый цвет
Мощный цвет, который
привлекает внимание.
Желтый цвет в дизайне
является хорошим акцентом
при использовании в
умеренных количествах.
Ассоциируется с теплом,
комфортом, легкостью,
безопаснтостью. Цвет
коммуникабельности.
В сочетании с холодными
цветами оживляет и
освежает первые
Зеленый цвет
Зеленый цвет в дизайне
успокаивает, цвет роста и
развития, надежности и
безопасности. Отождествляет
собой жизнь, рождение,
природу, естественность,
приятный для глаза и не
напрягает зрение. Это цвет
здоровья, цвет денег и
символизирует богатство.
Как ни странно, зеленый
считается пассивным, не
стимулирующим цветом
ОСНОВНЫЕ ЦВЕТА
Синий цвет
Позволяет сконцентрироваться
и ассоциируется с честностью,
доверием, откровенностью,
преданностью и выражает
стабильность, постоянство,
профессионализм, а также
стратегическое лидерство.
При этом синий цвет имеет
некоторые нотки безразличия
и депрессии. Нужно
разбавлять его
дополнительными цветами
Голубой цвет
Цвет духовности, мира,
свободы, гармонии, дружбы,
прохладный и свежий
Фиолетовый цвет
Считается цветом мистики и
магии, а также творчески
нестандартных людей. Если
правильно обыграть фиолетовый
в сочетании с другими цветами,
он может означать элегантность
и престиж
ОСНОВНЫЕ ЦВЕТА
Розовый цвет
Розовый ассоциируется с
подарками, отношениями,
нежностью, эмоциями,
наивностью, сексуальностью.
Этот цвет усиливает чувства,
а в сочетании с белым –
немного сбавляет свой напор
и присущие ему качества
Серый цвет
Цвет нейтральности,
формальности, не акцентирует
внимание. В сочетании с яркими
цветами служит спокойным
фоном. Универсальный цвет, но
в большом количестве –
вызывает уныние и скуку
ОСНОВНЫЕ ЦВЕТА
Черный цвет
Черный цвет — цвет
классики, власти, глубины.
Хорош в сочетании с
другими яркими цветами,
которые, в свою очередь,
усиливают свое значение.
Ассоциируется с
аристократичностью,
вечностью и формальностью.
Слишком много черного
может угнетающе
сказываться на восприятии
Белый цвет
Белый цвет — чистый, им
трудно испортить дизайн.
Ассоциации – простота,
саморазвитие, молодость,
свежесть, не вызывает
никаких неприятных ощущений.
Лучший цвет для фона под
основной темный текст, так
как при чтении не будет
напрягать зрение
ЗАКЛЮЧЕНИЕ
Размер имеет значение. Делайте логический акцент,
где необходимо
Обращайте внимание на трекинг, кернинг и интерлиньяж для
лучшего восприятия текста
Используйте шрифты соответсвующие настроению и посылу,
который нужно донести
Цвет текста передает подсознательное сообщение и помогает
расставить акценты
Текст бесполезен, если он нечитабелен
СПАСИБО ЗА
ВНИМАНИЕ

Основы типографики

  • 1.
  • 2.
  • 3.
    Шрифты без засечек, или«Гротеск» Шрифты с засечками, или «Антиква» Декоративные (акцидентные) шрифты Arial Garamond Badaboom Рукописные шрифты Milkshake
  • 4.
    ГАРНИТУРА совокупность шрифтов, объединенныхобщими стилевыми признаками, отличными от других шрифтов Gotham Light. For both text and Gotham Light Gotham Light Italic Gotham Book Gotham Book Italic Gotham Bold Gotham Bold Italic Gotham Light Italic. For both text and Gotham Book. For both text and Gotham Book Italic. For both text and Gotham Bold. For both text and Gotham Bold Italic. For both text and
  • 5.
    определяется изменением толщиныосновных и соединительных штрихов одноименных знаков НАСЫЩЕННОСТЬ Roboto Thin & Thin Oblique Roboto Light & Light Oblique Roboto Regular & Oblique Roboto Medium & Medium Oblique Roboto Bold & Bold Oblique Roboto Black & Black Oblique
  • 6.
    Кегль Кегль - высотасимволов шрифта. Определяется расстоянием между верхним и нижним выносными элементами с учетом оплечиков (заплечиков) M а r o s w Оплечики КЕГЛЬ
  • 7.
    Оплечики (заплечики) -это небольшой зазор над верхним и под нижним выносными элементами; это понятие досталось нам в наследство от металлических литер Кегль M а r o s w Оплечики ОПЛЕЧИКИ
  • 8.
    Керининг - этоизменение расстояния между знаками, входящими в определенные сочетания – кернинговые пары (напр. ar). Служит для визуального выравнивания M а r o s w КЕРНИНГ Кернинг
  • 9.
    ТРЕКИНГ Трекинг – изменениемежбуквенных расстояний. В отличие от кернинга, корректирует межбуквенный интервал для целого ряда букв, а не между двумя избранными символами M а r o s w Трекинг
  • 10.
    Интерлиньяж - эторасстояние между базовыми линиями соседних строк текста (складывается из кегля шрифта и расстояния между строками) M а r o s w ИНТЕРЛИНЬЯЖ Интерлиньяж базовая линия
  • 11.
    ВОСПРИЯТИЕ ШРИФТА Как выбратьшрифт? Насыщенность Ширина Контраст Скругление углов Свободные шрифты Часть 2
  • 12.
    КАК ВЫБРАТЬ ШРИФТ? Для началаВы должны определить тему проекта (строгая, деловая, минималистичная, фантазийная, женская/мужская, аристократичная) и следовать этому «настроению» на протяжении всей работы
  • 13.
    НАСЫЩЕННОСТЬ Roboto Thin Roboto Regular RobotoMedium Roboto Bold Roboto Black Жирность шрифта мы замечаем в первую очередь и в любых условиях Тонкие начертания. Такая надпись не привлечет внимания, если вы сами этого не захотите. Отсюда ощущение деликатности и бережности Нормальные начертания эмоционально нейтральны, на них меньше всего влияют оптические искажения или плохая резкость. Идеально для чтения Полужирные начертания, сохраняют читабельность и добавляют значимости тексту. Используются для выделений в тексте Жирные начертания созданы для привлечения внимания к коротким надписям Сверхжирные шрифты создают ощущение тяжести, мощи, Такие начертания провоцируют быстрый эмоциональный отклик, поэтому их часто применяют: в играх, рекламе, шоу-бизнесе
  • 14.
    ШИРИНА Ширина знаков шрифта,как и насыщенность, различается быстро и сильно влияет на читабельность и заметность надписи Murka Murka Murka Cверхузких начертаний. На них очень легко обратить внимание, из-за вертикальных линий, которые начинают преобладать в надписи. Из-за низкой читабельности узких букв такой шрифт может передавать лишь краткие слова исключительной важности. Сверхузкие шрифты органично смотрятся там, где нужен стоп-эффект: в объявлениях, газетных заголовках, агитации Начертания нормальной ширины оптимальны для чтения Широкие и сверхширокие начертания сильно меняют восприятие текста. Форма букв изменяется, появляется больше горизонталей. Даже короткое слово начинает читаться медленно, становится важным и запоминающимся. Все вокруг надписи кажется изобильным и внушительным. Широкие начертания прекрасно читаются под углом или при скоростном движении – перспектива нормализует пропорции. Такие шрифты часто используют производители машин, самолетов и спортивных товаров
  • 15.
    КОНТРАСТ Разница толщины основныхи дополнительных штрихов. Контраст определяет положение шрифта на шкале читабельность / эстетичность Murka Murka Murka При полном отсутствии контраста надпись выглядит просто и лаконично. Неконтрастные шрифты разрывают связь набора с ручным письмом, опираясь на индустриальную и постиндустриальную городскую эстетику, от палочных шрифтов до неоновых вывесок. Эти особенности делают шрифты отличным решением для всех, кто хочет выглядеть современно и прогрессивно Слабый и средний контраст помогает при длительном чтении и не всегда создает особое настроение Очень сильный контраст – художественный прием, характерный для шрифтов романтизма и классицизма. Контрастные шрифты жертвуют читабельностью ради красоты титульного листа, обложки или плаката. Чередование толстых и тонких линий напоминает драматическое противостояние силы и слабости, а соединение контрастных штрихов создает изящный силуэт и ритм. Логично, что контрастные шрифты так хорошо подходят для театра, моды и роскоши
  • 16.
    СКРУГЛЕНИЕ УГЛОВ Murka Murka Замена привычных,ожидаемых углов на округлости уменьшает зрительное напряжение и ассоциируется с гладкими, приятными на ощупь поверхностями. Это вызывают приятные эмоции и чувство комфорта. Также скругленные буквы работают с нашими первобытными инстинктами, ведь округлости – основа бэбишейпа, то-есть формы детеныша. Поэтому жирные и скругленные шрифты используют для детского питания, шампуней, подгузников. А еще скругление, в сочетании с некоторой рукотворностью делает шрифт похожим на еду: булочки, мороженое, фрукты Заострение углов и краев штрихов привлекает повышенное внимание, создает напряжение и даже дискомфорт. Но это полезно, если вы продаете «острые ощущения», удивляете, шокируете. Поэтому «колючие» шрифты так часто встречаются в подростковых товарах, атрибутике металлистов и других субкультур
  • 17.
    СВОБОДНЫЕ ШРИФТЫ Murka Murka Murka Наклонный шрифтс виньетками обычно применяется в рекламе продукции, нацеленной на женскую аудиторию. Данный стиль шрифта отличается легкостью и красотой, вызывая у девушек и женщин приятные ассоциации. Использование курсива делает информацию еще более легкой для восприятия Рукописный стиль эффективно использовать стремясь подчеркнуть исключительность и оригинальность. Использование данного стиля написания букв подчеркивает надежность транслируемой информации и вызывает доверие Декоративные шрифты - общее название шрифтов с элементами декоративного оформления. Основной задачей декоративных шрифтов является отражение стиля, направления, при необходимости, рождение ассоциаций с содержанием сообщения Наклонный шрифт с виньетками, рукописный шрифт, декоративный шрифт
  • 18.
    ВОСПРИЯТИЕ ЦВЕТА Как выбратьцвет? Красный, оранжевый Желтый, зеленый Синий, голубой, фиолетовый Розовый, серый Черный, белый Заключение Часть 3
  • 19.
    КАК ВЫБРАТЬ ЦВЕТ? 80% цветавоспринимается человеком подсознательно, и только 20% приходится на зрительное восприятие. Цвет вызывает определенные эмоции, ассоциации, воспоминания, влияет на психологическое состояние, причем каждый цвет – по-своему
  • 20.
    ОСНОВНЫЕ ЦВЕТА Красный цвет Цвет,кричащий «Внимание!» и удерживающий его. При использовании в умеренном количестве, является самым лучшим цветом для стимулирования продаж. Яркий и агрессивный, красный цвет символизирует решительность, здоровые амбиции, лидерство. Но стоит подходить осторожно, чтобы не переборщить с ним Оранжевый цвет Это цвет энергии, оптимизма, активности, жизнерадостности, отлично тонизирует. Оранжевый цвет в дизайне хорошо продает продукты на тему спорта и детей. А использование этого цвета в своих фирменных цветах компании будет вызывать у клиентов ощущение, что они имеют дело с передовой компанией
  • 21.
    ОСНОВНЫЕ ЦВЕТА Желтый цвет Мощныйцвет, который привлекает внимание. Желтый цвет в дизайне является хорошим акцентом при использовании в умеренных количествах. Ассоциируется с теплом, комфортом, легкостью, безопаснтостью. Цвет коммуникабельности. В сочетании с холодными цветами оживляет и освежает первые Зеленый цвет Зеленый цвет в дизайне успокаивает, цвет роста и развития, надежности и безопасности. Отождествляет собой жизнь, рождение, природу, естественность, приятный для глаза и не напрягает зрение. Это цвет здоровья, цвет денег и символизирует богатство. Как ни странно, зеленый считается пассивным, не стимулирующим цветом
  • 22.
    ОСНОВНЫЕ ЦВЕТА Синий цвет Позволяетсконцентрироваться и ассоциируется с честностью, доверием, откровенностью, преданностью и выражает стабильность, постоянство, профессионализм, а также стратегическое лидерство. При этом синий цвет имеет некоторые нотки безразличия и депрессии. Нужно разбавлять его дополнительными цветами Голубой цвет Цвет духовности, мира, свободы, гармонии, дружбы, прохладный и свежий Фиолетовый цвет Считается цветом мистики и магии, а также творчески нестандартных людей. Если правильно обыграть фиолетовый в сочетании с другими цветами, он может означать элегантность и престиж
  • 23.
    ОСНОВНЫЕ ЦВЕТА Розовый цвет Розовыйассоциируется с подарками, отношениями, нежностью, эмоциями, наивностью, сексуальностью. Этот цвет усиливает чувства, а в сочетании с белым – немного сбавляет свой напор и присущие ему качества Серый цвет Цвет нейтральности, формальности, не акцентирует внимание. В сочетании с яркими цветами служит спокойным фоном. Универсальный цвет, но в большом количестве – вызывает уныние и скуку
  • 24.
    ОСНОВНЫЕ ЦВЕТА Черный цвет Черныйцвет — цвет классики, власти, глубины. Хорош в сочетании с другими яркими цветами, которые, в свою очередь, усиливают свое значение. Ассоциируется с аристократичностью, вечностью и формальностью. Слишком много черного может угнетающе сказываться на восприятии Белый цвет Белый цвет — чистый, им трудно испортить дизайн. Ассоциации – простота, саморазвитие, молодость, свежесть, не вызывает никаких неприятных ощущений. Лучший цвет для фона под основной темный текст, так как при чтении не будет напрягать зрение
  • 25.
    ЗАКЛЮЧЕНИЕ Размер имеет значение.Делайте логический акцент, где необходимо Обращайте внимание на трекинг, кернинг и интерлиньяж для лучшего восприятия текста Используйте шрифты соответсвующие настроению и посылу, который нужно донести Цвет текста передает подсознательное сообщение и помогает расставить акценты Текст бесполезен, если он нечитабелен
  • 26.