Что такое Типография? Полное руководство

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

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

Гарнитура или шрифт: в чем разница?

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

Шрифт

Гарнитура относится к семейству наборов функций для букв и других символов. Шрифт определяет общие атрибуты, такие как наличие (или отсутствие) засечек.

Шрифт

Шрифт — это определенный набор функций внутри семейства шрифтов. Например, вес, наклон, курсив и размер.

Например:

• GT Haptik — это шрифт.

• GT Haptik Light Oblique 24 pt. является шрифтом.

• Свет относится к весу. Косой относится к углу. И 24 пт. это размер.

Классификация шрифтов

Самые ранние шрифты назывались Blackletter и использовались Иоганном Гутенбургом на первом печатном станке в 1440 году. Он быстро стал стандартом. Хотя позже в том же столетии Николас Дженсон понял, что более простые и обтекаемые формы букв позволят разместить больше текста на одной странице.

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

Эти изменения были одними из первых, внесенных в шрифты, и привели в движение все еще активное искусство.

В этом разделе будут рассмотрены 4 основные классификации шрифтов.

• с засечками
• Без засечек
• Скрипт
• Моноширинный

с засечками

Ранние шрифты по-прежнему несут в себе влияние предварительно подвижных инструментов для машинописи. Например, на шрифты с засечками повлияла обработка камня, именно так изначально были созданы эти ранние символы. Эта практика создает маленькие «ножки» на концах символов.

Засечки старого стиля (15-18 века)

Засечки старого стиля были разработаны типографами эпохи Возрождения в 15 веке. Они заменили шрифты Blackletter, которые были разработаны в рукописном каллиграфическом стиле, и многие из их буквенных форм до сих пор сохраняют свое влияние от штрихов, нарисованных пером.

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

Примеры: Гарамонд. Буклеттер Гауди 1911 . Палатино.

Переходные засечки (18 век)

По мере развития 18 века методы печати становились все более изощренными. Гарнитуры, созданные в этот период, известны как переходные засечки.

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

Примеры: Баскервиль. Таймс Нью Роман.

Современный шрифт с засечками (конец 18 века)

Шрифты становятся еще более изысканными и подробными по мере развития 18 века. Это связано с дальнейшим развитием процесса печати.

Характеристики включают засечки, которые являются полностью прямыми и плоскими и обладают полностью вертикальным напряжением. Контраст между толстыми и тонкими мазками также чрезвычайно высок.

Примеры: LTC Бодони 175.

Без засечек

Sans происходит от французского корня, означающего «без». Итак, sans serif буквально означает «без засечек». Эти шрифты были впервые использованы в пятом веке до нашей эры, но первый печатный шрифт в этом стиле был создан Уильямом Каслоном в 18 веке. Сначала они считались неформальным стилем, но их чистый, минималистичный и современный вид превратил шрифты без засечек в невероятно универсальные инструменты.

Гротеск (20 век)

Стиль гротеск был коммерчески популярен в начале 20 века. Некоторые общие черты включают средний контраст между толстыми и тонкими штрихами и открытые промежутки апертуры в символах, таких как строчные буквы a и e.

Пример: Акзиденц-Гротеск.

Нео-гротеск (20 век)

Шрифты Neo Grotesque были результатом того, что дизайнеры предпочли чистые, разборчивые шрифты без засечек. Это привело к тому, что большая часть характера и индивидуальности шрифтов была удалена. Символы имеют одинаковую толщину без контраста между толстыми и тонкими.

Пример: Гельветика.

Гуманист (20 век)

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

Примеры: Открытый Санс. Кантарелл.

Скрипт

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

Формальные сценарии обычно основаны на буквенных формах 17 и 18 веков, часто имитируя перо или кончик пера.

Казуальные сценарии отличаются более активной рукой и, несомненно, менее красноречивы. Эти шрифты начали появляться в начале 20-го века.

Моноширинный

Также известный как шрифт с фиксированным шагом, фиксированной шириной или непропорциональный шрифт, это шрифты, в которых символы занимают одинаковое пространство по горизонтали.

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

Пример: Курьер Новый

Когда я должен использовать какой?

Засечки

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

Без засечек

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

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

Скрипт

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

Моноширинный

Программисты предпочитают моноширинные шрифты из-за связанной с ними удобочитаемости.

Сопряжение шрифтов: как найти совпадение

В то время как эффективность шрифта связана с такими проблемами, как удобочитаемость и эстетика, комбинации шрифтов требуют таких проблем, как иерархия и контраст, в дополнение к удобочитаемости и эстетике.

При работе над проектом вам почти наверняка придется совмещать шрифты. Итак, резонно спросить: что мне искать в паре? Насколько просторны для экспериментов? Как я могу проверить эффективность пары?

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

Используйте суперсемейства.

Хороший способ расширить универсальность шрифтов — использовать суперсемейства. Суперсемейство — это набор шрифтов, созданных для гармоничной совместной работы. Эти шрифты связаны общими характеристиками.

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

Например, Macklin, разработанный Malou Verlomme и предлагаемый Monotype Studio, включает в себя sans, slab, text и display. Это доказывает, что хорошо сконструированная суперсемья может в одиночку разработать макет журнала или газеты.

Пример стилистического разнообразия некоторых шрифтов хорошо представлен в таком шрифте, как Aeonik, выпущенном через CoType в 2018 году. Aeonik предлагает 7 различных начертаний (воздушный, тонкий, средний, обычный, полужирный и черный), и все они могут быть изменены. выделено курсивом. Это означает, что с одним шрифтом в вашем распоряжении 14 разных личностей.

Используйте иерархию.

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

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

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

Не нужно думать «О, вау, какой классный шрифт», когда видишь основной текст. Если только они не фанаты типографики. Содержание должно быть ядром сообщения.

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

Контраст, а не столкновение.

Сопряжение шрифтов — это поиск черт, которые дополняют друг друга.

Простая отправная точка при экспериментировании с комбинированием шрифтов — смешивание одного шрифта с засечками и одного шрифта без засечек. Хотя экспериментирование является ключевым, есть несколько проверенных и верных практик. Например, использование шрифта без засечек для заголовка с засечками в качестве основного текста.

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

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

Используйте шрифты с одинаковой высотой x.

Еще одно полезное практическое правило для поиска шрифтов, которые хорошо сочетаются друг с другом, — использование шрифтов с одинаковой высотой по оси X. X-высота относится к высоте нижнего регистра x для шрифта. Шрифт с этим также имеет тенденцию хорошо сочетаться. Не забудьте проверить это на глаз, так как это не надежная теория. Кроме того, некоторые пары шрифтов, которые не имеют совпадающей высоты x, могут работать вместе при определенных обстоятельствах.

Избегайте двойного сценария.

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

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

Хорошее эмпирическое правило — никогда не комбинировать два рукописных шрифта.

Генераторы шрифтовых пар

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

• Fontjoy.com
• Fontpair.com
• Typotheque.com

Лучшие шрифты для веб-сайтов

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

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

Кернинг

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

Отслеживание

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

Как вес шрифта влияет на удобочитаемость?

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

Шрифты для веб-сайтов: убрать засечки?

Давний типографский миф утверждает, что шрифты с засечками улучшают читаемость при печати, а шрифты без засечек лучше подходят для цифрового экрана. В этом есть доля правды. Засечки могут повысить читаемость больших объемов текста за счет направления «ножек», ведущих взгляд от одного символа к другому.

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

Самые разборчивые шрифты для веб-дизайна

Грузия

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

Гельветика

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

зыбучие пески

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

Футура

Некоторые шрифты неявно универсальны. Futura — один из таких шрифтов. Воплощая дух Баухауза начала 20-го века, Futura появилась на сцене, выглядя невероятно современно. Сегодня он выглядит так же современно, как и прежде.

Монтсеррат

Montserrat — хороший выбор для создания простого веб-дизайна. Он имеет более заметный характер, чем Helvetica или Arial, но остается одним из самых простых для чтения шрифтов.

Таймс Нью Роман

Многие из нас пришли к выводу, что Times New Roman является шрифтом по умолчанию. Для печати и веб-документов. Несмотря на небольшую высоту x, это по-прежнему один из самых читаемых шрифтов.

Тахома

Тахома — гуманист сам по себе. Как и другие шрифты в этом списке, он был создан для доступности на экране. Фактически Tahoma был шрифтом по умолчанию во всех Windows 2000 и XP. Его сила в качестве меню и шрифта интерфейса.

Открытый Санс

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

Типографская иерархия

Что такое типографская иерархия?

Типографская иерархия — это система, которая использует типографику — размер, шрифт и макет — для создания иерархии, которая показывает пользователям, где искать определенную информацию.

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

Фирменные шрифты: выбор правильного шрифта для вашего бизнеса

Вы когда-нибудь судили о бренде исключительно по его логотипу? Если ваш ответ да, вы не одиноки. В конце концов, логотип предприятия — его самый важный визуальный актив. Узнаваемость бренда, надежность, авторитетность и многие другие атрибуты зависят от одного этого дизайна.

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

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

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

Массимо Виньелли прямо назвал свои пять шрифтов: Futura, Helvetica, Times New Roman, Bodoni и Century.

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

Некоторые популярные шрифты для дизайна логотипа

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

ITC Авангард Готика

Avant-Garde Gothic — геометрический шрифт без засечек, разработанный Хербом Любалином и Томом Карнасом. Первоначально он использовался в журнале Avant-Garde, который выходил с января 1968 года по июль 1971 года. С тех пор он нашел свое место в дизайнерском репертуаре бесчисленных фирм.

Бренды, которые его используют:

• Адидас
• Блумингдейл
• Мэйси
• Мобильный
• Нутелла
• Биллабонг
• Элемент

Футура

Еще один геометрический шрифт без засечек, вошедший в анналы истории словесных знаков, — это Futura. Первоначально разработанный как вклад в проект «Новый Франкфурт», компания Bauer Type Foundry разработала его в 1926 году. Он опередил свое время, когда был впервые опубликован, и сохранил свою современную эффективность почти 100 лет спустя. Вот некоторые предприятия, которые согласны!

Бренды, которые его используют:

• Лучшая покупка
• Домино
• FedEx
• GoFundMe
• Найк

Гельветика

Helvetica была разработана Максом Мидингером и опубликована Linotype в 1957 году. Она была названа «эталонным гротескным шрифтом» и считается неподвластным времени основным продуктом графического дизайна. За прошедшие годы было разработано несколько вариантов, в том числе разного веса, ширины и размеров. Его твердая геометрическая простота делает его одним из лучших шрифтов для логотипов. Бесчисленные бренды полагались на гладкую непосредственность Helvetica.

Бренды, которые его используют:

• американская одежда
• Джип
• LG
• Панасоник
• Цель

Худшие шрифты: чего следует избегать в шрифте

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

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

Вот лишь несколько шрифтов, которые легко не нравятся каждому дизайнеру:

Керлз

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

Это причудливо, ярко и дерзко. Люби это. Но если вы хотите, чтобы вас воспринимали всерьез, не поддавайтесь искушению использовать этот шрифт. Разработанный Карлом Кроссгроувом и Стивом Маттисоном для Agfa Monotype, Curlz претендует на известность только благодаря своему статусу, занявшему второе место в номинации «Наиболее вероятно, что можно найти в книге доктора Зюсса» конкурса, который я придумал. Следующий.

Влияние

Если с этими записями и возникает тенденция, то, вероятно, она примерно такая: шрифты по умолчанию в программах для обработки текстов в середине 2000-х. С точки зрения 8-летнего ребенка Impact был в большом почете. Это был шрифт, к которому вы тянулись, когда не бездельничали. Когда нужно было что-то привлекающее внимание. Что-то серьезное. И это только это. Аура, исходящая от Impact, — это «восьмилетний ребенок, который не бездельничает».

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

Comic Sans

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

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