Типографика: что это, основные термины и понятия
В 1984 году исследователи из Microsoft и MIT провели эксперимент и выяснили, что хорошо оформленный текст люди читают охотнее и быстрее. Так работает типографика в дизайне: правильно подобранные шрифт, цвет и контраст «цепляют» внимание и лучше доносят мысль.
- Что такое типографика
- Основные термины типографики
- Характеристики текстов
- Правила классической типографики в дизайне
- Полезные материалы по типографике
Так выглядели две версии текста, которые предложили участникам эксперимента в 1984 году: с «хорошей» (слева) и «плохой» (справа) типографикой
Что такое типографика
Типографика — это всё, что касается оформления текста в дизайне: шрифты, размер, цвет и начертание букв. Главная цель — объединить визуальную и текстовую составляющую в единое целое.
Раньше типографику применяли для оформления книг, буклетов, вывесок, афиш.
Теперь её используют во всех сферах дизайна: от графического до веб-дизайна. Знание правил типографики — одно из ключевых для дизайнеров, верстальщиков, креативных специалистов и арт-директоров.
Материал по теме:
Виды шрифтов: как выбрать лучший вариант для дизайна
Основные термины типографики
Уникальный способ начертания букв, цифр и символов: по форме, пропорциям, расстоянию между элементами.
Так выглядит один из самых популярных шрифтов конца 90-х — Times New Roman:
строгий, классический:с засечками и тщательно выверенной симметрией
А это — Comic Sans: неформальный, без засечек и как будто написанный небрежным почерком.
Иногда компании создают свои шрифты, чтобы стать более узнаваемыми и выделить свои продукты на фоне конкурентов. В Яндексе используют собственный шрифт — Yandex Sans.
Так выглядит текст, набранный Yandex Sans
Yandex Sans одинаково хорошо читается на больших мониторах и мобильных устройствах, гармонично выглядит в названиях интерфейсов и текстах статей.
Он немного похож на Arial, но имеет свой лаконичный, нейтральный, но узнаваемый стиль, который помогает донести информацию, не отвлекая внимание.
Шрифт Arial
Сам Arial, к слову, был создан в 80-х по заказу компании Microsoft для ОС Windows. Это быстро сделало его одним из самых популярных и узнаваемых шрифтов.
Гарнитура
Группа шрифтов, которые объединены одной стилистикой, например Courier или Georgia.
Шрифт Courier
Шрифт Georgia
Есть две основные группы гарнитур:
- С засечками — например Times (см. выше) или Antiqua. Эти шрифты используют, когда хотят придать тексту более весомый и официальный тон: в книгах, новостных изданиях или объявлениях в общественных местах.
Шрифт Antiqua
- Без засечек — такие как Arial (см. выше) или Calibri. Такие шрифты часто используют на веб-сайтах, в онлайн-сервисах и приложениях: они облегчают восприятие текста на разных носителях, помогают передать практичность и современность.
Шрифт Calibri
Высота букв шрифта, которую измеряют в pt (punkt, точка). 1 pt равен 1/72 дюйма, или 0,352 мм. Самый популярный размер, которым обычно набирают тексты для объявлений и веб-документы, — это 12-й кегль. Такой текст удобно читать с небольшого расстояния. Эта статья как раз написана 12-м кеглем.
Интерлиньяж
Расстояние между строками, которое также измеряется в типографских пунктах. Оптимальный интерлиньяж — это кегль + ⅕. Например, для текста, набранного 12-м кеглем, расстояние между строк обычно выставляют в 16 pt.
Кернинг
Расстояние между буквами. Как правило, оно выставляется автоматически в зависимости от выбранного шрифта. Но иногда при вёрстке кернинг увеличивают, чтобы текст лучше читался, или уменьшают — если этого требует дизайн-макет.
Трекинг
Пробелы между фрагментами текста: словами, строками или абзацами. Их также можно уменьшить или увеличить, если нужно сделать текст плотнее или наоборот.
Рубрикация
Внутреннее деление текста: на главы, части, разделы или смысловые блоки с подзаголовками.
Рубрикация помогает выстроить структуру текста и упрощает его восприятие. Это особенно актуально для больших текстов: лонгридов, учебных материалов, книг или инструкций.
Графема
Это основная единица текста — буква, цифра, знак препинания или математический символ. Её можно безошибочно отличить по уникальной форме независимо от шрифта или начертания. Например, «а» и «б» — это разные графемы, а «а» и «а» — одинаковые.
Это графическое изображение графемы в конкретном шрифте.
Разные глифы для буквы «А» в гарнитуре Zapfino
Прописные и строчные буквы
Строчные — или маленькие — буквы стандартного размера, которыми набирают основную часть текста.Прописные — они же заглавные — это большие буквы, с которых начинают предложения, названия и имена. Их также используют в аббревиатурах.
Иногда прописные и строчные буквы в шрифте выглядят одинаково и отличаются только размером — то есть у них один и тот же глиф. Одно из начертаний в гарнитуре называется капитель.
Так выглядят прописные и строчные буквы, а также капитель.
Леттеринг
Авторское начертание букв и целого текста, которое выглядит как рисунок и образует единую композицию. Его часто используют в иллюстрациях, вывесках, дизайне упаковок, интерьерных постерах. Технически леттеринг объединяет графический рисунок и типографику, а в его основе лежит каллиграфия — искусство красивого письма от руки, при помощи пера, кисти или специальных маркеров.
Пример леттеринга
Полоса
Всё пространство, занятое текстом и изображениями. В случае с книгами и СМИ это вся страница, за исключением полей.
Характеристики текстов
Типографика в графическом дизайне помогает тексту справиться со своей задачей лучше: быть понятней, проще для восприятия и не раздражать. Вот какие характеристики шрифтового оформления текста для этого используют:● Удобочитаемость: насколько легко воспринимается текст, хорошо ли различимы буквы и другие символы, можно ли быстро прочитать текст «по диагонали».
За это отвечают шрифт, кегль, расстояние между буквами и строками, контраст.
● Заметность: насколько хорошо различим текст на фоне страницы, привлекает ли внимание и не теряется ли на фоне других визуальных элементов даже при слабом освещении. В этом также помогут шрифт и контраст, а ещё — размер букв, полужирное начертание, цвет и другие акценты. При этом важно соблюдать пропорции и подбирать цветовые сочетания в соответствии с фоном и другой графикой: фото, рисунками, логотипами. Иногда выделяют не весь текст, а отдельный, самый важный фрагмент.
На сайте Apple все элементы хорошо заметны, при этом в центре внимания — новая модель смартфона
● Выравнивание: расположение текста относительно сторон страницы — по левому или правому краю, по центру или по ширине. В типографике веб-дизайна чаще всего используют выравнивание по левому краю: в большинстве языков текст читают слева направо, поэтому такое выравнивание интуитивно привычно и понятно.
Выравнивание по ширине используют в книгах, информационных постерах, а также в СМИ, где текст разбит на колонки.
Текст на странице сайта «Бюро Горбунова» размещён в несколько колонок с выравниванием справа. Это упорядочивает разрозненные фрагменты текста и задаёт направление взгляду, позволяя бегло ухватить суть
- Стиль: идея и её визуальное воплощение в типографике. Например, для текста, который посвящён средневековой культуре, можно выбрать готический шрифт с элементами леттеринга для первых букв каждой главы или абзаца.
Сайт МХТ им. А. П. Чехова выполнен в стилистике модерна 1910-х, включая фирменный шрифт и визуальные элементы. Все афиши и другие графические материалы театра оформлены так же
● Контраст: то, за счёт чего текст выделяется на фоне и в сравнении с другой графикой, — например цвет или полужирное начертание.
Правила классической типографики в дизайне
Классическая типографика — это основы, которые помогают определиться с правильным оформлением текста.
Современная типографика во многом опирается именно на них, адаптируя под новые технологии и тренды. Примерно как современная живопись опирается на базовые правила классической.Вот базовые принципы типографики:
● Использовать не более трёх шрифтов. Чем меньше текст, тем меньше шрифтов допустимо, иначе внимание читателя рассеивается и содержание текста может ускользнуть. При этом все шрифты должны быть объединены стилистически, а ещё лучше — быть из одной гарнитуры. Так текст выглядит цельным и гармоничным, а разные фрагменты или продукты объединяются визуально. Это актуально и для веб-ресурсов, и для онлайн-сервисов или приложений — в том числе в рамках одной экосистемы.
Обилие шрифтов, которые не сочетаются между собой, создаёт впечатление визуального мусора
● Придерживаться единой размерной сетки в шрифтовом оформлении. Это касается и кегля, и интерлиньяжа, и кернинга: их в рамках одного текста допустимо варьировать в пределах 1 pt, иначе он будет выглядеть неоднородным и сложным для восприятия.
● Соблюдать оптимальную длину строки. Лучше, если она будет не длиннее 600 pt — иначе будет сложно сфокусироваться и дочитать текст до конца. Слишком короткие строки тоже нежелательны, если только это не список или плакат со слоганами и призывами к действию.
● Разбивать текст на блоки и абзацы. Это нужно по тем же причинам, что и в предыдущем пункте: чтобы удержать внимание читателя, придать тексту логичную структуру и последовательно донести его смысл. Строго говоря, это скорее задача редактора, чем дизайнера или верстальщика. Но иногда текст приходится разбивать на блоки чисто из соображений композиции.
● Выставлять интерлиньяж больше, чем кегль. Расстояние между строками должно быть в полтора раза больше, чем буквы. Например, для 14-го кегля интерлиньяж лучше выставить в 21 pt. Так текст будет выглядеть цельным и собранным, при этом буквы будут достаточно легко читаемы.
● Выбирать шрифт в соответствии с общим дизайном и концепцией. Если это сайт для технологичного продукта или онлайн-сервиса, не стоит набирать текст при помощи Times New Roman или Book Antiqua.
Здесь подойдут лаконичные шрифты без засечек.
● Не злоупотреблять акцентами. Даже если нужно сделать акцент и привлечь особое внимание к тексту, набирать его заглавными буквами или слишком большим кеглем — не лучшая идея: это придаёт излишне эмоциональное звучание, вызывает отторжение и беспокойство.
Сейчас не так просто найти примеры визуально перегруженных сайтов, но ещё в начале двухтысячных многие веб-страницы выглядели примерно так
● Располагать текст равномерно по всей полосе. На странице не должно быть больших пустых пространств или, наоборот, слишком плотно заполненных текстом и графикой. Это вредит композиции, а значит — гармоничному восприятию текста. Чтобы этого добиться, можно менять расстояния и размеры букв и строк.
Полезные материалы по типографике
Ян Чихольд, «Новая типографика».Руководство для современного дизайнера: фундаментальный труд по типографике, который создавался как пособие для оформления печатных текстов, но актуален и для веб-дизайна.
Джеймс Феличи, «Типографика: шрифт, вёрстка, дизайн».
Руководство по типографике в современном графическом и веб-дизайне, которое не ограничивается шрифтами и размерами в тексте.
Роберт Брингхёрст, «Основы стиля в типографике».
Всё о том, как структурировать текст, придавать ему выразительность и гармоничность.
Эмиль Рудер, «Типографика. Руководство по оформлению».
Глубокий анализ того, как устроено оформление текста и каким правилам нужно следовать в первую очередь.
Эрик Шпикерман, «О шрифте».
Для тех, кто хочет изучить особенности разных шрифтов, их применение и сочетания.
Ян Чихольд, «Образцы шрифтов».
Исследование о том, как устроены шрифты, идеальные формы и пропорции букв.
Владимир Ефимов, «Великие шрифты».
Ещё один полезный справочник по типографике, где основное внимание уделяется кириллическим шрифтам.
Основы типографики также можно освоить на курсе Практикума «Графический дизайнер». Он подходит для новичков, которые хотят освоить новую профессию, и тех, кто уже обладает базовыми навыками и хочет развиваться в своей области.
Зарабатывайте с помощью творчества — уметь рисовать не обязательно
Пройдите бесплатную вводную часть курса «Графический дизайнер», чтобы попробовать себя в профессии
Статью подготовили:
Поделиться
Читать также:
Что такое скетчинг
Перейти в статью
Дизайн-мышление: пять шагов, которые помогут создать успешный продукт
Перейти в статью
От The Times до «Очень странных дел»: как шрифты стали основой брендинга :: РБК Pro
Pro Партнер проекта*Телеканал
Pro
ИнвестицииМероприятия
РБК+
Новая экономика
Тренды
Недвижимость
Спорт
Стиль
Национальные проекты
Город
Крипто
Дискуссионный клуб
Исследования
Кредитные рейтинги
Франшизы
Газета
Спецпроекты СПб
Конференции СПб
Спецпроекты
Проверка контрагентов
РБК Библиотека
Подкасты
ESG-индекс
Политика
Экономика
Бизнес
Технологии и медиа
Финансы
РБК КомпанииРБК Life
Материал раздела Основной
Дизайн   · Брендинг
Статьи Notamedia
Сегодня даже небольшие компании создают для себя фирменные шрифты, а крупные игроки не жалеют средств на разработку полноценных шрифтовых систем.
Зачем они это делают и как появился тренд — разобрались эксперты digital-агентства Notamedia
Фото: Unsplash
Одним из первых фирменных шрифтов можно считать всем знакомую антикву Times New Roman. Это шрифт британской The Times. В 1929 году старейшая лондонская газета, которую читали министры и другие государственные деятели страны, задумалась о том, чтобы обновить свой образ. Незадолго до этого типограф Стенли Морисон раскритиковал The Times за старомодность. Именно его, кстати, и пригласили разработать новый шрифт для издания. Он должен был быть достаточно компактным, хорошо читаемым и в меру консервативным. Таким и стал Times New Roman, созданный на основе Monotype Plantin.
The Times начала использовать Times New Roman уже в 1932 году, а всего через год шрифт из фирменного превратился в коммерческий, то есть теперь его мог купить любой человек. Сейчас им набирают официальные документы и научные работы, статьи для сайтов и книги. Так постепенно Times New Roman перестал отождествляться с брендом, для которого изначально был создан, а The Times утратила узнаваемость по шрифту.
Теперь, если логотипа не видно, ее не отличить от множества других британских газет.
логотипов-цветов-шрифтов | Маркетинг и коммуникации
Официальные логотипы, цвета и шрифты
Логотипы штата Баффало, цветовые палитры и шрифты объединяются, чтобы создать отчетливую визуальную идентичность для учреждения, что приводит к последовательному внешнему виду, укрепляющему имидж учреждения.
Официальные логотипы
Логотип штата Баффало доступен в нескольких ориентациях и официальных цветах для использования во всем кампусе. Загрузки (файлы .zip) содержат все варианты доступных логотипов в различных форматах файлов. Из-за различий в настройках монитора компьютера и принтера цвета могут немного отличаться на экране или при печати. Файлы, доступные для скачивания, содержат официальные цвета штата Баффало и не должны подвергаться каким-либо изменениям.
Политика в отношении официального логотипа Настройте подпись электронной почты
Печать логотипов
Печатные логотипы можно легко увеличивать или уменьшать в размере, сохраняя при этом их читаемость.
Скачать логотипы для печати
Фирменные логотипы
Специальные логотипы
Креативная тема
Добавьте нашу креативную тему к своим мероприятиям, мероприятиям, программам и рекламным материалам. Все варианты логотипов творческих тем, включая подписи электронной почты, доступны в ZIP-файле (JPG, PNG и EPS).
О креативной теме
Скачать логотипы креативной темы
легкая атлетика
Официальные логотипы Intercollegiate Athlegiate, бенгальский талисман и любые связанные знаки являются товарными знаками. На товарах разрешается использовать только официальные логотипы и логотипы с символом товарного знака.
Официальное использование логотипа легкой атлетики
Официальная печать
Печать предназначена только для официальных документов и президентских сообщений. Использование печати требует одобрения Администрации Президента. Исключение: маркетинговые материалы, предназначенные для международной аудитории, для целей которых может потребоваться использование официальной печати.
Связаться с Аппаратом Президента
Официальные цвета
Официальные цвета штата Баффало являются ключевыми компонентами программы визуальной идентификации и должны использоваться во всех печатных материалах и на всех веб-страницах, выпускаемых департаментами штата Баффало. Последовательное использование и тщательное согласование необходимы для создания и поддержания единого образа.
Цвета печати
Все поставщики должны использовать цвета Pantone Matching System (PMS).
При печати канцелярских товаров следует использовать цвета Pantone. Если цвет Pantone недоступен, используйте смесь CMYK. Эта палитра предназначена только для печатной продукции. №
Цвета:
- Основной: ярко-оранжевый, PMS 159
- Вторичный: Фиолетовый, PMS 668
- Третичный: теплый серый, PMS 452
- Третичный: Холодный серый, PMS Холодный серый 9(обязательное использование в рамках официального герба)
ПРИМЕЧАНИЕ. Программа межвузовской легкой атлетики штата Баффало использует PMS 158 (оранжевый) и черный в качестве официальных цветов для NCAA Division III.
Веб-цвета
Веб-цвета предназначены только для электронного использования. Чтобы сохранить соответствие требованиям ADA в Интернете, палитра для печати не должна использоваться для цифровых продуктов.
Первичный: ярко-оранжевый, #BB5B02
Вторичный: ярко-оранжевый, #E37701
Третичный: золотой, #FF9933
Третичный и текст: черный, #000000
Официальные шрифты
Постоянное использование официальных шрифтов штата Буффало является неотъемлемой частью успеха программы визуальной идентификации.
Департаменты штата Буффало должны использовать официальные шрифты во всех печатных продуктах и веб-страницах.
Шрифты для печати
С засечками: Garamond
Без засечек: Brandon Grotesque
Заменители шрифтов Microsoft Word*
Допустимы замены стандартных систем Microsoft Office:
Serif: Garamond, Times New Roman
Sans Serif: Arial, Helvetica
* Пожалуйста, запрашивайте официальные шрифты при работе с коммерческими полиграфическими компаниями и дизайнерами фирмы.
Веб-шрифты
Шрифты без засечек, такие как Arial или Helvetica, используются для отображения бегущего текста в Интернете и должны использоваться на всех официальных страницах.
- Текст должен быть достаточно большим, чтобы его можно было прочитать
- Черный текст на белом фоне — официальная комбинация
- Все официальные веб-страницы штата Буффало содержат читаемые, безопасные для браузера шрифты
Типографика — Справочник по бренду
EB Garamond + Open Sans
Видимо, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать.
По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро. Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте EB Garamond + Open Sans
Поместите этот код в вашего документа или шаблона:
Укажите шрифт в CSS:
семейство шрифтов: 'EB Garamond', Georgia, 'Times New Roman', Times , с засечками;
семейство шрифтов: «Open Sans», «Helvetica Neue», «Segoe UI», Helvetica, Arial, без засечек;
Playfair + Roboto
Очевидно, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать. По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро.
Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.
Используйте Playfair + Roboto
Поместите этот код в вашего документа или шаблона:
Укажите шрифт в CSS:
семейство шрифтов: 'Playfair Display', Georgia, 'Times New Roman', Times, serif;
семейство шрифтов: «Roboto», «Helvetica Neue», «Segoe UI», Helvetica, Arial, без засечек;
Merriweather + Open Sans
Очевидно, мы достигли большой высоты в атмосфере, потому что небо было мертвенно-черным, а звезды перестали мерцать. По той же иллюзии, которая поднимает горизонт моря до уровня зрителя на склоне холма, темное облако под ним расплывалось, и машина, казалось, парила посреди огромной темной сферы, верхняя половина которой была усыпана серебро. Глядя вниз, в темную бездну внизу, я мог видеть красноватый свет, струящийся сквозь трещину в облаках.