Следующая статья поможет вам: Учебное пособие по типографике для начинающих: все, что вам нужно для изучения основ типографики
Как и многие из вас, я обученный маркетолог и больше дизайнер “сделай сам”.
Конечно, я прочитал и узнал несколько приятных трюков с PowerPoint и Photoshop, которые очень помогли мне в моей работе по контент-маркетингу. Но я действительно хотел вывести свои дизайнерские навыки на новый уровень.
Поэтому я спросил всех своих друзей-дизайнеров, каким должен быть мой следующий шаг, и каждый сказал, что нужно пройти курс типографики.
Почему типографика? Оказывается, хотя важность типографики часто упускается из виду, она играет роль в укреплении вашего бренда, создании интереса к вашему продукту и подчеркивании вашего основного сообщения. Зная это, я решил записаться на курс типографики в Массачусетский колледж искусств и дизайна. Не мешало бы научиться отличать хороший шрифт от плохого, верно?
Я узнал гораздо больше, чем это. Я понял, что внимание даже к мельчайшим деталям шрифта может иметь огромное значение, когда вы размещаете электронное письмо, электронную книгу или изображение для социальных сетей.
Вот почему я хотел написать этот пост: поделиться наиболее важными знаниями и ресурсами с моими коллегами по маркетингу.
Так что вы скажете? Готовы ли вы поднять свои навыки проектирования своими руками на новый уровень? Давайте начнем.
Щелкните заголовок раздела ниже, чтобы перейти к этому разделу:
Что такое типографика?
До прохождения этого курса типографика — по крайней мере для меня — была скорее искусством прокрутки выпадающего меню, пока я не нашел шрифт, который выглядел так, как будто он работает. Но оказывается, это намного больше.
Типография искусство и техника аранжировки шрифта, введите значащие буквы и символы.
Обратите внимание, что речь идет не только о букв и символов; расположение этих букв и символов является такой же важной частью всего этого. Это относится к выбору кегля, длины строки и интервала как в одной строке, так и на всей странице или во всей работе.
Чтобы понять, где важность аранжировки приходит, мне нравится вспоминать печатный станок Иоганна Гутенберга. В какой-то момент люди практиковали типографику с использованием печатных материалов, то есть буквально брали буквы и символы и располагали их в физическом пространстве.
Сегодня, благодаря компьютерам, шрифтам с открытым исходным кодом и масштабируемой компьютерной типографике, расположить буквы и символы стало намного проще. Но эта физическая часть остается важной даже в цифровой сфере.
Почему типографика важна?
Типографика есть абсолютно везде. Просто взгляните на свой телефон, рекламный щит, кофейную чашку или даже на различные стили, использованные в этом блоге. Каждый шрифт, буква и расположение символов играет роль в определении как передается сообщение.
Конечно, может иногда кажется тривиальным, но даже минимальные корректировки шрифта могут повлиять на внешний вид вашей работы. Например, еще в июне Facebook протестировал новый шрифт на своих пользователей под названием Женева. Хотя новый шрифт был лишь немного тоньше и легче, чем оригинальный, Helvetica, для некоторых он имел заметное значение.
«Общий эффект — более светлый, более современный блок текста», — пояснил Крис Миллс для BGR.
То же самое касается, когда Apple изменил шрифт по умолчанию от чрезвычайно тонкой Helvetica Neue до разработанной ими внутри компании под названием San Francisco.
«Различия между Helvetica и San Francisco неуловимы даже для опытного глаза, но они есть». написала Лиз Стинсон для «Несмотря на строгий шрифт без засечек, Сан-Франциско смелее и дружелюбнее, чем Helvetica Neue. Основанный на немецком шрифте DIN, Сан-Франциско дает символам больше пространства для передышки, что облегчит чтение на относительно крошечных мобильных экранах. Сан-Франциско занимает мало места, как пользовательский шрифт Google Roboto, который можно считать близким родственником Appleшрифт.”
Вынос здесь? Маленькие детали имеют значение.
Фактически, один из немногих курсов колледжа Стив Джобс сосредоточился на каллиграфии и типографике, которые, по его мнению, сыграли решающую роль в успехе Apple. Как он однажды сказал в вступительной речи Стэнфордского университета, «Если бы я никогда не заглядывал на этот единственный курс в колледже, у Mac никогда не было бы нескольких шрифтов или шрифтов с пропорциональным интервалом». Можете ли вы представить себе мир, в котором Apple продукты не делали упор на красивый дизайн? Я точно не могу.
Как только вы осознаете, как много мыслей уходит на тщательный выбор шрифта, становится намного легче распознавать различия между шрифтами и понимать, почему они могли быть выбраны в первую очередь. Взгляните на некоторые из приведенных ниже примеров, чтобы лучше понять, что я имею в виду…
Готовы перейти к терминологии типографики? Пойдем.
Определения и термины типографики
Гарнитуры против шрифтов
Если вы думали, что эти два слова взаимозаменяемы, вы не одиноки. Но на самом деле они означают две разные вещи.
Типограф Ник Шерман когда-то использовал отличная аналогия объяснить разницу между терминами «гарнитура» и «шрифт». Он предложил сравнить эти типографские термины с музыкальными терминами «песня» и «mp3». Когда вы объясняете, насколько вам нравится та или иная мелодия, вы говорите: «Мне нравится эта песня!» Вы же не скажете: «Мне нравится этот mp3!» Песня — это произведение искусства, а mp3-файл — всего лишь средство доставки.
Те же правила применяются и в типографике. Вам следует используйте слово «шрифт» при описании творческой работы (то есть того, что вы видите). Это более абстрактный дизайнерский термин, используемый для обозначения того, как выглядит или ощущается конкретная коллекция. Например, Helvetica — это шрифт.
Если вы описываете физическое воплощение набора букв и символов, вам следует использовать термин «шрифт». Это относится к тому, что вы используете — будь то файл на вашем компьютере или коробка, полная металлических букв. Это материальное представление этого набора букв и символов. Например, Helvetica Bold и Helvetica Light Oblique — это шрифты.
Вот как можно использовать эти два термина в предложении:
Анатомия шрифта
яэто намного проще общаться с дизайнерами, когда вы на самом деле говорите на их языке, поэтому это важно понять анатомия шрифта.
Каждая часть буквы имеет свой особый термин, подобный костям в человеческом теле. Ниже вы увидите три схемы, которые объясняют состав отдельных букв, как эти элементы взаимодействуют друг с другом и как они располагаются на линии.
Например, возьмем со словом «Неисправность», как показано на картинке ниже.
Вот как определяется каждый из терминов:
- Исходный уровень: Строка, на которой сидят буквы.
- Высота крышки: Расстояние от базовой линии до вершины заглавной буквы.
- X-высота: Расположенный между базовой линией и высотой прописной буквы, это высота тела строчной буквы. (В данном случае это буквы «а», «у» и «у».)
- Чаша: Изогнутая часть символа, заключающая в себе круглые или изогнутые части некоторых букв, например «d», «b», «o», «D» и «B». (В данном случае это круглая форма, торчащая из буквы «а».)
- с засечками: Небольшой выступ, завершающий штрих буквы в определенных шрифтах. (В данном случае это маленькая ножка, торчащая из буквы «л».)
- Спусковой механизм: Самая длинная точка буквы, выходящая за базовую линию.
Теперь давайте посмотрим на слово «вспышка»:
Вот как определяются эти термины:
- Лигатура: Штрих, соединяющий соседние буквы. (В этом случае вы заметите, что буквы «f» и «l» сливаются вместе, образуя один символ.)
- Корень: Основание буквы похоже на стебель цветка.
- Позвоночник: Пышное тело буквы «с» — и только буквы «с». У него есть собственный термин, потому что корешок может быть почти вертикальным или почти горизонтальным, в зависимости от шрифта.
- Восходящий: Часть буквы, которая выступает над средней линией шрифта, т. е. выше x-высоты шрифта. (В этом случае вы также заметите, что буква «h» на самом деле выше, чем x-высота.)
Все еще со мной? Просто еще несколько здесь. Давайте посмотрим на слово «Говядина»:
Вот как определяются эти термины:
- Перекладина: Полоска, которая проходит внутри буквы и соединяет одну сторону с другой. (В данном случае это черта внутри заглавной буквы «Б».)
- Прилавок: Пустое пространство в середине букв, таких как «В», «О» или «А».
- Финал: Конический конец букв, таких как «е» или «с».
- Терминал: тип кривой, которую вы видите в верхней части буквы «f» или в конце буквы «j».
Хорошая работа. Теперь, когда вы знаете анатомию форм букв, давайте рассмотрим термины, связанные с интервалами: кернинг, трекинг, интерлиньяж и иерархия.
Кернинг
Кернинг — это изменение пространства между двумя буквами. Например, взгляните на изображение ниже:
Здесь я использовал Franklin Gothic Medium, чтобы продемонстрировать естественное пространство, которое вы видите между двумя буквами T. Это выглядит слишком уютно, не так ли? Настроив интервал между этими двумя буквами, вы сможете улучшить читаемость.
Отслеживание
Подобно кернингу, отслеживание связано с изменением межбуквенного интервала. Однако вместо регулировки интервала между двумя буквами отслеживание — это корректировка интервала между всеми буквами всего слова. Смотрите разницу ниже:
Для этого примера я решил сделать экстремальную настройку отслеживания. Как правило, вы хотите применять отслеживание небольшими шагами, чтобы избежать проблем с читабельностью.
Ведущий
Помните, в старших классах вам приходилось делать двойной интервал в сочинениях? Что ж, термины «одинарный интервал» и «двойной интервал» также можно назвать «интервалом», то есть расстоянием между базовыми линиями. Увидеть лидерство в действии:
Вы можете увеличить интерлиньяж, создав больше пространства между базовыми линиями, или уменьшить интерлиньяж, что приведет к сближению строк текста. Причина, по которой учителя старших классов просили, чтобы сочинения печатались через два интервала, заключалась в том, что их гораздо легче читать, и им было легче вносить исправления в текст.
Иерархия
Читая этот пост в блоге, вы заметите, что некоторые слова выделяются больше, чем другие. Это то, что дизайнеры назвали бы созданием иерархии. Вы можете использовать разные начертания (жирный, обычный, светлый), стили (курсив) и размеры, чтобы создать ощущение порядка в тексте. Это не только помогает создать удобочитаемый поток, но и помогает читателю увидеть, какие моменты являются наиболее важными.
Вот пример того, как выглядит иерархия:
В большинстве случаев вы хотите, чтобы люди сначала прочитали заголовок. Вот почему вы увидите, что большинство заголовков намного крупнее и жирнее основного текста. Цитаты и описательные предложения также могут выделяться над остальным текстом, используя такие приемы, как выделение жирным шрифтом и курсивом.
При эффективной иерархии читатель должен иметь возможность переходить от одного раздела к другому, чтобы определить наиболее важные моменты.
Записали все эти типографские термины? Прохладный. Давайте перейдем к тому, как типографика организована с классификациями и семействами шрифтов. (Немножко возвращает вас к урокам биологии, не так ли?)
Классификация типов
Две основные классификации шрифтов, которые вы видите, называются с засечками и без засечек. Другие классификации включают шрифты с засечками, шрифты с засечками, шрифты, современные и декоративные шрифты. Давайте начнем с двух наиболее распространенных, а затем коснемся лишь нескольких других, чтобы дать вам представление о том, что они собой представляют.
с засечками
Помните, я указал на маленькую ножку в слове «Неисправность»? Шрифты с такими ножками называются засечками. Вы можете увидеть, где я выделил эти маленькие ножки ниже:
Распространенные шрифты с засечками включают Times New Roman, Georgia и Garamond. Если вы читаете роман, вы можете заметить, что основной текст — это шрифт с засечками. Это связано с тем, что шрифт с засечками намного легче читать в длинных печатных работах из-за различий между буквами.
Без засечек
Во французском языке слово «sans» означает «без». Таким образом, термин «без засечек» буквально означает «без засечек». На изображении ниже вы заметите, что в словах отсутствуют засечки, на что я указал красными стрелками.
Распространенные шрифты без засечек включают Arial, Verdana и Futura. Вы увидите много шрифтов без засечек, используемых в сообщениях блогов и документах в Интернете, потому что они выглядят более современно и отлично смотрятся даже при более низких разрешениях экрана.
Блэклеттер
Шрифты Blackletter, также называемые Gothic, Fraktur или Old English, известны его драматические толстые и тонкие штрихи и сложные завихрения на засечках. Эти шрифты основаны на написании ранних рукописей — на самом деле, черные буквы использовались в Библии Гутенберга, одной из первых книг, когда-либо напечатанных в Европе. До 1500 года они были гораздо популярнее, чем сегодня.
Как вы можете заметить, черные буквы довольно трудно читать, поэтому они обычно не используются для определения типа телосложения. Обычно вы видите их в заголовках, логотипах, плакатах и вывесках — например, на табличках с именами в газетах (логотип, кто-нибудь?) или на заголовках сертификатов, дипломов или ученых степеней. Распространенные шрифты для черных букв включают Cloister Black, Deutsche Zierschrift и Germanica.
Скрипт
Рукописные шрифты основаны на разнообразных и часто плавных штрихах, создаваемых почерком. Как масштабируемые компьютерные шрифты, символы в этих сценариях теперь могут автоматически соединяться друг с другом, поэтому они убедительно имитируют почерк, вместо того, чтобы пользователям приходилось вручную выбирать, какие буквы идут после каких — что, как вы можете себе представить, было кропотливым процессом.
Под зонтиком рукописного шрифта есть две основные классификации: формальные и случайные. Формальные шрифты часто напоминают рукописные формы букв, распространенные в семнадцатом и восемнадцатом веках, и они используются для элегантного дизайна, такого как приглашения и дипломы, а не для основного текста.
Повседневные шрифты или неформальные шрифты — это всего лишь менее формальные шрифты, которые больше похожи на обычный почерк.
Это всего лишь несколько примеры классификаций типов чтобы дать вам представление о том, как они работают. Но, поскольку это запись в блоге, а не курс типографики, давайте перейдем к семействам шрифтов.
Семейства типов
Термин «семейство шрифтов» или «семейство шрифтов» используется для описания ряда дизайнов, которые являются вариациями одного базового шрифта.
Например, вы увидите, что Proxima Nova имеет такие варианты, как полужирный, сверхжирный, черный, обычный, светлый, светлый курсив и обычный курсив:
Придерживаясь одного семейства шрифтов, вы внесете разнообразие в свой дизайн, сохраняя при этом его согласованность и единообразие.
Дизайнеры могут использовать различные шрифты в одном семействе, чтобы создать ощущение иерархии, проектируя таким образом, чтобы наиболее важные элементы, такие как заголовки и цитаты, выделялись над остальным текстом.
Типографские шрифты
Прежде чем мы закончим здесь, я решил оставить вам несколько отличных ресурсов о том, где найти бесплатные шрифты для загрузки из Интернета, а также восемь бесплатно те, которые я выбрал из этих ресурсов, чтобы вы начали.
Отличные ресурсы для бесплатных шрифтов
- «35 лучших бесплатных шрифтов, которые вы должны скачать»: Сообщение в блоге HubSpot, посвященное 35 лучшим бесплатным шрифтам в Интернете.
- Гугл шрифты: Сотни бесплатных шрифтов с открытым исходным кодом от Google, которые уже оптимизированы для Интернета.
- Беханс: Отличный ресурс для поиска красивых дизайнерских работ, включая уникальные шрифты, которые можно загрузить бесплатно.
- HypeForType: Более 25 000 типографских дизайнов от ведущих дизайнеров, многие из которых доступны для бесплатной загрузки.
8 Крутые шрифты, которые можно скачать бесплатно
1) Малиновый текст
Вот один из них, который отлично подходит для основного текста. По словам Гугл шрифты, поэтому легко читается. Но в то же время в нем есть многое, что делает его особенным: цифры в старом стиле, маленькие заглавные буквы, флероны, математические символы и тому подобное. Он доступен в трех стилях — обычный, светлый и полужирный — вместе с курсивом этих начертаний.
2) Харматан
Harmattan — это шрифт на Гугл шрифты на самом деле изначально он предназначался для арабских шрифтов, но он также отлично смотрится на латинских буквах — и будет привлекателен как в заголовке, так и в основном тексте.
3) Торкао
Torcao — это уникальная комбинация букв «половина квадрата, полукруга», прочная и техническая, но в то же время беззаботная и манящая. Это отличный шрифт для заголовков, но он вполне разборчив в длинном тексте. Семейство представлено девятью начертаниями (от тонкого до черного) и имеет как сжатые, так и расширенные варианты для полного набора из сорока восьми шрифтов.
4) Король Василий
Этот бесплатный шрифт кисти размещен на Беханс отлично подходит для коммерческих материалов, таких как изображения в социальных сетях и листовки. Это облегченная версия «Full King Basil» дизайнера, которая содержит множество росчерков и соединительных букв, которые создают красивый шрифт, похожий на сценарий.
5) Мерриуэзер
Шрифт Merriweather был разработан, чтобы его было приятно и легко читать на экране, что делает его идеальным для таких веб-ресурсов, как домашняя страница или блог. Это развивающийся проект на Гугл шрифты и будет обновляться, но прямо сейчас вы найдете четыре стиля — обычный, светлый, полужирный и черный — вместе с курсивом этих начертаний.
6) Пуаре Один
Poiret One — мой давний фаворит. Это описано на Гугл шрифты как «свежий, декоративный, геометрический гротеск с оттенком ар-деко и конструктивизма». Он гладкий, простой, декоративный и отлично подходит для коротких текстов. Попробуйте его на больших вывесках, этикетках, плакатах, футболках, названиях или заголовках.
7) Истинный север
Винтажный шрифт для заголовков из HypeForType с шестнадцатью различными стилями и монострочным шрифтом. Он также включает бесплатные ярлыки и дополнительные функции, такие как дикие животные, цифры, символы, инструменты и другие значки. True North поставляется с этикетками, дополнениями и бесплатными баннерами. Дополнения включают диких животных, лозунги, цифры, символы, инструменты, кленовые листья и деревья. True North — это шрифт для заголовков с альтернативными заглавными буквами.
8) Храбрость
Вот классный бесплатный шрифт, размещенный на Беханс созданный профессиональным создателем шрифтов, который был достаточно любезен, чтобы сопровождать бесплатную загрузку макетами ниже. Эти макеты показывают людям, как они могут играть со шрифтом в своих собственных проектах. Он состоит только из заглавных букв и цифр и отлично подходит для заголовков или изображений в социальных сетях, таких как приведенные ниже.
Конечно, всегда есть чему поучиться, когда дело доходит до типографики. Когда графические дизайнеры получают диплом, им обычно приходится пройти несколько курсов типографики, чтобы стать профессионалом.
Но теперь вы знаете несколько ключевых терминов, с которых можно начать, и, по крайней мере, вы сможете выглядеть очень умно, разговаривая со своими друзьями-дизайнерами.
Хотите больше советов по типографике? Прочтите этот пост о взаимосвязи между шрифтами и ощущениями.