процесс выбора шрифта / Хабр

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

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

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

Определите свою цель

Прежде всего, определите цель, которую преследует ваш дизайн. Какую информацию вы хотите передать? В каком формате?

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

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

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

Очертите свою аудиторию

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

Например, некоторые шрифты больше подходят для младшего возраста. Детям, которые только учатся читать, нужны очень разборчивые шрифты с чёткими контурами букв. Хорошая иллюстрация к этому — Sassoon Primary. Sassoon Primary — проект Rosemary Sassoon, в основе которого лежат её исследования на тему того, какие шрифты детям проще всего считывать.

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

При выборе шрифта учитывайте особенности и потребности своей целевой аудитории. Говоря проще, ставьте себя на их место.

Ищите вдохновение

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

Вдохновение: шрифты

За свежими идеями насчет шрифтов можете обратиться к The 100 Best Free Fonts от CreativeBloq — это отличный источник, который придаст вам нужный настрой. В своей статье CreativeBloq объясняет логику, которой они следовали при выборе каждого из шрифтов.

Другой полезный ресурс — 100 Greatest Free Fonts Collection for 2015 от Awwwards.

Кроме того, Invision составил целый огромный репозиторий с ресурсами по типографике. Там вы найдёте массу источников для вдохновения.

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

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

Вдохновение: сочетания

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

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

FontPair — еще один ресурс о том, как лучше выбирать сочетания, предназначенный конкретно для работы с Google Fonts. На ресурсе предусмотрена возможность сортировки по сочетаниям стилей (например, sans-serif и serif или serif и serif).

И наконец, в Сети полно наборов готовых сочетаний от профессиональных дизайнеров. Скажем, Typography: Google Fonts Combinations или Typography: Google Fonts Combinations Volume 2. Просто вбейте запрос «font pairing» на Behance, Dribble и других подобных сайтах.

Выберите шрифт

Теперь, когда вы теоретически подкованы и запаслись вдохновением, можно приступить к выбору. В процессе отбора помните о трёх принципах: читабельность, разборчивость, цель.

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

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

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

Для веб-шрифтов можно использовать Google Fonts, Typekit, и Font Squirrel. На Google Fonts всё бесплатно, Typekit и Font Squirrel предлагают платные и бесплатные варианты.

Задайте размер

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

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

Golden Ratio (1:1.618)

1.000 x 1.618 = 1.618

1.618 x 1.618 = 2.618

2.618 x 1.618 = 4.236

4.236 x 1.618 = 6.854

6.854 x 1.618 = 11.089

Одна из проблем, с который вы можете столкнуться — это то, что с какие-то соотношения слишком велики. Смотрите, что получается, если продолжать со шкалой на базе золотого сечения:

Golden Ratio (1:1.618)

…

11.089 x 1.618 = 17.942

17.942 x 1.618 = 29.03

29.030 x 1.618 = 46.971

46.971 x 1.618 = 75.999

75.999 x 1.618 = 122.966

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

Minor Second 15:16

Major Second 8:9

Minor Third 5:6

Major Third 4:5

…

Поэтому вместо золотого сечения вы можете использовать другое соотношение, которое даст меньшие интервалы, например, Perfect Fourth.

Perfect Fourth (3:4)

…

9.969 x 1.333 = 13.288

13.288 x 1.333 = 17.713

17.713 x 1.333 = 23.612

23.612 x 1.333 = 31.475

31.475 x 1.333 = 41.956

41.956 x 1.333 = 55.927

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

Font Sizes

Header 1: 55px

Header 2: 42px

Header 3: 31px

Header 4: 24px

Header 5: 14px

Body: 17px

Caption: 14px

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

Создайте библиотеку стилей для шрифтов

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

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

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

Обязательно включите в библиотеку стилей следующее: типы шрифтов, цвета, размеры и образцы. Таблица стилей от Google’s Material Design typography— хороший пример того, как её составлять. Также как пособия можно использовать библиотеки стилей от Mailchimp, Apple, и Focus Labs.

Типографика — это область экспериментов, искусство и наука в одном флаконе. Я призываю вас выйти из зоны комфорта и активно исследовать все возможности.

основные понятия и современные тренды

“Веб-дизайн — это 95% типографики”, — сказал основатель компании Information Architect Оливер Райхенштейн. Так оно и есть: без качественной типографики ваш сайт будет неудобным для восприятия. В этой статье разберем основные виды типографики и современные тренды. Поехали!

Что такое типографика и зачем она нужна

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

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

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

1. Чем проще — тем лучше. Даже если появилось множество новых интересных шрифтов, эмодзи, анимаций — не нужно использовать все их сразу. Сайт будет аляпистым и совершенно не стильным.
2. Сайт должен быть читабельным. Если выбирать между оригинальностью идеи и удобством для посетителя — любой веб-дизайнер не раздумывая выберет второе.
3. Главное должно отличаться от второстепенного. Хорошая типографика сразу показывает, что тут самое важное, а что нет. Если элементы сайта спорят между собой и взгляд посетителя мечется, не зная, что выбрать — значит, типографика хромает.
4. Правило золотого сечения. Мы уже писали о нем в статье про основные правила веб-дизайна. Если кратко — это деление элементов страницы сайта на пропорции в соотношении 3/2, или 5/3, и так далее. Чаще всего по этому принципу определяется соотношение рекламных блоков и текста.
5. Текст важнее. Графика должна не перетягивать одеяло на себя и отвлекать от контента, а дополнять его и привлекать к нему внимание. Текстовая информация чаще важнее, чем картинки — а значит, графика должна быть на службе у контента, а не наоборот.
6. Помните о гармонии. Не только в музыке она есть, как пелось в одной известной песне. На сайте все должно быть выполнено приятно глазу, гармонично и естественно. Хотите проверить? Просто дайте оценить сайт любому знакомому: пусть посмотрит свежим взглядом и выскажет честное мнение.

Основные понятия типографики и как их применять

О шрифт, ты — мир!

История шрифтов в типографике заставляет задуматься. На заре веб-дизайна считалось крутым использовать необычные шрифты по принципу “чем чуднее — тем моднее”. Со временем появилась тенденция к упрощению: сейчас предпочтение отдается простым крупным шрифтам. И обязательно читаемым.

Приведем несколько основных правил использования шрифтов на сайте:

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

Например, хорошо сочетаются шрифты Georgia и Verdana — они визуально похожи и гармонично дополняют друг друга. Шрифты Baskerville и Impact, напротив, имеют разную ширину символов, и второй просто “убивает” первый.

2. Используйте стандартные шрифты. Если ваш веб-дизайнер — не суперпрофессионал, лучше не рисковать и выбрать знакомые всем true-шрифты, которые давно зарекомендовали себя. Это, например, системные Arial или Calibri, можно также использовать шрифты Google (это бесплатно) или Adobe Typekit (по подписке) или поюзать онлайн-конструкторы. Вариантов масса!

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

3. Буквы должны читаться! Есть некоторые шрифты, в которых отдельные буквы можно перепутать. Например, I и L в английской раскладке, “н” и “м”, “т” и “ш” — в русской. Особенно сложно бывает читателю, когда еще и расстояния между буквами маленькие. Остерегайтесь таких шрифтов!

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

Искусство цвета

1. Играйте на контрасте. Цвет текста и фона для него должны различаться. Серый на сереньком — так себе тренд. Чем больше бросается в глаза контраст — тем гарантированнее он привлечет внимание пользователей. Чем меньше шрифт, тем более он должен быть контрастным, и наоборот.

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

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

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

Оформление текста

“Крылья, ноги, главное — хвост!” — если перефразировать фразу из культового мультика, то же самое можно сказать и о тексте. Цвет и шрифты, конечно, важны, но оформление текста все же играет главную роль в восприятии сайта посетителем. Рассмотрим современные тенденции оформления текста:

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

2. Форматируйте. Это незыблемое правило: если не хотите, чтобы ваш интересный и полезный текст превратился в одну большую простыню — ставьте заголовки и подзаголовки, не забывайте про маркированные списки. Обязательно выделяйте абзацы — сплошной текст читать просто невозможно. Считается, что оптимальная длина абзаца составляет 3-5 строк.

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

3. Забудьте про капслок! Тренд выделять главное капсом давно умер: сейчас большие буквы воспринимаются как крик и вызывают у читателя лишь негатив. Большие буквы уместны лишь в заголовках, да и то не всегда. Привлекать внимание с помощью капса уж точно не рекомендуется.

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

Эксперты говорят, что оптимальное количество символов на строку — не более 60. Если меньше — читатель будет слишком быстро возвращаться в начало строки и сбивать ритм чтения. Если больше — сложно будет сосредоточиться на тексте: пока подойдешь к концу строки, забудешь о том, что написано в ее начале.

Внимание! Это правило актуально для текстов, которые читаются с ПК. Если речь идет о мобильном устройстве, длина строки должна составлять не более 30-40 символов — больше в экран просто не влезет. Ну вы поняли: адаптивный дизайн — наше все.

5. Следите за межстрочным интервалом. Чем он больше — тем больше воздуха в тексте, тем проще читателю пробираться через слова и символы. Обычно размер интервала должен быть на 30% больше высоты символов. Посмотрите, какая колоссальная разница между первым и вторым примером!

Тренды типографики последних лет

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

Крупная типографика

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

• привлекает и удерживает внимание посетителя. Сложно не заметить крупные шрифты, яркие цвета и особое расположение самого важного текста на странице. На сайте интернет-магазина, например, таким текстом будет призыв к действию, информация о скидках и поступлении новых коллекций. На новостном сайте — самая актуальная в данный момент статья. Большой текст — как неоновая надпись в небе: ну посмотри же на меня, прочитай меня, выбери меня, купи меня;
• вызывает эмоции. Если написать одну и ту же фразу мелким и крупным шрифтом — посетитель стопроцентно отдаст предпочтение второму варианту. Вопрос еще и в том, как написать — если удастся воздействовать на чувства посетителя — велик шанс, что он вернется и станет вашим постоянным посетителем. Если за громким слоганом стоит личность создателя сайта — эффект может быть ошеломительным. Главное — не только сказать, но и кем это сказано;
• позволяет определить главное. Все слышали про эффект баннерной слепоты — когда посетитель бегло сканирует взглядом текст, не задерживаясь на отдельных элементах. Крупный заголовок или рекламный баннер позволяет отделить зерна от плевел и остановить взгляд на самом главном. Заголовок помельче — информация второго уровня важности. Ну и так далее.

Большие шрифты

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

Сломанные сетки

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

Больше движения!

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

Понравилась статья? Обращайтесь в IDBI — мы знаем о типографике все и поможем разработать ваш сайт с учетом новых тенденций.

Лучшие ресурсы по типографике на 2022 год · Typewolf

Учебные ресурсы

Контрольный список безупречной типографики →

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

Элементы типографского стиля в применении к Интернету →

Краткое изложение типографической библии Роберта Брингхерста Элементы типографского стиля и ее применение в Интернете.

Шрифтология →

Полная учебная программа по типографскому искусству в виде рабочей тетради.

История западной типографики →

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

Типовой справочник →

Хороший обзор повседневных типографских задач.

Анатомия шрифта и глоссарий →

Глоссарий общепринятой типографской терминологии.

Typedia →

Энциклопедия шрифтов.

История анимации типографики →

Полная история типографики в 5-минутной анимации бумажных букв.

Литейщики и дизайнеры шрифтов

205TF →

Литейный завод французского типа, основанный в 2017 году.
См. Луизу.

Тип A2 →

Шрифтовая мастерская создана лондонской дизайнерской студией A2/SW/HK в 2010 году.
См. Обычный и Battersea Slab.

АльфаТайп →

Литейный завод итальянского типа, основанный Джозефом Микели в 2006 году.
См. Bianco Sans и Bianco Serif.

Avondale Type Co. →

Литейный завод в Чикаго, основанный в 2013 году.
См. ATC Harris и ATC Ripley.

Тип пламени →

Литейный завод французского типа, основанный Матьё Сальваджио в 2016 году.

Смелый понедельник →

Литейный завод голландского типа, основанный Полом ван дер Лааном и Питером ван Росмаленом в 2008 году.
См. Нитти и Нитти Гротеск.

Тип портфеля Foundry →

Литейный завод в Праге, основанный Томашем Броусилом и Радеком Сидуном.
См. БК Фальстер Гротеск.

Камелот →

Коллектив немецкого типа, созданный Морисом Гёльднером, Катариной Келер и Вольфгангом Шверцлером.
См. Гребенбах.

Колофонный литейный завод →

Литейный завод в Лондоне/Нью-Йорке, основанный в 2009 г..
См. Apercu и Relative.

Коммерческий тип →

Совместное предприятие Пола Барнса и Кристиана Шварца, которые работают вместе с 2004 года. Они публикуют свои собственные шрифты, а также шрифты, разработанные международной командой сотрудников.
См. Publico и Atlas Grotesk.

Далтон Мааг →

Литейный завод, основанный в 1991 году, с офисами в Лондоне и Бразилии.
См. Актив Гротеск и Эффра.

Студия Дарден →

Студия в Бруклине, основанная Джошуа Дарденом в 2004 году.
См. Freight Text и Freight Sans.

Литейный завод дизайнеров →

Коллектив глобального типа, основанный Дэниелом МакКуином в 2012 году.
См. Морион и Гордита.

Динамо →

Литейный завод швейцарского типа, основанный Йоханнесом Брейером и Фабианом Харбом.
См. Фаворит и Гинто.

DSType →

Литейный завод в Португалии, основанный Дино душ Сантушем в 1994 году.
См. Acta Display и Leitura News.

Эмигрант →

Литейный завод американского типа, основанный Руди ВандерЛансом и Зузаной Личко в 1984.
См. Миссис Ивз и Философию.

exljbris Font Foundry →

Нидерландская литейная мастерская шрифтового дизайнера Йоса Буйвенги.
См. Museo Slab и Calluna.

extrabrut.shop →

Типовое подразделение французской дизайн-студии Bureau Brut основано в 2017 году.
См. Траулха.

Fatype →

Литейный завод в Берлине, основанный Антоном Коовитом и Ясином Баггаром в 2012 году.
См. Батон и Бьюзит.

Бюро шрифтов →

Литейный завод в Бостоне, основанный в 19 году.89.
См. Бентон Санс и Миллер.

ШрифтШрифт →

Литейный завод в Берлине, основанный Эриком Шпикерманном и Невиллом Броди в 1990 году.
См. FF Meta Serif и FF Tisa.

Форт Литейный →

Литейный завод в Афинах, штат Джорджия, основан Маттоксом Шулером в 2013 году.
См. Промышленность и отмена смертной казни.

Фостер Тип →

Сиднейская шрифтовая студия Дэйва Фостера.
См. Бланко.

Тип Фрер-Джонса →

Литейный завод в Бруклине, основанный Тобиасом Фрер-Джонсом.
См. Мэллори и Биржа.

Литейное производство хорошего типа →

Литейный завод норвежского типа, основанный Кеннетом Кнутсеном в 2016 году.
См. Adieu и напротив.

Тип решетки →

Литейный завод швейцарского типа, основанный Ноэлем Леу и Тьерри Бланпейн в 2009 году.
См. GT Walsheim и GT Haptik.

Hoefler & Co. →

Литейный завод в Нью-Йорке, ранее известный как Hoefler & Frere-Jones.
См. Готэм и Сентинел.

Домашняя промышленность →

Литейный завод американского типа, основанный Энди Крузом и Ричем Роатом в 1993.
См. Neutraface и Eames Century Modern.

Шрифты HvD →

Типовой литейный завод Hannes von Döhren, основанный в 2008 году в Германии.
См. Brandon Grotesque и Supria Sans.

Литейный завод индийского типа →

Литейный завод в Индии, основанный Сатьей Раджпурохитом и Петером Билаком в 2009 году.
См. Поппинс и Радждани.

Еще одна литейная →

Литейный завод Тима Аренса и Шоко Мугикура, основанный в 2004 году в Германии.
См. Lapture и Facit.

Литейный завод Клима →

Литейный завод Kris Sowersby в Новой Зеландии, основанный в 2005 году.
См. Tiempos Text и Galaxie Copernicus.

Лига подвижного типа →

Литейный завод с открытым исходным кодом, в котором работают сотрудники со всего мира.
См. Raleway and Sorts Mill Goudy.

Письма из Швеции →

Литейный завод шведского типа, основанный Йораном Сёдерстрёмом.
См. плакат Eksell Display и Trim.

Линия до →

Литейный завод швейцарского типа, основанный в 1993.
См. Циркуляр и Аккурат.

Тип Лузи →

Литейный завод швейцарского типа, основанный Лузи Гантенбайном в 2013 году.
См. Бейрут и Буэнос-Айрес.

Марк Симонсон →

Шрифтовой дизайнер из Миннесоты.
См. Проксима Нова и Град.

Милье Гротеск →

Литейный завод в Берлине/Цюрихе, основанный в 2010 году Тимо Гесснером и Александром Колби.
См. Maison Neue и Maison Mono.

Монокром →

Литейный завод норвежского типа, основанный Фроде Бо Хелландом и Синдре Бремнесом.
См. Сатир и Винтер.

Новые письма →

Немецкий литейный завод, основанный Армином Бреннером и Маркусом Джоном в 2015 году.
Смотри Тильду.

Нормальный тип →

Чикагская студия шрифтового дизайнера Джексона Кавано.
См. Хорошо, Санс и Харриет.

Литейный завод Optimo →

Литейное производство швейцарских шрифтов было основано Жилем Гавилле и Давидом Рустом.
См. Тейнхардт и Стэнли.

Или введите →

Исландский литейный завод, основанный Гудмундуром Ульфарссоном и Мадсом Фройндом Брунсе в 2013 году.
См. раздел Сепарат и L10.

Наш тип →

Литейный завод в Бельгии, основанный в 2002 году Фредом Смейерсом.
См. Арнем и Факт.

Литейный завод типа P22 →

Литейный завод в Нью-Йорке, основанный Ричардом Кеглером и Каримой Эль-Бехейри.
См. Метро P22.

Тип воспроизведения →

Литейный завод датского типа.
См. Берлингские засечки.

Тип процесса Литейное производство →

Литейный завод в Миннесоте, основанный Эриком Олсоном в 2002 году.
См. Colfax и Maple.

Тип производства →

Литейный завод в Париже, основанный Жаном-Батистом Леве.
См. Granville и Columbia Sans.

Литейный завод револьверного типа →

Литейный завод немецкого типа, основанный Лукасом Шнайдером в 2017 году.
См. Дэмиена и Динамита.

RP Digital Type Foundry →

Литейный завод в Лондоне, основанный Радимом Пешко.
См. Лариш Нойе и Фугу.

Шик Тойкка →

Литейный завод в Берлине/Хельсинки, основанный Флорианом Шиком и Лаури Тойккой в ​​2010 году.
См. Noe Display и Dia.

Острый тип →

Литейный завод в Нью-Йорке, основанный Лукасом Шарпом и Чантрой Мали в 2015 году.
См. Ogg и Sharp Grotesk.

Швейцарские шрифты →

Литейный завод швейцарского типа, основанный Максимом Буечи, Яном Парти, Эммануэлем Рей и Люси де Пальма.
См. Симплон и Евклид Флекс.

TIGHTTYPE →

Литейный завод немецкого типа, основанный Фабианом Форером и Фабианом Хубером в 2015 году.
См. Fabrik и Moderat.

Тип Поставка →

Балтиморский литейный завод Tal Leming.
См. Балто и Крутящий момент.

Введите вместе →

Партнерство шрифтовых дизайнеров Вероники Буриан и Хосе Скальоне основано в 2006 году.
См. Адель и Адель Санс.

TypeTrust →

Лос-анджелесская студия дизайна и шрифтовая мастерская Сайласа Дилворта.
См. Героический сжатый.

Типотека →

Литейный завод в Нидерландах, основанный в 1999 году Петером Биляком.
См. Plan Grotesque и Fedra Serif.

Деревня →

Типовой кооператив в Нью-Йорке, основанный в 2005 году.
См. Галактика Коперника и Галактика Полярная.

Приобретение и размещение шрифтов

Шрифты Adobe →

Вся коллекция шрифтов Adobe, ранее известная как Typekit, включена во все планы Creative Cloud. Все доступно как для рабочего стола, так и для использования в Интернете (с неограниченным количеством просмотров страниц). Ознакомьтесь со списком моих любимых шрифтов, доступных в Adobe Fonts.

MyFonts →

Самая большая коллекция шрифтов в Интернете. Покупайте веб-шрифты и размещайте их самостоятельно с помощью собственного комплекта.

Магазин шрифтов →

Еще один огромный выбор шрифтов. Принадлежит Monotype, материнской компании MyFonts.

Fonts.com →

Еще одно свойство Monotype с большим выбором шрифтов.

Fontspring →

Не такой большой выбор, как у MyFonts, но очень удобные условия лицензирования как для ПК, так и для Интернета.

Cloud.typography →

Сервис веб-шрифтов Hoefler & Co. От 99 долларов в год, включая пять семейств шрифтов на выбор.

Type Network →

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

Подставка для шрифтов →

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

Google Fonts →

Бесплатная служба размещения веб-шрифтов Google. Доступны некоторые отличные варианты, такие как Work Sans и Space Mono.

Типографские блоги

Typographica →

Обзор новых шрифтов и комментарии к типографскому дизайну.

Я люблю типографику →

Блог обо всем, что связано с типографикой, который существует с 2007 года.

Поклонение шрифтам →

Блог журнала 8 Faces, который курируют Джейми Кларк и Эллиот Джей Стокс.

Блог FontShop →

Блог FontShop с рекомендациями по шрифтам, методами типографики и вдохновением.

Типографические форумы

TypeDrawers →

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

Typography.Guru →

Еще одно интернет-сообщество по типографике — включает в себя последние новости и активную доску идентификации шрифтов.

Типографское вдохновение

Typewolf →

Типографическое вдохновение для современного Интернета.

Используемые шрифты →

Архив шрифтов, используемых в реальном мире.

Grain Edit →

Блог, посвященный классическим дизайнерским работам 1950–1970-х годов, а также современным дизайнерам, вдохновленным тем периодом.

The Dieline →

Вдохновение в дизайне упаковки.

Incredible Types →

Подборка красивых шрифтов, в основном печатных.

Typeeverything →

Вдохновение для рукописного письма.

Friends of Type →

Еще один отличный сайт для вдохновения, на котором в основном пишут от руки.

Архив обложек книг →

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

Идентификация шрифта

WhatTheFont →

Загрузите изображение, и оно волшебным образом скажет вам название шрифта — работает на удивление хорошо.

Font Matcherator →

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

Fontface Ninja →

Расширение браузера, доступное для Chrome, Safari и Firefox, которое позволяет вам находить, пробовать, покупать и добавлять в закладки шрифты на веб-странице.

Type Sample →

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

Identifont →

Определите шрифт, ответив на ряд вопросов.

Handy Tools

FontReach →

Отображает данные об использовании шрифтов на одном миллионе самых популярных веб-сайтов.

Памятка по типографике →

Подробное руководство Typewolf по правильному использованию типографских символов, включая правильное грамматическое использование.

Тип кернинга →

Попрактикуйтесь в кернинге и посмотрите, насколько вы сравнимы с экспертами.

Type Connection →

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

Wordmark.it →

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

Тип Зебра →

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

Книги по типографике

См. полный список моих любимых книг по типографике.

Элементы типографского стиля →

Если вы прочитали только одну книгу о типографике, прочтите эту.

О веб-типографике →

Книга Джейсона Санта-Марии о том, как применять принципы классической типографики в Интернете.

Анатомия шрифта: графическое руководство по 100 шрифтам →

Книга Стивена Коулза поможет вам лучше распознавать шрифты.

Думая шрифтом: критическое руководство для дизайнеров, писателей, редакторов и студентов →

Превосходное введение Эллен Луптон в типографику.

Перестаньте красть овец и узнайте, как работает шрифт →

Классическая книга Эрика Шпикермана по типографике, недавно обновленная новой информацией о веб-типографике.

Дизайн с помощью шрифта: основное руководство по типографике →

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

Визуальная история шрифта →

Визуальный обзор 320 самых знаковых дизайнов шрифтов с 1454 по 2015 год. Моя любимая книга по типогафии, которую я люблю пролистывать.

Как партнер Amazon я зарабатываю на соответствующих покупках.

Организации

Клуб шрифтовиков →

Международная организация, созданная для поддержки совершенства в типографике.

ATypI →

Association Typographique Internationale — международная организация, занимающаяся типографикой.

Общество любителей типографики →

Международная некоммерческая организация, занимающаяся типографикой и ее поклонниками.

9 Удивительных блогов о типографике для дизайнеров | от академии if | if academy

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

В произвольном порядке;

для: надписи от руки

Книга Friends of Type, в основном состоящая из рукописных надписей, представляет собой альбом с оригинальным типографским дизайном и надписями, а также архив от четырех друзей-дизайнеров. Каждый пост представляет собой творение, предназначенное для выражения участников, чтобы вдохновлять идеи и читателей. Каждый месяц приглашается приглашенный дизайнер, которого команда выбирает как человека, которым они восхищаются и которым вдохновляются. Лучший бит — полностраничные изображения; отсутствие миниатюр делает Friends of Type ярким визуальным опытом.

для: реальных примеров шрифтов

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

для типографики и значков

Это совместная работа двух графических дизайнеров и веб-разработчика, призванная стать источником вдохновения и стимулов для дизайнерского сообщества. Благодаря вкладу дизайнеров со всего мира, typetoken демонстрирует, обсуждает и рассматривает мир типографики, значков и визуального языка. Здесь представлены как массовая, так и экспериментальная типографика и иконография, так что это отлично подходит для вдохновения и для того, чтобы оставаться в курсе событий.

for: typography

Typography Served — это галерея, в которой представлено множество шрифтов со всего мира. Каждый пост, составленный креативщиками Bēhance, включает оценку других читателей блога, информацию о владельце шрифта, краткое описание и любые авторские права. Сборник прямо в точку.

для типографики

Incredible Types — это тщательно подобранный шведский стол исключительной типографики и дизайна со всего мира. На веб-сайте цитируется 436 дизайнерских вдохновений коллекции от 432 авторов и студий из 42 стран. Это много цифр; все, что вам действительно нужно знать, это то, что эта красивая сетка, состоящая в основном из печатных букв, демонстрирует типографское превосходство. Каждая миниатюра потрясающе выглядит в черно-белом режиме, оживляясь теплом и цветом, когда вы наводите курсор на каждое изображение. Также имеет широкий спектр тегов для поиска.

TYPE TOY

для типографики, дизайна и винтажа

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

для: подбора шрифтов для проектов

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

для: дизайна упаковки

Разочарованный отсутствием информации о дизайне упаковки, Эндрю Гибб создал The Dieline, чтобы дизайнеры делились, анализировали и вообще пускали слюни на потрясающую упаковку. Веб-сайт по-прежнему отлично подходит для этого, а также для многих других интересных вещей — The Dieline International Awards (на основе творчества, конкурентоспособности и инноваций), каталог дизайнеров и доска объявлений.