Типографические шрифты: ГОСТ 3489.1-71 Шрифты типографские (на русской и латинской графических основах). Группировка. Индексация. Линия шрифта. Емкость (с Изменением N 1), ГОСТ от 09 марта 1971 года №3489.1-71

Разнообразные типографические шрифты cкачать Ⓐ Shriftkrasivo.ru

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

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

Вот посмотрите на основные тенденции типографии на 2020 год.

Rendang

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

Zeky

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

Tomcat

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

Castillo

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

Alora

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

Fort Collins

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

Hallowen

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

Snowy

Snowy — это уникальный шрифт с цветочным рисунком, который больше всего подходит для постеров зимней тематики. Шрифт был создан с использованием нового формата шрифта, известного как OpenType-SVG.

Quanty

Шрифт в стиле каллиграфии для поздравительных открыток, пригласительных, визиток, цитат, плакатов и многое другое!

Blood Bold

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

Witness History

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

Chillow

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

Santiago

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

Morning Glory

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

д.

Swashington

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

The Princess and the Frog

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

Tron Muestre Cine 1 Font

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

Tron Muestro Cine 1 Font шрифт Disney, созданный Франко Фернандесом, имеет трехмерную привлекательность с вытянутыми буквами, тонкими линиями и изящным представлением. С тем, как он разработан, он также имеет намеки на робототехнику и технику.

Nightmare Before Christmas

Фильм «The Nightmare Before Christmas» был феноменом. Одна из его наиболее характерных черт — жуткий и готический стиль. Тонкие кривые линии образуют этот шрифт, а искривления и замысловатые края добавляют готичности и темной привлекательности букв. Если вы думаете о материалах, связанных с Хеллоуином, этот шрифт сразу же поможет вам.

Frankenweenie

После шрифта Nightmare Before Christmas, вот еще один шрифт для тех, кто хочет что-то готическое и немного жуткое. Шрифт The Frankenweenie не только черпает вдохновение из фильма, но и моделирует себя после легендарного существа из литературы. Разнообразный, наполненный кривыми, кривыми и морщинами, этот шрифт был разработан, чтобы добавить немного загадочности и жуткости в любой дизайн.

Это идеальный шрифт для предметов, связанных с Хэллоуином.

Tangled

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

Colortube

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

Gilbert

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

Font Balloon

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

Airfool Free Typeface

 

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

Fistura

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

Invertor

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

Pikolo Block Alt

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

Lux Lineae

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

Scritus Typeface

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

Asfalto

Графический дизайнер Фернандо Фореро стоит за сегодняшним выбором шрифта Asfalto. Этот шрифт отлично подходит для создания ярких дизайнов с винтажным оттенком.

Lumber Typeface

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

18 главных правил классической типографики

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

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

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

Правило №1

Для оптимального удобства чтения выбирайте классические шрифты, проверенные временем. Каждый опытный дизайнер и верстальщик имеет постоянно используемый набор таких шрифтов, которые не преподносят «сюрпризов» на выводе. Наверняка в этот комплект входят такие известные гарнитуры, как Academy, Baskerville, Bodoni, Franklin Gothic, Futura, Garamond, Goudy, Helvetica, Petersburg, Times New Roman.

Рис. 1. Образцы шрифтов

Правило №2

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

Рис. 2. Не стоит использовать большое количество различных гарнитур в одной публикации

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

Правило №3

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

Рис. 4. Как видите, цель не достигнута — выделения не видно. Использованы шрифты Tahoma и Arial. Разницу может заметить только профессионал — при очень внимательном рассмотрении. Но мы ведь рассчитываем на обычного читателя, не так ли?

Рис. 5. Достаточно использовать один шрифт и для основного текста, и для выделений, изменяя всего лишь его насыщенность и/или наклон

Правило №4

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

Рис. 6. Строчные буквы имеют верхние и нижние выносные элементы, что облегчает процесс чтения. Прописные знаки являются более монотонными

Рис. 7. Сравните, насколько трудно читается верхний текст, набранный одними прописными буквами, и насколько удобнее читается текст внизу

Рис. 8. Конечно, в малых количествах, например для набора первых нескольких слов в абзаце, можно использовать только прописные буквы

Правило №5

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

Рис. 9. Тексты, набранные шрифтом от 8 до 12 пунктов, являются наиболее удобочитаемыми. Данный образец набран шрифтом Georgia Regular

Рис. 10. Сравните, как воспринимаются тексты, набранные шрифтами Times New Roman (вверху), Book Antiqua (в середине) и Garamond (внизу) одного размера

Правило №6

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

Рис. 11. Использование шрифта одного размера и насыщенности для основного текста и заголовка, разделенных пробелом

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

Рис. 13. Использование шрифтов размерам и насыщенности придает тексту бессистемный и неразборчивый характер

Правило №7

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

Рис. 14. Жирный контрастный шрифт не придает тексту особой привлекательности и не повышает удобочитаемость

Правило №8

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

Рис. 15. Использование шрифта типа Condensed и Expanded

Рис. 16. Использование шрифта с механически измененной шириной символов

Правило №9

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

Рис. 17. Сверху вниз: нормальный набор; набор с увеличенным межбуквенным расстоянием; набор с уменьшенным межбуквенным расстоянием; набор с увеличенным межсловным расстоянием

Правило №10

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

Правило №11

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

Рис. 18. Сверху вниз: текст с узким, нормальным и широким междустрочным расстоянием

Правило №12

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

Рис. 19. Четыре способа выравнивания текста

Правило №13

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

Рис. 20. Абзац, обозначенный отступом

Рис. 21. Другие методы обозначения начала абзаца

Правило №14

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

Правило №15

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

Рис. 22. Сверху вниз: способы выделения информации в основном тексте: применение курсивного и капительного начертаний; подчеркивание; цвет; использование другой гарнитуры, изменение насыщенности

Правило №16

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

Рис. 23. Нарушение рисунка шрифта

Правило №17

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

Рис. 24. Примеры нарушения правила 17

Правило №18

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

Рис. 25. Черный текст на белом фоне — признанное классическое сочетание. Белый текст на черном фоне — сочетание, менее удобное для чтения

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

Источник: i-type.ru

Эффективная работа с типографикой в Figma

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

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

Предстоящие воркшопы

Основы стиля текста

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

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

Прежде чем мы продолжим, я кратко опишу, какие свойства являются частью текстовых стилей Figma, а какие нет.

Свойства, определяемые стилем текста Figma:

• Семейство шрифтов, вес, размер
• Интерлиньяж
• Межбуквенный интервал, интерлиньяж абзацев и структурирование текста
• Украшение (зачеркнутый и подчеркнутый текст)
• Преобразование (прописные, строчные буквы и капитализация)
• Другие функции Open Type (табличные данные, капители и т. д.)

Свойства, не входящие в стиль текста Figma

• Цвет
• Выключка (влево, вправо, по центру, или по формату)
• Выравнивание текстового поля (по верху, по центру или по низу)
• Изменение размера текстового поля (горизонтально, вертикально или фиксировано)

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

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

Установка шрифтов, размеров и наименование

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

Спецификации шрифтов

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

• Производительность приложения: есть ли у вас бюджет производительности? Сколько шрифтов вам нужно загрузить? Будете ли вы использовать шрифты, которые уже установлены на разных платформах?
• Индивидуальность: У вас есть фирменные шрифты, как часть визуальной идентичности компании, которые имеет смысл использовать?
• Несколько систем: решите, нужна ли одна общая система шрифтов или различные стратегии для разных вариантов использования: например, продукт или маркетинговый веб-сайт (где индивидуальность бренда может иметь больший вес).
• Сочетания пар шрифтов: Можете ли вы получить нужный типографический диапазон от одного семейства шрифтов? Рассмотрим сочетания пар шрифтов. Вы можете зарезервировать декоративные шрифты для текста большого размера, которые вы используете экономно, а разборчивые шрифты оставить для основного текста. Если вы используете бесплатные шрифты Google, мы также создали ресурс, который поможет вам легко изучить различные возможности с помощью этих палитр сочетания.

Масштабирование

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

Основной текст

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

Оптические эффекты

При определении интерлиньяжа основного текста вы также должны учитывать цветовую схему текста и его фона. У вас в приложении положительный текст (темный текст на светлом фоне) или негативный (светлый текст на темном фоне)? Стиль с одинаковыми свойствами может выглядеть по-разному в зависимости от контекста и оптических эффектов.

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

Заголовки

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

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

Типографические шкалы

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

Нет недостатка в теории, как определить, какими будут эти размеры, но вот несколько общих подходов (вместе с соответствующими ссылками, чтобы узнать больше о каждом из них):

Система сетки 8-pt с базовой линией 4-pt

В системе сетки 8-pt все интервалы и размеры кратны 8. Дизайнеры часто используют сетку 8-pt для определения размеров и интервалов с базовой сеткой 4-pt для типографики. Базовые линии шрифта будут лежать на сетке 4-pt. Чтобы добиться этого, нужно уделять больше внимания интерлиньяжу, а не точным размерам шрифтов.

Цель этой системы состоит в том, чтобы все значения интерлиньяжа были кратны 4, чтобы они соответствовали размеру сетки. Это облегчает регулирование вертикального ритма (верхний и нижний интервал между элементами) и поддерживает вертикальное выравнивание текста по столбцам.

Плюсы: Это один из моих любимых подходов определения типографической шкалы. Простая математика путем сложения, вычитания, деления и умножения значений. Перемещение объектов по холсту во время процесса проектирования можно значительно упростить путем настройки параметра «Big nudge» на 8px в Figma.

Совет: Хотя этот подход может показаться недостаточно гибким, я рекомендую использовать 8-pt сетки в качестве ориентира в процессе проектирования, но не обязательно усиливать их до n-й степени при проверке качества ваших дизайнов в ходе разработки. В коде нет базовой сетки, к которой привязываются объекты. Это, в сочетании с большим разнообразием разрешений устройств (которые не всегда делятся на 8), несомненно, нарушит ваши измерения!

Модульная шкала

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

Минусы: если вас раздражает неприятный вид шрифтов с размерами, содержащими десятичные дроби, эта система вам не подойдет ?. Это мой наименее любимый, но все же достойный подход.

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

Передача разработчикам: в разработке эти нюансы не будут иметь большого значения, однако, если все размеры текстовых полей в Figma не являются целыми числами, это может стать серьезной проблемой для разработчиков, которые проверяют ваши дизайны (так как они не увидят целых чисел при измерении расстояний к текстовым объектам и от них). Я рекомендую изучить такие инструменты, как modular scale или type scale. Они отлично подходят для быстрой визуализации диапазона размеров и могут помочь вам определить, насколько они читабельны.

Внимание: вы обнаружите, что с увеличением множителя, особенно свыше 1,4 или 1,5, большие размеры станут действительно большими, часто слишком большими! (как показано ниже). Интерлиньяж, рассчитанный инструментами, будет соответствовать этому примеру, поэтому вы можете выбрать другое соотношение размеров экрана и интерлиньяжа отдельно от меньших размеров шрифта.

Процентная система

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

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

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

Совет: в этом случае вы можете решить использовать 2 (или даже 3) разных процента для размеров основного текста и заголовков. Приведенный ниже пример был смоделирован после того, как опытный пользователь Figma Jonathan Simcoe использовал процентный подход, о котором вы можете узнать подробнее здесь. Вы увидите сдвиг в значении интерлиньяжа со 150% до 110% при больших размерах текста, которые используются для заголовков и подзаголовков.

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

Далее мы рассмотрим некоторые предложениях по именованию и организации ваших стилей текста.

Наименование и организация стилей текста

Наименование стилей текста

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

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

Вы можете использовать несколько разных подходов к именованию стилей текста:

• Система именования на основе размеров (XS, S, M, L, XL)
• Система семантических имен, соответствующая HTML-тегам в разработке (заголовок, абзац, h2, h3)
• Описательная или функциональная система именования, которая объясняет предполагаемое использование стилей (alert, modal-header, button-label)

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

Организация стилей текста

Сила префиксов

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

Отдельные библиотеки

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

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

Сочетание стилей цвета и стилей текста

Как я уже упоминал ранее, в Figma цвет не является частью стиля текста, но вы можете применить отдельный стиль цвета к текстовому объекту или даже применить несколько стилей цвета к различным частям текста (в одном и том же текстовом поле!). Хотя применение цветового стиля является дополнительным шагом, вашу систему будет намного проще поддерживать, если вам не придется создавать текстовый стиль для каждой возможной цветовой комбинации.

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

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

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

Изменение размера текстового поля в Figma

Вы еще читаете? Мы уже много чего рассмотрели. Поскольку ваши текстовые стили готовы, у меня есть последний совет.

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

• Увеличение по горизонтали (по умолчанию при нажатии один раз, чтобы создать новое текстовое поле)
• Увеличение по вертикали
• Фиксированное изменение размера (по умолчанию при нажатии и перетаскивании для создания нового текстового поля)

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

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

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

Например, в видео ниже у нас есть заголовок с размером шрифта 48px и высотой строки 64px. В приведенном выше примере размер текстового поля был изменен вручную (что изменило его поведение при изменении размера на фиксированное). Вместо высоты 64px (определяется высотой строки), высота была установлена ​​на 74px путем изменения размера.

Когда разработчик проверяет файл, чтобы понять, как далеко друг от друга находятся два текстовых объекта, расстояние рассчитывается от нижней части текстового поля, содержащего заголовок, и составляет 6px. В коде высота заголовка будет рассчитываться на основе высоты строки (которая в данном случае составляет 64px). Таким образом, на самом деле, в производственном процессе элементы будут на 10px ближе друг к другу и будут визуально несовместимы с тем, что задумал дизайнер.

Во втором примере, установив поведение изменения размера на увеличение по вертикали, мы увидим, что высота регулируется в соответствии со значением высоты строки текстового стиля. Теперь, когда разработчик проверяет расстояния между двумя объектами, он видит, что расстояние составляет 16px – более точное значение отношений между этими элементами, как это было бы в коде.

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

В погоне за мечтой ?

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

Новые шрифты

Шрифт Турбота (по-русски — забота) разработан для фирменного стиля Центра реабилитации детей-инвалидов в 2009 г. Асимметричный неконтрастный гротеск имеет пять начертаний (три прямых и два курсива). Благодаря жёсткой структуре и мягкому контуру, шрифт легко читаем в мелких кеглях и на экранах, весьма выразителен в крупных кеглях. Набор символов дополнен лигатурами, комплектом старостильных цифр, знаков валют и более традиционными формами некоторых букв. Шрифт экспонировался на фестивале Свято КирилицЁ, портал typo.cz назвал его «шрифтом недели». Дизайнер — Андрий Шевченко.

Акцидентный шрифт Republica разработан в 2010 г. Сергеем Ткаченко (4th february). Это жирный гротеск с добродушным характером в 10-ти начертаниях. Среди особенностей — низкие строчные буквы и игривый рисунок. У шрифта большие типографические возможности. В комплект знаков включены базовые и акцентированные: латиница, кириллица, греческий и иврит. Имеются лигатуры, геометрические фигуры, альтернативные знаки. Предназначен для акциденции и набора небольших текстов, например, в детской литературе или надписях на упаковке продуктов питания и т. д.

Softrobo Pro вдохновлён 1970-ми — десятилетием, когда люди сходили с ума по роботам и верили во всеобщую компьютеризацию. Шрифт начинался как учебный проект, затем последовала основательная переработка всего знакового состава, и в 2008 г. на MyFonts.com была опубликована первая коммерческая версия, поддерживавшая только латиницу. В 2009 г. появилась версия с расширенным составом знаков и поддержкой более чем 40 языков. Два начертания — прямое и наклонное. Отлично подходит для набора заголовков и рекламной акциденции. Дизайнер — Алексей Коваль.

Ведущая рубрики: Екатерина Кочкина. Разработали новый шрифт? Пишите [email protected].

Лайфхаки предпечатной подготовки в Adobe InDesign

Вебинар: «Лайфхаки предпечатной подготовки в Adobe InDesign»

Компании Adobe и Softline приглашают Вас во вторник 26 января принять участие в бесплатном онлайн-семинаре «Лайфхаки предпечатной подготовки в Adobe InDesign».

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

В фокусе мероприятия:

• О вендоре Adobe.
• Коммуникация как основной принцип допечатной подготовки. Что мы должны знать до начала верстки.
• Контроль качества иллюстраций в ходе работы. Как экономить время, силы и ресурсы компьютера.
• Как готовить иллюстрации. Размер и разрешение, цвет и профили, как решить проблему превышения суммы красок.
• Проблема черного. Типичные ошибки использования цветов CMYK.
• Требования к плашечным цветам. О Pantone и других заказных цветах.
• Тонкие линии и выворотки. Разбираем типичные требования типографии.
• Шрифты. Что не так с TrueType? Технические и юридические аспекты использования шрифтов.
• Package или PDF? Что отдавать в типографию. Подготовка финального PDF. 
• Ответы на вопросы.

Вебинар проводят:

Александр Сераков, профессиональный преподаватель с многолетним опытом проведения курсов, мастер-классов и развивающих мероприятий. Официальный спикер компании Adobe в России. Автор книги по Adobe Photoshop Lightroom, соавтор книг по Illustrator и InDesign. Adobe Certified Instructor.

Анна Макеева, business development manager по решениям Adobe. Эксперт по Adobe Creative Cloud компании Softline.

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

Ждем Вас на вебинаре Softline и Adobe!

Типографика в вебе / Хабр

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

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

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

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

Гарнитура — шрифт или несколько шрифтов, имеющих стилистическое единство начертания. Состоит из набора знаков. Часто это понятие путают с понятием «шрифт», хотя шрифт — это определенное начертание знаков, в то время как гарнитура определяет общее «семейство» шрифтов.

Гарнитуры можно разделить на две основные категории:

• Антиква — шрифты с засечками.
• Гротеск, соответственно, — шрифт без засечек.

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

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

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

Интерлиньяж — межстрочный интервал. Расстояние между базовыми линиями соседних строк.

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

Есть замечательная игра-тренажер — Kern Type. Просто расставьте все буквы по местам. На самом деле это не так-то просто. Процесс достаточно сложен и требует отличного глазомера. Особенно этот опыт будет полезен при создании логотипов.

Что мы делаем не так?

Используем большое количество шрифтов

Желательно использовать не более 3-х начертаний. Это могут быть шрифты как одной гарнитуры, так и разных. Например, гарнитура Roboto содержит довольно большое количество различных начертаний. Из них легко можно выбрать три, которые, как мы считаем, подойдут для нашего сайта. Допустим, это будут Light, Regular и Bold. Для заголовков можно использовать шрифт Bold или Light, для кнопок Bold, для основного текста Regular. Таким образом, используя одну гарнитуру, мы обеспечили наш сайт правильной типографикой. Естественно, все зависит от тематики сайта и идеи, которую вы планируете заложить в дизайн. Мой пример относится к универсальным и не претендует на что-то уникальное или неординарное.

Не знаем какого размера должен быть шрифт

Размер текста в вебе не должен быть меньше 12 пикселей. Лучший выбор — в пределах 14–18 px для основного текста. Не слишком большой и в то же время удобочитаемый. Причем, если уж мы выбрали размер 16 px, он должен оставаться 16 px на всех страницах сайта и не скакать плюс-минус 1 px от блока к блоку. Относится это и к интерлиньяжу, он везде должен быть одинаков.

Размер шрифтов надо указывать целыми числами, не используя десятичныхдробей, например 16,28 px. И, конечно же, в фотошопе необходимо перевести pt в px. Для этого выбираете в меню: Редактирование — Установки — Основные. Далее — Единицы измерения и линейки. Меняете в выпадающих меню «Текст», «Линейки» пункты на пиксели. Жмете «OK».

Длина строки — разве это важно?

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

Интерлиньяж соответствует размеру шрифта

Расстояние между строками практически всегда должно быть больше размера шрифта. За исключением заголовков. Чтобы достигнуть баланса между текстом и «воздухом», сделайте межстрочное расстояние примерно в полтора раза больше высоты строчных букв. Или устанавливаем интерлиньяж, равный 150% размера шрифта. Например размер текста 14 px, тогда интрерлиньяж — 21 px. 14 / 2 = 7 + 14 = 21.

Выбираем любой понравившийся шрифт

Думаю, уже всем известно, что шрифты для дизайна веб-сайтов лучше всего использовать с fonts.google.com и webfont.ru, если, конечно, заказчик не предоставил вам свой шрифт.

O Lorem, lorem…

Совершенно естественно, что при разработке сайта почти никогда не используется тот контент, который там будет — зачастую, это контента ещё просто не существует. Поэтому дизайнеры (да и верстальщики тоже) используют «рыбу» — произвольный текст, который вписывается в контентные блоки. Это довольно удобно, особенно для дизайнеров, ведь теперь пресловутый «Lorem Ipsum…» можно вставить прямо из фотошопа (Меню: Текст — Вставить Lorem Ipsum). Но для русскоязычных сайтов делать это не рекомендуется — латиница не дает представления о том, как будет выглядеть текст, набранный кириллическим шрифтом. Поэтому генератор текстов вам в помощь.

Ссылки

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

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

Выравнивание

Есть текстовые блоки, которые очень часто выравниваются неправильно — это выравнивание по ширине, выравнивание посередине и выравнивание по правому краю. Во всех этих случаях читать текст неудобно, и визуально он выглядит непривлекательно. Выравнивание ВСЕГДА должно быть по левому краю. Даже если очень хочется сделать его по правому краю (просто потому что вам кажется — композиционно должно быть именно так) — это неправильно Исключением может быть одно или два коротких предложения, которые, скорее всего, являются подзаголовками для основного текста.

Контраст

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

Стили

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

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

Типографические хитрости, оказывающие влияние на анимационный ролик цена красивой шрифтовой работы

Типографические хитрости, оказывающие влияние на анимационный ролик цена красивой шрифтовой работы

04 апреля

Содержание

1. 7 методов работы со шрифтами для ролика

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

Часть 1 – Выбор «правильного» шрифта для вашего дизайна.

Часть 2 – несколько жизненно важных типографских терминов.

Часть 3 – [Вы здесь] Типографические хитрости, оказывающие влияние на анимационный ролик, цена красивой шрифтовой работы.

7 методов работы со шрифтами для ролика

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

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

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

2. Начните на охоту на шрифты

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

3. Зарисовывайте шрифты

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

4. Переверните с ног на голову

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

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

5. Размывайте сомнения

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

6. Используйте ‘o’ для пробела

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

7.  Не сжимайте лишний раз (если это действительно не обязательно)

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

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

типографских шрифтов | FontSpace

Загрузить

• Темный режим
• Помощь Войти

Присоединиться бесплатно

• Шрифты
• Стили
• Коллекции
• Генератор шрифтов
• (͡ ° ͜ʖ ͡ °)
• Дизайнеры
• Разные
• 5 бесплатные шрифты

7

Связанные стили

• Каллиграфия

• Курсив

• Необычный

• Надпись

• Шрифт

• Рукописный ввод

• Жирный

• Полужирный

• Забавный

• Винтаж

• Логотип

• Свадьба

• Кисть

• Дизайн

• Подпись

• Декоративный

• Элегантный

• Плакат

Красивый

• Ручная работа

• Повседневная

• Графика

• Журнал

• Разное

• Брендинг

• Логотип

• Музыка

• Дисплей

• Фильмы

• Реклама

• Мода

• Android

• Стильный

• Techno

• Приглашение

  0

  04

  -использовать

  Сортировать по

  • Популярные
  • В тренде
  • Новейший
  • Имя

  Для личного пользования Бесплатно

  193.7k загрузок

  Персональное использование Бесплатно

  1,1 миллиона загрузок

  Для личного пользования Бесплатно

  1,1 миллиона загрузок

  Для личного пользования Бесплатно

  Обычный

  934,7k загрузок

  Для личного пользования Бесплатно

  614,4k загрузок

  Для личного пользования Бесплатно

  918,7k загрузок

  Для личного пользования Бесплатно

  849.7k загрузок

  Персональное использование Бесплатно

  520,8k загрузок

  Для личного пользования Бесплатно

  603,7k загрузок

  Для личного пользования Бесплатно

  637,4k загрузок

  Для личного пользования Бесплатно

  238k загрузок

  Для личного пользования Бесплатно

  413.8k загрузок

  Персональное использование Бесплатно

  43456 загрузок

  Для личного пользования Бесплатно

  351.4k загрузок

  Для личного пользования Бесплатно

  463,4k загрузок

  От 1 до 15 из 765 Результаты

  • 1
  • 2
  • 3
  • 4
  • Далее

  Еще больше стилей

  75000 + бесплатные шрифты 16000 + коммерческие шрифты 3000 + Дизайнеры
  • Популярные шрифты
  • Коммерческие шрифты
  • Классные шрифты
  • Курсивные шрифты
  • Блог
  • Справка
  • Контакты
  • Бренд
  • Конфиденциальность
  • Условия
  • DMCA
  • Карта сайта

  40 лучших бесплатных шрифтов, выбранных дизайнерами

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

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

  1. Волк в городе

  Wolf in the City — классический элегантный рукописный шрифт с удивительной детализацией и 3-мя начертаниями.

  2. ДИКАЯ МОЛОДОСТЬ

  Wild Youth — великолепная кисть, которая придаст вашим рисункам естественный вид.

  3. Linux Libertine

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

  4. Bebas Neue

  Шрифт

  Bebas Neue Sans Serif вдохновляет на универсальность без ограничений.

  5. Соматическое округление

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

  6. Наутилус Помпилиус

  Nautilus Pompilius — идеальный шрифт, отличающийся симметрией и точностью.

  7. PILSNER & GUTENBERG

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

  8. Гусеницы Тип

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

  9.Campton Type: семейство

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

  10. Ганди Санс

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

  11. Blenda Script

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

  12. Горький Ht

  Шрифты

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

  13. Привет, Стокгольм

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

  14. Poetesen One

  Poesten One — отличный шрифт для логотипов и брендов компаний.

  15. Бесплатный шрифт — New Day

  New Day рассказывает о проекте, который нуждается в футуристическом стиле.

  16. Ginebra бесплатный шрифт

  Ginebra, как показано на презентации, — прекрасный шрифт, подходящий для журналов.

  17. Big John — Бесплатный шрифт

  И BIG JOHN, и SLIM JOE хотят, чтобы их выставляли на рекламных щитах. Хотите исполнить их желание?

  18. Винтажный шрифт без волокон

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

  19. Westfalia Бесплатный шрифт

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

  20. Бесплатный шрифт Islander

  Islander, как и Somatic Rounded, выглядит идеальным шрифтом для мобильного приложения.

  21. Simplifica — Бесплатный шрифт

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

  22. Bohem Бесплатный шрифт

  Винтажный шрифт

  Bohem — идеальный шрифт для упаковки и брендинга всех винтажных продуктов.

  23. Плейлист Бесплатный шрифт

  Плейлист

  имеет естественное ощущение, достаточное количество естественности для курсивного шрифта.

  24. Чугун

  Cast Iron содержит элементы уникального 3D-шрифта, которые сделают ваш текст ярким.

  25. Noway Бесплатный шрифт

  «Функциональность — это разумный способ», — гласит девиз этого сильного жирного шрифта.Дальнейшее описание не требуется.

  26. Элизабет Шрифт

  Elisabeth проста, но современна, ее легко включить в различные проекты.

  27. Wavehaus Sans Typeface

  Детали имеют значение. Вы не видели детали этого шрифта? Посмотри снова!

  28. Уэсли Готик

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

  29. Молодежная культура

  Молодежная культура напоминает мне тату-шрифты. Это многое говорит о личности этого удивительного шрифта.

  30. Мойка кухонная

  Эта текстура стены знаменует собой нововведение в истории текстурированных шрифтов. В этом море онлайн-шрифтов сложно не заметить.

  31. HK NOVA

  Жирный шрифт

  HK NOVA заслуживает того, чтобы размещать его на обложках журналов и научных книг.

  32. Черное животное

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

  33. Belda Regular

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

  34. Bunday Slab жирный, светлый и курсив

  Bunday — это набор современных настроений и стилей почти на 100 языках. /

  35. Рукописный шрифт Aloja

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

  36. Космический Гротеск

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

  37. Жирный шрифт

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

  38. Профсоюз

  Профсоюз призывает всех фермеров собраться на рынке.

  39. Шрифт дисплея Circus

  Circous объясняет себя и делает все правильно. Этот шрифт полон индивидуальности!

  40. Escucha (+ шрифт Consuela duo)

  И последнее, но не менее важное: Escucha — это современный шрифт, который вчера нужен каждому дизайнеру в его наборе инструментов.

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

  WDL

  18 бесплатных типографских шрифтов для вдохновения в ваш следующий проект

  9 минут на прочтение

  Типографские шрифты — мощные инструменты.

  Работа дизайнеров

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

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

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

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

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

  Мы понимаем, что это требует времени, которого у вас часто нет, поэтому мы сделали часть работы за вас.

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

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

  1. Хеллтаун

  Источник изображения | Скачать здесь

  Рожденный диким — это не для слабонервных.

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

  Заостренные концы напоминают металлические шипы, которые можно найти на кожаных байкерских куртках.

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

  2. Зерноязычный

  Источник изображения | Скачать здесь

  Наконец, у нас есть ответ на вопрос, который мучил все поколение: какой шрифт использовал бы лорд Волан-де-Морт, если бы он был веб-дизайнером?

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

  Parseltongue — это язык, используемый в J.K. Книги Роулинг от темных магов для вызова змей, других жутких змей и от главного героя — в основном, чтобы напугать его лучших друзей.

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

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

  3. Бильбо

  Источник изображения | Скачать здесь

  Еще один фэнтезийный шрифт, Bilbo — это легкий для чтения каллиграфический шрифт со сказочной атмосферой.

  Это стиль, который идеально подошел бы к J.R.R. Книги Толкина или фильмы «Властелин колец».

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

  Если у вас есть основной текст с сообщением, которому нужно немного добавить тепла, держите Бильбо под рукой.

  4. Привет, ноябрь

  Источник изображения | Скачать здесь

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

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

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

  5. Девять на пять

  Источник изображения | Скачать здесь

  О, золотой век ИТ!

  Помните те времена, когда у клавиатуры был витой кабель, мышь — в виде шарика, и мы начинали думать, что синий экран смерти навсегда останется частью нашего земного существования?

  То, что когда-то было передовой технологией, теперь стало ностальгией.Если вы хотите проникнуться этими чувствами, «Девять на пять» идеально подойдет.

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

  Название легко запомнить: символы нарисованы на плитках сетки 9 × 5. Серьезно, мы посчитали квадраты, и мы знаем, что вы тоже.

  6. Тангерин 1 и 2

  Источник изображения | Скачать здесь

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

  Life, должно быть, по-настоящему щедро обращалась с людьми из Pixel Kitchen, потому что они принесли нам шрифт с двумя разными стилями.

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

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

  Уловка? Вы, наверное, думаете, что Tangereen 2 — платная версия, но ошибаетесь.

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

  7. Кубик

  Источник изображения | Скачать здесь

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

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

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

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

  Другими словами, Cubik — еще одно доказательство того, что простота — это высшая изощренность.

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

  8. Тетрис Холлоу

  Источник изображения | Скачать здесь

  Хотя он явно исходит из мира винтажных видеоигр и бинарной простоты компьютерных дисплеев 80-х, ретро-атмосфера Tetris Hollow по-прежнему несет в себе современную атмосферу.

  Однако это может иметь какое-то отношение к тому факту, что старая школа в наши дни является новой современной.

  В любом случае, если вы хотите, чтобы ваш проект выглядел так, как звучит старый Game Boy (извините за синестезию, но вы точно знаете, что я имею в виду), вы можете использовать Tetris Hollow для логотипов и иллюстраций.

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

  9. Тумалт

  Источник изображения | Скачать здесь

  Знаете ли вы, что Джексон Поллок случайно создал Tumult Regular, когда Энди Уорхол заменил одну из своих банок с краской супом с буквами? Погугли это.

  Нет, конечно, неправда! Но это могло быть, не так ли?

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

  Но в мире фейковых новостей это мог быть Поллок, насколько нам известно.

  Разборчивость прописных букв — проблема, если рассматривать их по отдельности. В контексте их на удивление легко читать.

  По-прежнему лучше использовать 20pt или больше. В противном случае слова теряются в этом прекрасном беспорядке.

  10. Смокум

  Источник изображения | Скачать здесь

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

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

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

  11. Кабал

  Источник изображения | Скачать здесь

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

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

  Гладкие, органичные линии, великолепные пропорции и уникальные засечки — рецепт этого типографского шрифта выглядит таким простым, правда?

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

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

  Ну, не думай об этом слишком много.Просто скачайте Кабал и бегите с ним.

  12. Использование фейдера

  Источник изображения | Скачать здесь

  Табло

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

  Он также очень разборчив и впечатляет при использовании в качестве заголовка или в дизайне плаката.

  13. Битое стекло

  Источник изображения | Скачать здесь

  Вы хотели воздействия? Ничто так не влияет на заклинания, как шрифт Broken Glass.

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

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

  Если вы хотите привлечь к чему-либо внимание, этого можно добиться, просто «сломав» это.

  14. Кухонная мойка

  Источник изображения | Скачать здесь

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

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

  Фактически, он был создан с помощью вырезок из губки, смоченной акриловой краской. Умная!

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

  15. Mindfuct NBP

  Источник изображения | Скачать здесь

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

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

  Может, все-таки что-то есть в своеобразном названии?

  В качестве шрифта это unicase, и он хорошо сочетается с Ubuntu, Neo Sans, Microsoft Sans Serif и Verdana.

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

  16. Черная пятница

  Источник изображения | Скачать здесь

  Черная пятница — это день, когда все мы теряем рассудок и спонтанно воспроизводим сцены из «Голодных игр» в местных магазинах в надежде на выгодную сделку.

  Если вам нравится этот шрифт, не дожидайтесь недели после Дня благодарения.

  Это уже бесплатно, так что покупайте сейчас, потому что дешевле не будет.

  17. Батик Гангстер

  Источник изображения | Скачать здесь

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

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

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

  Романтичный и мечтательный, Batik Gangster трудно не любить. Прямо как очаровательный плохой парень, который наверняка существует.

  18. Топика

  Источник изображения | Скачать здесь

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

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

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

  Последние мысли

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

  На самом деле, это не должно вам ничего стоить.

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

  Вы использовали что-нибудь из этого раньше? Какие ваши любимые бесплатные шрифты для типографики?

  Дайте нам знать, и мы сделаем их известными.

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

  ---

  Шрифты для покупки и размещения

  шрифтов Adobe →

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

  MyFonts →

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

  FontShop →

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

  Fonts.com →

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

  Fontspring →

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

  Cloud.typography →

  Служба веб-шрифтов Hoefler & Co. От 99 долларов в год с выбором из пяти семейств шрифтов.

  Сеть типов →

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

  Подставка →

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

  шрифтов Google →

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

  ---

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

  Типографика →

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

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

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

  Типовое поклонение →

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

  Блог FontShop →

  Блог

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

  ---

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

  Тип Ящики →

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

  Типографика.Гуру →

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

  ---

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

  Typewolf →

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

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

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

  Grain Edit →

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

  Дилин →

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

  Невероятные типы →

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

  Typeverything →

  Вдохновение для ручной надписи.

  Друзья типа →

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

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

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

  ---

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

  WhatTheFont →

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

  Сопоставитель шрифтов →

  Новый инструмент идентификации шрифтов

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

  Fontface Ninja →

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

  Типовой образец

  →

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

  Идентификатор →

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

  ---

  Подручные инструменты

  FontReach →

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

  Шпаргалка по типографике →

  Собственное исчерпывающее руководство

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

  Тип Керна →

  Попрактикуйтесь в кернинге и сравните себя с экспертами.

  Тип соединения →

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

  Wordmark.it →

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

  Тип Зебра →

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

  ---

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

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

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

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

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

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

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

  Книга

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

  Мыслить типом: Критическое руководство для дизайнеров, писателей, редакторов и студентов →

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

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

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

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

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

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

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

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

  ---

  Организации

  Клуб типографских директоров →

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

  ATypI →

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

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

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

  ---

  Понимание нюансов классификации шрифтов

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

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

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

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

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

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

  История стилей шрифтов

  Самые старые шрифты назывались blackletter и датируются 1400-ми годами. Эти ранние шрифты напоминали рукописную каллиграфию.

  Логотип New York Times, как и многие другие популярные газетные заголовки, является классическим и повсеместным примером блэклетера.

  После блэклеттера появились первые шрифты с засечками.Засечки включают небольшие выступы, которые завершают штрихи их букв (так называемые засечки , , где стиль получил свое название). Появившись в 1500-х годах, первыми засечками были засечки старого стиля. Этот стиль включает Garamond и Goudy Old Style.

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

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

  Slab serif — это последняя эволюция стиля serif. С появлением механизации (например, Steam Press, 1814 г.) и других важных инноваций в технологии печати, а также с новой волной в рекламе, когда рекламодатели выбирали жирный шрифт, который действительно подчеркивал свое присутствие, они были частично разработаны, чтобы выдерживать гораздо больше промышленных процессов печати.У них небольшой контраст между штрихами, и большинство из них не заключены в скобки. Среди других шрифтов Slab serif — Rockwell и Clarendon. Иногда их называют шрифтами для пишущих машинок, но в ХХ веке они использовались гораздо шире.

  В то время как засечки были первыми гарнитурами, которые развились после оригинальных черных букв, шрифты без засечек в значительной степени пришли на сцену дизайна в начале 20 века. Эти ранние шрифты без засечек назывались гротескными или готическими шрифтами и включали такие шрифты, как Franklin Gothic.Их назвали «гротескными» из-за отказа от более «элегантных» элементов дизайна с засечками.

  (Источник: Майкл Саллит)

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

  Завершают гарнитуры без засечек стили Geometric и Humanistic.Геометрические шрифты без засечек, как и современные шрифты с засечками, довели стиль до совершенства. Они имеют буквенные формы, основанные на простых геометрических формах, в первую очередь круглую букву «О», и очень современны. Однако их ультрасовременные формы приносят в жертву удобочитаемость при меньших размерах. Futura — самый известный геометрический шрифт без засечек.

  Futura прочно ассоциируется с фильмами Уэса Андерсона.

  Гуманистические шрифты без засечек стремились сохранить некоторое влияние, которое естественный почерк оказал на формы букв более ранних шрифтов.Формы букв стали более доступными благодаря таким функциям, как переменная ширина штриха. Gill Sans — один из самых популярных шрифтов без засечек.

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

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

  • • •

  Дополнительная информация в блоге Toptal Design:

  Понимание основ

  Какова цель типографики?

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

  Что такое типографика в веб-дизайне?

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

  Для чего используется типографика?

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

  Чем шрифт отличается от гарнитуры?

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

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

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

  История шрифта (с инфографикой)

  Книги и другие печатные материалы легко принять как должное. Однако до изобретения печатного станка Иоганном Гутенбергом в середине 15 века книги писались от руки. В основном они предназначались для элиты, хотя рост грамотности среди среднего класса увеличивал их спрос.

  На историю шрифтов

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

  Книги для широких масс

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

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

  Буквы

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

  страниц из библии Гутенберга с оригинальным шрифтом Blackletter и декоративными иллюстрациями.

  Гарнитуры для экономии места

  Шрифты

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

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

  Ранний римский шрифт Дженсона был более обтекаемым, чем Blackletter, и экономил место на странице.

  Шрифт

  Jenson был первым, который был создан на основе типографских принципов, а не рукописных моделей. Его римский шрифт является основой для многих современных шрифтов, включая Centaur, созданный Брюсом Роджерсом в 1914 году, и Adobe Jenson, созданный Робертом Слимбахом в 1996 году.

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

  Пример раннего курсивного шрифта.

  Повышение читаемости

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

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

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

  Джон Баскервиль сделал шаг вперед в 1757 году, создав переходные гарнитуры с более четкими формами букв.Хотя он улучшал шрифт, чернила и печатные станки, его шрифт был чернее шрифта его современников. Дизайн Баскервилля подвергся критике из-за толщины штрихов. Один из его критиков даже зашел так далеко, что сказал, что его шрифт будет «ослеплять нацию». Его шрифт потерпел неудачу с коммерческой точки зрения, но был возрожден в 20 веке, и с тех пор он был провозглашен «величайшим принтером, когда-либо созданным в Англии».

  Образец гарнитуры раннего шрифта Баскервилля, включая курсив.

  Внешний вид современных засечок

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

  Между этими двумя шрифтами есть некоторые явные различия, в основном во внешнем виде и размещении определенных букв.Например, заглавная буква J в Bodoni простирается ниже базовой линии, а в Didot — на базовой линии. Удары на «3» в Бодони оба завершаются шарами, в то время как только верхний удар заканчивается мячом в Дидо.

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

  Сравнение различных версий Бодони и Дидо.

  Первый шрифт Slab Serif

  Первый коммерчески доступный плоский шрифт с засечками или египетский шрифт, названный «Antique», появился в 1815 году и был разработан Винсентом Фиггинсом. Они привлекали больше внимания, чем более традиционные засечки. Основная характеристика шрифтов с плоскими засечками — это отсутствие кривизны на них.

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

  Miller and Richard’s Oldstyle Antique, плита с засечками в египетском стиле со слегка закругленными засечками.

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

  Первое появление шрифта без засечек

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

  Пример египетского письма Каслона «Две строки» («две строки» относятся к высоте шрифта).

  На шрифт

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

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

  История шрифтов 20-го века

  ХХ век принес еще более важные события в истории шрифтов. Первым штатным шрифтовиком был Фредерик Гауди, который начал свою карьеру в 1920-х годах. Он создал культовые шрифты, которые используются до сих пор, в том числе Copperplate Gothic и Goudy Old Style (на основе шрифтов старого стиля Дженсона).

  В 1957 году Макс Мидинджер разработал Helvetica, возможно, самый культовый шрифт 20 века. Другие минималистские шрифты были разработаны в 20 веке, в том числе Futura (разработанный Полом Реннером) и Optima (разработанный Германом Цапфом).

  Цифровая типографика

  Первый цифровой шрифт — Digi Grotesk — был разработан Рудольфом Хеллом в 1968 году. Ранние цифровые шрифты были растровыми, что приводило к неидеальной читаемости при малых размерах. В 1974 году были разработаны первые контурные (векторные) шрифты, которые улучшили удобочитаемость при одновременном уменьшении размеров файлов.

  К концу 1980-х годов были созданы шрифты TrueType, которые позволяли как компьютерным дисплеям, так и устройствам вывода, таким как принтеры, использовать один файл. В 1997 году были изобретены шрифты OpenType, которые позволили платформам Mac и ПК использовать один файл шрифта.

  В том же году в CSS были включены первые в истории правила стилизации шрифтов, а в следующем году первая поддержка веб-шрифтов была добавлена ​​в Internet Explorer 4 (хотя в то время они не получили широкого распространения).

  Эволюция шрифтов в Интернете

  21 век принес значительный прогресс в области веб-шрифтов. В 2009 году был разработан формат открытого веб-шрифта (WOFF), который был добавлен к стандартному веб-стандарту W3C. Эта разработка проложила путь к широкому распространению веб-шрифтов в 2011 году, когда все основные браузеры, наконец, приняли поддержку WOFF.

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

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

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

  Google Fonts позволяет людям показывать только переменные шрифты в результатах поиска.

  Что ждет типографику в будущем

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

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

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

  • • •

  Дополнительная информация в блоге Toptal Design:

  Начало графического дизайна: Типографика

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

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

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

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

  Общие типы шрифтов

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

  Шрифты с засечками

  Шрифты

  с засечками имеют маленькие штрихи, называемые засечками, , прикрепленные к основной части буквы.

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

  Шрифты без засечек

  Шрифты без засечек

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

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

  Дисплейные шрифты

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

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

  Выбор шрифта

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

  Шрифты, которых следует избегать

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

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

  Объединение шрифтов

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

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

  Прочие важные термины

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

  Иерархия

  Иерархия

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

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

  Ведущий

  интерлиньяж (рифмуется со свадьбой) — это интервал между строками текста , также известный как межстрочный интервал .

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

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

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

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

  Кернинг

  Кернинг — это интервал между определенными символами . В отличие от отслеживания, он меняется в зависимости от слова, потому что каждая буква совпадает по-разному.

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

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

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

  Надеемся, вам понравилось изучать основы типографики!

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

  / en / начало-графический-дизайн / цвет / содержание /

  .

  No related posts.