B2B блог?! – Запустили десятки таких в 2024. Подробнее здесь

Заказать звонок
Телефон отдела продаж:
8 (800) 775-16-41
Наш e-mail:
mail@texterra.ru
Заказать услугу
Все о типографике: откуда берутся шрифты и как их используют бренды Редакция «Текстерры»
Редакция «Текстерры»
Если конкурентные компании обменяются шрифтами, выбор между «Колой» и «Пепси» станет для потребителя еще сложнее

Знания в типографике актуальны не только для узких специалистов. Они пригодятся маркетологам, предпринимателям и менеджерам: если вы собственноручно набираете тексты или затрудняетесь оценить готовый дизайн. Я рассмотрю способы оформления надписей, виды шрифтов, правила их сочетания и тренды в брендинге.

Обычно оформление текста начинается с выбора шрифтов. Их все можно разделить на пять групп:

Знакомьтесь, так они выглядят

А это критерии их различия:

  • У антиквы значительно разная толщина штрихов и наличие засечек.
  • У гротесков – единая толщина и отсутствие засечек.
  • Брусковые шрифты – это ребята с простыми широкими засечками и малозаметной разницей в толщине штрихов. Промежуточный вариант между антиквой и гротеском.
  • У рукописных (еще их называют псевдорукописными, каллиграфическими или скриптами) – сглаженные углы и присутствие соединительных штрихов.
  • Декоративные – это плод больного или здорового воображения художников. Они никаким правилам не подчиняются.

Теперь давайте пройдемся по всем и посмотрим на примеры.

Это первое типографическое достижение человечества. Для латинского алфавита антикву разработали в 15 веке. Шрифту предшествовало письмо от руки: поэтому у всех букв есть засечки, а начертания основаны на дуктальном принципе – есть тонкие и толстые линии, как от движения пера.

Антиква старого стиля. Apple использовали шрифт Garamond. Он живой, детализированный, с умеренным контрастом между толщинами линий, знаки открытые (обратите внимание на “e”)

В 17 веке в эпоху барокко антиква трансформировалась – контраст толщин увеличивался, линии становились более жесткими и механистичными, внешне буквы все более отдалялись от рукописных.

Переходная антиква эпохи барокко на обложке каталога с «лабутенами»Еще пример переходной антиквы: британский шрифт Caslon, созданный в начале 18 века

В конце 18 века для французских революционных плакатов начали создавать антиквы нового стиля. Сейчас такие шрифты часто используют в заголовках и логотипах.

У новых антикв огромная разница между толщинами в буквах – это хорошо в большом масштабе для привлечения внимания

Они с нами сравнительно недавно. В 19 веке их начали активно применять для газетных заголовков, плакатов и афиш – такие буквы были четко различимы издалека. К началу 20 века их стали брать и для набора больших текстов: форма начертания тут проще, чем в антикве, и печать обходилась дешевле.

Сейчас гротески повсеместно нас окружают и никакого удивления не вызывают.

Это Franklin Gothic, который относится к старым гротескам. Овалы вытянутые, все буквы закрытые и тяготеют к одной ширине.

Конструктивисты экспериментировали с гротесками в 30-е годы, пытаясь превратить буквы в геометрические фигуры. Им больше нравились квадраты и прямоугольники, но в наше время особенно популярны шрифты на основе круга.

«Округлые» гротески – это своеобразный маркер нашего времени. Такие шрифты считаются располагающими, дружелюбными, демократичными. Присмотритесь: они везде!

Антитеза конструктивизму – гуманистические гротески:

Они немножко похожи на антикву: толщина основных и соединительных линий заметно различается

В 50-х годах возникли неогротески. Они развивались в традициях швейцарской школы – это стандартные, незаметные, функциональные шрифты, обычно имеющие много вариантов начертаний.

Самый популярный неогротеск – Helvetica. Нейтральный шрифт, который подходит для любых ситуаций

Брусковые буквы развиваются с 19 века. Для гротеска в них слишком явная разница толщин и мощные засечки. Для антиквы – разница толщин слишком маленькая, а засечки слишком грубые. В итоге вышел гибрид – странный, но симпатичный.

Некоторые брусковые шрифты развивались из антиквы, другие – из гротесков. Тут представлен первый случай

Еще есть рукописные шрифты (скрипты), их ни с чем не спутать. До изобретения клавиатуры человеку важна была скорость письма, поэтому буквы имеют упрощенную форму и соединения друг с другом – все это характерно и для шрифтов, вдохновленных письмом от руки.

Шрифт Snell в названии фильма Дэвида Линча

Наконец, декоративные шрифты – это все, что не вписывается ни в какие рамки.

Если вы вообще не понимаете, что за шрифт перед вами – значит он декоративный. Такие буквы хороши для заголовков, если использовать их дозированно

Сейчас новые шрифты создаются каждый день, но, как видите, для старых я тоже нашла современные примеры. Многие гарнитуры стали своеобразной классикой, и крупные компании с удовольствием их используют. А вот новые шрифты имеют свойство устаревать – чем сложнее их форма, тем быстрее наш мозг улавливает паттерн и привыкает к нему. И повторное появление шрифта у другого бренда вызовет ощущение дежавю. Поэтому выбирать стоит или старые проверенные шрифты, или совсем свеженькие.

Разработаем вам фирменный стиль
Подробнее

Я намеренно рассмотрела виды шрифтов на латинице, потому что с русским языком дела обстоят сложнее. С легкой руки Петра I кириллица взяла за основу западноевропейскую форму графем, и наши буквы с тех пор не очень гармонично выглядят.

Многие знаки почти полностью соответствуют латинице, но наряду с ними есть «ю», «ж» и «щ», которые значительно шире других букв. Поэтому компоновать русскоязычные фразы в столбцы, например, совсем трудно. И в целом вариации между буквами у нас более явные – они усложняют любую шрифтовую композицию. Это одна из причин, почему многие отечественные бренды предпочитают называться на латинице.

На просторах интернета гуляют кириллизации иностранных логотипов авторства Ильи Калимулина. Они качественно сделаны и наглядно иллюстрируют мои слова.

Во-первых, в глаза бросается пространство между буквами: в англоязычной версии оно напоминает два ровных треугольника, а русскоязычной – странная амеба между «Г» и «Э», а потом узенькая полосочка. Во-вторых, в левом логотипе тонкие буквы одной ширины. Для русского это не работает – «Э» очень противоестественно смотрится вытянутойНаша версия заметно отличается. Слово уже не смотрится таким нейтральным - хвостик «Й» чуть ли не конкурирует со знаком-галочкой. Буква «А» делает слово шире, горизонтальные штрихи в «А» и «Н» усиливают это ощущение. Это тоже отличительная черта русского языка: у нас много горизонталей, а в английском больше вертикалейЗдесь латиница смотрится более динамичной, как раз за счет отсутствия горизонталей. И снова у нас буквы одной ширины, не очень выигрышные для кириллицы. Широкая «Г» и «О» образуют много пустого пространства

В примерах мы имеем дело с транслитерацией. Если бы названия были образованы от русских слов, было бы еще веселее. Русские слова более длинные, чем латинские, мы читаем их дольше. Впрочем, всегда есть пример немецкого языка со словами на целую строку – просто нужно брать лаконичные шрифты.

У нас не только много длинных слов, но еще и мало коротких – артикли вообще отсутствуют. Из-за этого в длинных текстах часто возникает необходимость переносов, образуются висячие строки – несколько слов, которые не вписались в отведенное место на странице или в разделе. Это либо ухудшает внешний вид текста, либо прибавляет работы дизайнерам.

Англоязычный текст на вид – гладкий, стройный, нейтральный. Русскоязычный текст никогда не будет нейтральным: у нас есть неформатные буквы и неформатные слова. Иногда это хорошо, иногда – не очень.

Я люблю русский язык. Всегда радуюсь, когда вижу названия российских компаний на русском и считаю это правильным. Но важно осознавать отличия кириллицы от латиницы.

Не во всех шрифтах, которые можно скачать в интернете, доступны кириллические версии. Обращайте на это внимание, если планируете писать текст на русском.

Иногда на конкретном баннере или веб-странице используют один шрифт, но чаще их несколько. Оптимальный вариант: пара, в которой один из шрифтов выполняет роль акцидентного (привлекает внимание), а другой – более простой и базовый, для донесения подробной информации.

При сочетании шрифтов нужно учитывать пропорции и геометрию букв (ширину, высоту, округлость), различие в ширине разных букв между собой. Еще важна степень открытости знаков (апертура). Ее можно легко оценить по букве «с». Хорошо, когда по каким-то из этих пунктов шрифты похожи.

Но должна быть и видимая разница. Поэтому категорически избегать стоит сочетания шрифтов, принадлежащих к одной группе. Не надо брать две антиквы старого стиля или два неогротеска – они вместе будут смотреться грязно.

Давайте посмотрим на популярные варианты шрифтовых комбинаций.

Гротеск / антиква

Это самое излюбленное сочетание. Такие шрифтовые пары делать просто, потому что гротеск от антиквы кардинально отличается отсутствием засечек. Так что заголовок с текстом никто не спутает. Остается только найти шрифты, которые имеют между собой какое-то сходство.

Гротеск обычно ставят в качестве заголовка: он толстенький и сразу бросается в глаза. А для большого текста удобнее антиква, потому что засечки создают собой линию строки, и читать легче.

Verdana + Garamond

Иногда заголовок печатают антиквой нового стиля, она цепляет взгляд за счет сильного различия в толщине штрихов.

Гротеск / гротеск

Раз уж гротески в современном мире стали пригодны не только для заголовков, а для любого текста, можно этим воспользоваться и совсем антикву выкинуть.

Franklin Gothic Medium + Arial

Антиква / антиква

Это спорное сочетание. Но если очень хочется, то можно. Чтобы между антиквами в заголовке и в основном тексте были явные различия, лучше брать новую и старую. Также можно усилить разницу с помощью разных начертаний. Я сделаю заголовок пожирнее:

Didot Bold + Garamond

Гротеск / брусковый шрифт

Поскольку брусковые шрифты – странная гибридная категория, иногда они могут заменить собой антикву, а иногда – гротеск. Для примера я выбрала родственника антиквы Baltica.

Gill Sans + Baltica

Антиква / скрипт

Скрипты в больших объемах читать тяжело. Они подходят скорее для передачи настроения, чем смысла. Рукописный шритф подойдет для односложного заголовка, чтобы придать слову сильную эмоциональную окраску.Поскольку антиква старого стиля произошла от письма пером, она отлично сочетается со скриптами.

Snell + Garamond

Скрипт / скрипт

Если вы все-таки хотите использовать скрипт для основного текста, надо обойтись без росчерков, загогулин и завитушек. Выбирайте максимально простой скрипт. И все равно не пишите им слишком большие тексты. А что касается правил сочетания с заголовком, тут все, как обычно.

Cambria Italic + Segoe Script

Сочетания с декоративными шрифтами

Декоративные шрифты подходят только для заголовков: никто не станет читать большие тексты с ними. Чтобы не перегружать картинку, основной шрифт надо максимально упростить.

Brudnota + Gill Sans

Комбинации шрифтовых начертаний

Если вам лень во всем этом разбираться, можно сделать проще. Выберите, например, Helvetica или другой нейтральный шрифт и поиграйте с опциями. Можно варьировать толщину начертаний, прописные и строчные буквы. Этого бывает вполне достаточно, чтобы структурировать информацию на странице.

Helvetica Bold + Helvetica Regular

В лингвистические тонкости вдаваться не будем. Давайте препарировать текстовое полотно с позиции визуальной привлекательности. На наше восприятие написанного влияет 7 главных факторов.

Не бойтесь, головоломка тут для пущей интриги. Сейчас все объясню
  1. Гарнитура. Это та штука, которую в обиходе называют шрифтом. Когда выбираете для документа Times New Roman или Arial (а я выбрала Garamond), вы определяете гарнитуру шрифта.
  2. Шрифтовые начертания. Это все, что внутри гарнитуры. Жирные, тонкие, курсивные, нормальные, прописные, строчные, капители (прописные буквы размером строчных) и пр. Если быть дотошной в формулировках, конкретный выбранный шрифт – это гарнитура + начертание.

Не во всех гарнитурах есть возможности выбора, но их наличие можно считать критерием качества. Чем больше опций имеется, тем более пластичен текст. У вас не будет проблем выделить важное, самое важное или второстепенное с помощью разных начертаний. Ограниченный набор опций можно простить только эксцентричным декоративным шрифтам, если они задуманы исключительно прописными, курсивными или жирными.

Если в гарнитуре нет нужного вам начертания, не насилуйте ее, а найдите другую. Противоестественные манипуляции со шрифтом ничем хорошим не заканчиваются. Частая ошибка – курсив пытаются имитировать наклоном:

Курсив (снизу) отличается не только наклоном – он имитирует ручное письмо. А наклон прямого начертания (сверху) смотрится дефектно
  1. Размер – кегль. У размера шрифта есть свои единицы измерения, пункты, которые вы точно видели, редактируя документы в «Ворде». Кегль считается по крайним точкам букв в шрифте, включая выступающие элементы (хвостик у «р» или шляпка у «б»).

Единых правил выбора размеров нет. Все зависит от устройства, с которого текст будут читать, от загруженности страницы текстом и других факторов. Важно понимать, что не всегда больше – значит лучше. Например, Arial и некоторые другие гарнитуры создавали во времена, когда актуальным был кегль не больше 14. В нем мало проработаны детали, и буквы грубо смотрятся при увеличении. Поэтому масштаб тоже влияет на выбор шрифтов.

  1. Цвет. Он задает настроение и подчеркивает смысл понятия: «зелюков» я решила сделать зелеными. Для читабельности любых букв на любой плоскости важен тональный контраст: либо текст темный на светлом, либо светлый на темном.
«Зелюки» у нас примерно посередине тонального спектра, даже поближе к темному. Черный – крайняя темная точка спектра. Поэтому белое продолжение стишка читается вообще без проблем. А к «зелюкам» есть вопросы – лучше бы они были посветлее
  1. Расстояние между строчками с вкусным названием «интерлиньяж». Межстрочный интервал в полиграфии традиционно составляет 120 % от размера букв, ради экономии бумаги. На сайтах часто делают от 140 %. А вот больше 160 % лучше не ставить нигде: за этим порогом текст уже перестает восприниматься цельной единицей информации.
  2. Расстояние между конкретными буквами – кернинг. Его создатель шрифта определяет для каждой отдельной пары букв. В хороших шрифтах все устроено разумно, и можно смело набирать большие тексты. А в коротких названиях и слоганах иногда есть смысл слегка подвигать буквы для дополнительного художественного эффекта. Чуть позже это увидим на примерах.
  3. Расстояние между всеми буквами в фрагменте текста – трекинг. Разряженный или плотный набор делают едва заметным (2–3 %), чтобы уместить много букв в нужное поле или растянуть по нему мало букв. Или трекинг делают более заметным (до 25 %), чтобы выделить фразу в тексте. Дополнительно разрядка может потребоваться, если вы набираете текст капсом: исходные интервалы в шрифте будут маловаты, они задуманы для сочетания заглавных букв со строчными.

Мы разобрались с видами шрифтов, их сочетаниями и опциями, которые вы можете менять в графических редакторах, чтобы трансформировать внешний вид текста. Посмотрим, как это работает на живых брендах.

Хорошая типографика – невидимая. Эта мысль актуальна, если мы хотим быстро донести до человека кучу важной информации. Декоративные элементы тут будут только отвлекать читателя. На сайтах мы часто сталкиваемся с длинными описаниями товаров, услуг или условий сотрудничества, видим подсказки и окна с дополнительной информацией. Весь этот текст должен быть оформлен лаконично.

Это скриншот с сайта «Икеи». Хороший пример невидимой типографики

Казалось бы, нет ничего проще – взять любой будничный шрифт без излишеств, заполнить им нужные поля и все. Но на практике вылезают всякие проблемы.

Представьте, что последняя строчка в тексте «Икеи» могла состоять из одного слова на три-пять букв. Такой дизайн был бы гораздо хуже. Совсем адская путаница – несколько текстов с «висячими» строчками на странице. Но в «Икее» умудрились сделать их вот такими ровными.

Поскольку блоки тут не имеют жестких границ, в «Икее» расставили переносы на новые строки на свое усмотрение, а не автоматические. Поэтому мы видим небольшие неровности слева и справа по ходу всего текста, но они теряются в общей картине. А висячих строк нет.

Когда блоки имеют более жесткие границы или текст начинается от правого края, пробелы посреди абзаца могут получиться большими и некрасивыми. Тогда экспериментируют с межбуквенным интервалом: сужают его или растягивают.

Также обратите внимание на подзаголовки на примере от «Икеи»: у нас целых 4 варианта размера текста! Это много и обычно так делать не рекомендуют. Но в данном случае идея работает, потому что вокруг много пустого места, а гарнитура шрифта не меняется.

Смотрим на другой скриншот:

Тут очень много разных приемов используют. Из минусов – одинокое слово на последней строке. Но оно длинное, поэтому глаз не режет

Итак, здесь взяли оранжевый цвет на белом. На бумаге он мог быть бледноват, а в цифре хорошо читается за счет яркости монитора. Подсветкой обозначают выбранную категорию, потому что иначе ее никак не выделить – жирный шрифт и подчеркивания уже задействованы в тексте.

На основе одной гарнитуры здесь дробят информацию на кучу смысловых единиц:

  • Категории, написанные мелко – для транспорта вообще и для аэроэкспресса в частности.
  • Заголовок – большой и жирный, есть названия станций – жирные и средних размеров.
  • Основной текст – средних размеров и средней жирности.
  • Кнопки – тоненькие буквы в рамочке.

Все задействованные инструменты позволяют очень кратко донести до пользователя нужную информацию.

Маркеры узнаваемы и не путаются, когда человек переходит на другие страницы: текущая категория будет желтенькой, посреди текста ключевые слова – жирными. Предсказуемость и единообразие – важное правило типографики. И чем больше вам нужно уместить на страницах, тем меньше поля для творчества.

В фирменных стилях типографика уж точно не может быть невидимой – иначе такой бренд никто не разглядит. Для логотипа и слогана нужны яркие узнаваемые надписи. Они могут дополнять картинку на логотипе или вовсе заменять ее. Давайте смотреть на хорошие примеры и приемы, использованные в них.

В логотипе Harper’s Bazaar с антиквой нового стиля взяты прописные буквы: это хорошо работает для узнаваемого заголовка, потому что слово короткое.

Пример кернинга, который я вам обещала: расстояния между двумя “A” и “R” вообще нет, они сдвинуты и их засечки сливаются. Но на первый взгляд даже не видно их объединения, между буквами много воздуха из-за тонких штрихов

Следующий логотип совсем другой по характеру: тут у нас жирный узкий гротеск с едва намечающимися засечками (так бывает, ничего страшного). Буквы примыкают друг к другу вплотную, демонстрируя мужской характер.

Нетипичный элемент – точка. Обычно их в логотипах не ставят. Здесь она имеет дополнительное эмоциональное воздействие и не мешает композиции – у “T” сбоку как раз есть лишнее пустое место

Другой технологичный геометрический логотип с широкими буквами:

Здесь интересно посмотреть на расстояния между буквами: оно совсем маленькое между “C” и “A” и гораздо больше между “I” и “O”. Единственная тонкая буква совсем не читалась бы, если бы стояла вплотную к другим

Скрипт в логотипе:

Читать это очень тяжело, если не знать название компании. Зато есть эмоция – перед нами явно что-то теплое, нежное и домашнее

У Bosch пример шрифтовой пары из двух гротесков: толстые увесистые буквы для логотипа и легкие тонкие – для слогана.

Жирный шрифт представлен в красном цвете, он сравнительно светлый. Тонкие буквы черные. Так достигается баланс

Очень часто именно устаревший шрифт указывает на возраст логотипа. И именно с типографикой в первую очередь экспериментируют компании, решившиеся на ребрендинг. Давайте взглянем на интересные недавние ребрендинги, а заодно выделим критерии, отличающие современные надписи от старомодных.

Посмотрим на Android. В самой компании прокомментировали, что цель ребрендинга – улучшение читабельности.

Теперь у них простой черный шрифт с маленькой головой кибермонстра

Следующая – Lamoda. Шрифт “la” слева уже кажется устаревшим. И всегда казалось, что эта “la” визуально падает со строки, но это было как-то неявно и небрежно.

Антикву полностью заменили гротеском, стало гораздо веселее и современнее. А наклон букв теперь – полноценная фишка логотипа

«Связной» объединился с «Евросетью» и тоже провел ребрендинг.

Упростили цвета и шрифт, оставили характерный акцент на «Й»

«Касперский» изменился в сторону минимализма: прошлый логотип кажется несовременным от своей сложности и острых углов.

Теперь – модный дружелюбный шрифт с округлыми формами. Перепады между высотой букв убрали, слово умещается в узкую полосочку

Тонкие буквы, как и объемные, уже не в тренде. Других проблем в старой версии Yahoo было много: “Y” немножко выпрыгивает из строки, разница “O” бросается в глаза, восклицательный знак будтно случайно наклонен. Слишком много эффектов, которые недостаточно ярко выражены.

Из всех украшений решено было оставить одно – восклицательный знак – и усилить его наклон. А шрифт снова упростили и смягчили линии

Последний пример – ребрендинг «Союзмультфильма». Форму букв незначительно изменили (более выраженный штрих сверху у «Ф», более узкая «М»), цвета подправили, но главное – убрали черный контур.

Надписей с обводкой в современных фирменных стилях почти не встретить – без нее буквам легче дышится. И шрифтовая композиция в квадрате удачная, потому что слово по современным меркам неприлично длинное

Итак, по примерам легко понять, какие надписи сейчас кажутся современными. Это лаконичные и легко читаемые буквы, чаще с мягкими формами. От излишеств, сложных градаций шрифта и эффектов компании отказываются – делают максимально чистые композиции с понятными акцентами.

Если вы не знаете, как подступиться к оформлению текста, или устали ругаться с дизайнером, который отказывается верстать книгу в «Фотошопе», этот раздел для вас. Прежде всего, скажу, что «Фотошоп» - адски неудобная штука для оформления текста. Работать с ним можно, но только если надо написать пару предложений.

Мне даже пару предложений удобнее писать в Adobe Illustrator. Он подходит для небольших текстов на одну страничку. Если вдруг надо что-то длинное, лучше подойдет Indesign – там можно задать единые параметры, которые для всего текста будут сохраняться. Вам не придется настраивать все поля, отступы и колонки вручную. И, конечно, «поиграть со шрифтами» можно в Figma – особенно, если вам нужны надписи в интерфейсе.

Если полный спектр возможностей редактирования вам не нужен, а просто надо прилепить красивую надпись на картинку, можно поработать в Crello. Там много кириллических версий шрифтов. Онлайн-редакторов для работы с латиницей и вовсе целое море, можно тыкать в первый попавшийся.

На просторах интернета есть сервисы для подбора шрифтовых пар автоматически. Эту опцию предлагает Canva. Но вы можете потом не найти рекомендованный шрифт в кириллической версии. Схожая опция есть на Google Type. В нем еще можно бесплатно скачивать шрифты.

Скачивать много где можно. Например, русифицированный каталог Allfont или Font Online. Да и «Гугл» без труда найдет любой шрифт, существующий в природе. Возможно, платный, только на латинице или с ограниченным набором начертаний. Поэтому стоит сразу проверить, чтобы не скачивать кучу бесполезных файлов.

Специалисты Texterra могут помочь вам решить любые дизайнерские задачи: от разработки фирменного стиля с подбором подходящего шрифта до дизайна интерфейсов, презентаций и печатной продукции. Обращайтесь за консультацией!

Читайте также:

Роль акцентов в дизайне интерфейса: 12 способов выделить главное

Зачем вашей компании нужен свой шрифт – кейс инжинирингового центра

Шрифты для сайта. Топ-21

Поделиться статьей:

Новое на сайте

9 окт 2024
45 521
100 тысяч в месяц на играх – опыт российских геймеров и тестировщиков

14 способов заработать деньги на игровой индустрии.

9 окт 2024
147
Где открыть бизнес – подскажет Геоаналитика на картах Яндекса

Этот сервис будет очень полезен для бизнеса. И при этом он бесплатный.

9 окт 2024
4 343
Что использовать вместо Zoom, Skype, Teams, Discord

Отечественные сервисы не хуже, просто не раскручены. Расскажем, чем заменить, например, Discord.

Смотреть все статьи

У вас есть деловой запрос? Давайте обсудим!

Оставьте свои контакты, мы свяжемся с вами в ближайшее время.

Нажимая на кнопку «Оставить заявку», вы подтверждаете свое согласие на обработку пользовательских данных

Спасибо!

Ваша заявка принята. Мы свяжемся с вами в ближайшее время.