Подбор шрифтов для любого дизайна

Оригинал. By Monica Galvan

5830
просмотров

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Это шрифт или гарнитура?

Давайте сначала поговорим об очевидном, но непопулярном вопросе. Шрифт и гарнитура, в чем разница? Как правильно? Термины «гарнитура» и «шрифт» иногда используются как синонимы, что может немного сбить с толку.

Гарнитура – это набор шрифтов, в то время как сам шрифт относится к определенному стилю или значению в семействе (гарнитуре).

Давайте рассмотрим это на примере. Helvetica – это гарнитура. А Helvetica Bold – это шрифт из семейства Helvetica. Вот наглядный пример разницы между гарнитурой и шрифтами.

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

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

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

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

Категории шрифтов

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

Гарнитуры шрифтов с засечками (Serif typefaces)

Это шрифт с засечками (Times New Roman)

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

Пример засечки

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

Гарнитуры шрифтов без засечек (Sans serif typefaces)

Это шрифт без засечек (шрифт: Futura Bold)

У шрифтов Sans Serif нет засечек (французское слово sans означает «без»). Эти шрифты более современные, полужирные и отлично подходят для написания привлекательных текстов. Одним из самых популярных шрифтов без засечек является Arial, который является копией Helvetica.

Разница между шрифтом с засечками и шрифтом без засечек.

Декоративные гарнитуры

Шрифт: Phosphate

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

Советы по выбору шрифтов

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

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

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

Сначала выберите основной шрифт

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

Контрастируйте вторым шрифтом

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

Пример сочетания слишком похожих шрифтов (Times New Roman и Adobe Caslon Pro)

Пробуйте соединять противоположности

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

Пример сочетания двух противоположных шрифтов (Montserrat и Times New Roman)

Разный межбуквенный интервал

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

Сочетание сжатого шрифта без засечек с обычным шрифтом без засечек (DIN Condensed и Avenir Book)

Подумайте о форме: геометрическая или органическая

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

Дизайн плаката с геометрическим шрифтом Futura

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

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

Пример сочетания органических шрифтов

Ограничьте свой дизайн до 2–3 шрифтов.

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

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

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

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

Пример дизайна плаката с ограничением в 3 шрифта

«CUT» и «TO» – это два совершенно разных жирных шрифта с засечками. Первый жирный и сжатый, а второй жирный, но широкий. Они также хорошо сочетаются с третьим моноширным шрифтом основного текста.

Избегайте модных или популярных шрифтов

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

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

Papyrus – пример некогда модного шрифта. Не используйте его.

Понимайте цель вашего дизайна

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

Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.

Как подобрать шрифт для веб сайта? 7 полезных советов!

Кароль Андрушков

Обновлено: 14 апреля 2023 г.

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

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

Как выбрать лучший шрифт для сайта?

Вот 7 ключевых шагов, которые вы должны сделать!

1. Определите голос вашего бренда

2. Определите цели текстов и шрифта на вашем сайте

3. Проверьте, есть ли в шрифте все нужные вам символы.

4. Проверьте лицензию на шрифт

5. Выберите основной и дополнительный шрифты

6. Умело комбинируйте шрифты

7. Стремитесь к удобочитаемости

Давайте рассмотрим, как сделать каждый из них на практике.

Шаг I: Определите голос вашего бренда

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

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

1. Каковы ценности вашей компании?

2. Кто получатели компании?

3. Какова миссия вашей компании?

4. Что вы хотите, чтобы ваши клиенты думали о вашей компании?

Запишите ответы на эти вопросы! Они помогут вам на следующих этапах выбора шрифта, которые мы объясним в этой статье!

Шаг II: Определите цели текстов и шрифта на вашем сайте

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

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

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

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

Категории шрифтов

Шрифты в основном делятся на:

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

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

3. Рукописные шрифты

4. Декоративные или дисплейные шрифты

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

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

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

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

1. заголовки,

2. цитаты,

3. субтитры,

4. логотипы,

5. слоган

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

Популярные шрифты с засечками: Times New Roman, Georgia, Palatino, Bookman Old Style, Garamond, Courier, Lucida, Century, Arno Pro, MS Serif.

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

Шрифты без засечек лишены засечек. По этой причине они имеют более современный и минималистский характер.

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

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

Популярные шрифты без засечек: Arial, Open Sans, Montserrat, Helvetica, Futura, Verdana, Trebuchet MS, Univers.

Прописные шрифты

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

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

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

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

Популярные шрифты: Great Vibes, Lobster, Grand Hotel, Sofia, Arizonia, Black Jack, Cookie, Germanica, Miama, Pacifico, Tangerine.

Декоративные и акцидентные шрифты

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

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

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

⚡Взлом роста BOWWE:

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

Шаг III: проверьте, есть ли в шрифте все нужные вам символы

Вы начали обдумывать свой выбор нескольких шрифтов? Хороший!

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

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

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

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

Шаг IV: проверьте лицензию на шрифт

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

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

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

Шаг V: выберите основной и дополнительный шрифт

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

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

Большинство профессиональных веб-сайтов включают в себя:

1. Основные шрифты

2. Дополнительные шрифты

3. Акцентный шрифт (необязательно)

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

Основной шрифт

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

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

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

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

Акцентный шрифт (необязательно)

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

Вы можете использовать его, например, в кнопках CTA (Call To Action), чтобы привлечь внимание и генерировать клики. Акцентный шрифт также может выделять основные части текста или выделять цитаты.

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

⚡Взлом роста BOWWE:

Вы хотите найти шрифт с веб-сайта, который вы посещали? Хотели бы вы использовать его на своем собственном веб-сайте?

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

Шаг VI: Умело комбинируйте шрифты

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

1. С засечками и без засечек

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

2. Контрастный вес

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

3. Шрифты из одного семейства шрифтов

Используя шрифты из одного семейства, можно быстро достичь упомянутой выше толщины (например, Open Sans и Open Sans Semibold). Многие шрифты имеют много вариантов — подумайте о том, чтобы объединить два из них на своем веб-сайте.

Например, в BOWWE Website Builder вы найдете разные версии шрифта Roboto: шрифт Roboto, Roboto Condensed и Roboto Slab.

4. Избегайте слишком похожих шрифтов

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

5. Шрифты с похожим эмоциональным выражением

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

6. Выразительные шрифты с нейтральным

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

7. Соответствие пропорций шрифтов

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

⚡Взлом роста BOWWE:

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

1. Пара шрифтов

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

2. Typ.io

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

Шаг VII: добивайтесь удобного чтения 

Какие факторы влияют на читабельность текста на сайте?

Межбуквенные свечения

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

Лидирующий

Слишком маленький интерлиньяж затруднит чтение. В идеале межстрочный интервал должен быть мин. 120% регистра букв (оптимальным часто считается 150%).

Расстояние между абзацами

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

Выравнивание текста

Слишком много текста и маленькие поля в одной строке могут отбить желание читать. Золотое правило описывает 50-60 знаков в стихе как идеал.

Контраст

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

Размер

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

1. Заголовки: 30–70 пикселей,

2. Подзаголовки: 22 — 30 пикс.,

3. Обычный текст: 16–20 пикселей.

Курсив, полужирный, подчеркнутый

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

Готовы создать сайт своей мечты?

Попрощайтесь с хлопотами кодирования и поприветствуйте потрясающий профессиональный веб-сайт с первоклассным SEO уже сегодня!

НАЧАТЬ СЕЙЧАС

Готовы выбрать лучшие шрифты для своего сайта?

Для начала — вспомним, что нужно делать при выборе шрифта для сайта:

1. Определите характер вашего бренда

2. Определите цели текстов и шрифта на вашем сайте

3. Проверьте, есть ли в шрифте все нужные вам символы.

4. Проверьте лицензию на шрифт

5. Выберите основной и дополнительный шрифты

6. Умело комбинируйте шрифты

7. Стремитесь к удобному прочтению

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

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

Кароль Андрушкув

генеральный директор БОУВ

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

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

категории:

ВСЕ
Agentstva
Sozdayte svoy sayt
Vedeniye bloga
Sovety dlya biznesa
Biznes-prilozheniya
Blestyashcheye portfolio i rezyume
Frilansery i sozdateli
SEO
Sotsial’nyye media
Onlayn marketing
Veb-dizayn

ПОСЛЕДНИЕ ПОСТЫ:

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

2023 May 22

Изменение ландшафта поиска: революция ИИ

2023 May 15

8 советов для портфолио графического дизайна [+ потрясающие примеры]

2023 May 08

Навигация по GA4 с уверенностью: подробное руководство для начинающих

2023 April 27

Полное руководство для Midjourney: искусство подсказок

2023 April 18

13 лучших инструментов и приложений для идентификации шрифтов в любом месте

Сталкивались ли вы когда-нибудь с шрифтом, который вам очень нравится, но вы не знаете, как его назвать или где его взять?

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

Лучшие инструменты для определения шрифтов

01. Fonts Ninja

Fonts Ninja — это расширение браузера для Chrome, Firefox и Safari. Он определяет шрифты для любого текста, на который вы наводите курсор мыши на веб-страницах. Он делает это с помощью базы данных из более чем 3000 шрифтов.

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

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

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

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

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

02. Поиск используемых шрифтов на веб-сайте

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

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

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

03. Type Sample

Type Sample — еще один простой инструмент, позволяющий идентифицировать шрифты на веб-страницах.

Это не расширение для браузера. Вместо этого вы просто перетаскиваете кнопку «Тип образца» на главной странице инструмента на панель закладок.

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

Вы даже можете просматривать размеры изображений.

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

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

04. What Font Is

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

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

После того, как инструмент отсканирует ваше изображение, он сгенерирует более 60 бесплатных и премиальных шрифтов, идентичных или похожих на нужный вам шрифт (каталог WhatFontIs содержит более 850 000 шрифтов).

Он даже включает ссылки и цены.

Инструмент бесплатный, но вы можете заплатить 39 долларов США.0,99 в год или 59,90 долларов США в течение трех лет за удаление рекламы, использование расширенного поиска по шрифтам, получение более точных результатов и использование фильтров в результатах поиска.

05. WhatTheFont

WhatTheFont — это веб-инструмент, похожий на What Font Is. Он также идентифицирует шрифты на основе изображений.

Однако этот инструмент требует загрузки изображения. Он не принимает URL-адреса изображений.

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

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

WhatTheFont принадлежит MyFonts, поэтому вы найдете ссылки на покупку только в самой библиотеке MyFonts.

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

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

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

При необходимости вы даже можете повернуть изображение.

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

07. Fontanello

Fontanello — это браузерное расширение для Chrome и Firefox.

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

Элемент Fontanello в контекстном меню покажет название шрифта, а также его размер, насыщенность, интервал и цветовой код HTML.

08. Fount

Fount — это еще один инструмент, который вы используете, перетаскивая кнопку на панель закладок.

Как и в случае с Type Sample, вы используете его, сначала щелкнув закладку, а затем выделив шрифт, который хотите идентифицировать.

Появится всплывающее окно с указанием имени, размера, веса и стиля шрифта.

Также включена ссылка, по которой вы можете получить шрифт.

09. Шрифт в логотипе

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

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

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

Шрифт в логотипе также имеет функцию «Отрасли», которая демонстрирует шрифты в логотипах брендов в определенных отраслях.

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

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

10. Identifont

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

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

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

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

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

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

Наконец, поиск по дизайнеру позволяет просматривать самые популярные шрифты, опубликованные определенным дизайнером шрифтов, например Google Web Fonts.

11. Reddit

Reddit, пожалуй, самый популярный сайт-форум в сети. У него есть субреддит или подфорум под названием «Определить этот шрифт», в котором насчитывается более 99 300 участников.

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

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

12. Quora

Quora — популярный сайт-форум, похожий на Reddit, за исключением того, что его темы полностью написаны в формате вопросов и ответов.

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

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

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

13. Руководство по идентификации шрифтов с засечками

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

Это буквы A, B, E, G, J, K, M, R, U, W и Y.

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

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

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

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

Заключительные мысли

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

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

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

Наконец, не подрывайте силу сообщества. Форумы на Reddit и Quora могут одержать победу там, где автоматизированные инструменты из этого списка потерпели неудачу.

5 способов определить шрифты на веб-странице

Итак, вы делаете свое дело, просматривая веб-страницы, и натыкаетесь на самую неудачную комбинацию шрифтов, но не можете определить шрифт? Что ж, в этом видео (и кратком обзоре ниже) я покажу вам, как именно найти эти шрифты…

1. Fontanello (Chrome, Firefox, Edge + iOS)

Fontanello Расширение для Chrome, Firefox, Edge и iOS, на мой взгляд, является самым быстрым способом узнать, какой шрифт используется на веб-странице. Вы просто щелкаете правой кнопкой мыши по тексту, находите Fontanello в меню и видите семейство шрифтов и некоторые дополнительные атрибуты.

2. WhatFont (Chrome и Safari)

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

3. Visual Inspector (Chrome)

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

4. Старая добрая проверка кода (все браузеры)

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

Если вы используете Google Chrome , щелкните правой кнопкой мыши загадочный текст, выберите Осмотреть. Появится всплывающее окно DevTools, убедитесь, что вы находитесь на вкладке «Стили», и перейдите к атрибутам Font-Family, чтобы узнать больше о шрифтах.

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

Если вы используете Safari , убедитесь, что меню «Разработчик» отображается, установив флажок в нижней части вкладки «Дополнительно» в настройках Safari. Теперь щелкните правой кнопкой мыши текст, выберите «Проверить элемент». Откройте боковую панель сведений, если она закрыта, и выберите параметр «Стили — вычисляемые». Раздел font-family будет представлять информацию о шрифте в атрибутах стиля.

5. Обнаружение переименованных шрифтов (расширенный метод)

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

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