Whats font: Font Finder 🔎 by What Font Is

25.06.2023 Facebook Twitter LinkedIn Google+ Разное

5 лучших инструментов для определения шрифта

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

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

Всегда следите за тем, чтобы ваш клиент платил за коммерческие шрифты!

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

Как определить шрифт

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

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

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

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

Инструменты для определения шрифта

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

What the Font от MyFonts

What the Font от Myfonts.com — это простой и удобный способ поиска шрифтов. Просто перетащите изображение на страницу, обрежьте шрифт и дайте MyFonts сравнить изображение с более чем 130 000 вариантов.

Идентификатор шрифта от FontSquirrel

Идентификатор шрифта от fontsquirrel.com работает так же, как MyFonts. Перетащите изображение или загрузите его со своего компьютера, и пусть поисковая система сделает всю работу за вас.

WhatFontIs

Whatfontis.com — это полезный инструмент, содержащий более 850 000 шрифтов для сравнения с вашим образцом. Тем не менее, у него есть обратная сторона — надоедливая реклама.

Identifont

Identifont.com По-прежнему выглядит как Web 1.0 (посмотрите на этот логотип), но может быть полезен, так как помогает найти шрифты, задавая вопросы об анатомии шрифта.

Функция сопоставления шрифтов Adobe Photoshop

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

Откройте изображение, которое вы хотите идентифицировать, в Photoshop и сделайте выделение шрифта. Затем перейдите к Type > Match Font . Это даст вам альтернативные шрифты, которые соответствуют функциям выбранного вами изображения, но ограничены тем, что доступно в Adobe Fonts. Это может пригодиться, если у вас нет бюджета на покупку новых шрифтов, но есть возможность найти похожие надписи.

Загрузите шрифт прямо из доступной библиотеки Adobe и сразу приступайте к разработке!

Удачных приключений в поисках шрифта.

Типографика — ключевой принцип дизайна

Хотите по-настоящему углубиться в типографику и повысить уровень своей работы? Затем вам нужно поработать над своими дизайнерскими навыками. Вот почему мы организовали Design Bootcamp.

‍

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

‍

Как узнать, какой шрифт используется на веб-сайте

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

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

Начнем!

Подпишитесь на наш канал Youtube

  • 1 Почему вы можете захотеть проверить, какой шрифт использует веб-сайт
  • 2 Как узнать, какой шрифт используется на веб-сайте (3 доступных метода)
    • 2.1 1. Идентифицируйте шрифты с помощью инструмента «Инспектор браузера»
    • 2. 2 2. Найдите шрифты через расширение для браузера
    • 2.3 3. Обнаружение шрифтов в изображениях
  • 3 Заключение

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

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

Кнопки призыва к действию (CTA)

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

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

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

1. Идентификация шрифтов с помощью инструмента Browser Inspector

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

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

.

Если вы предпочитаете использовать сочетание клавиш, попробуйте Ctrl+Shift+I для Windows или Linux. Если вы используете Mac, эквивалент Cmd+Shift+I.

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

Затем перейдите на вкладку Computed и найдите «семейство шрифтов»:

Здесь вы должны увидеть название шрифта и его стиль.

Чтобы просмотреть CSS, относящиеся к шрифту, перейдите на вкладку

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

2. Поиск шрифтов через расширение браузера

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

Некоторые такие надстройки включают:

  • Fontanello:  Это бесплатное расширение позволяет найти название шрифта, толщину, стиль и т. д., выделив его и щелкнув правой кнопкой мыши во время просмотра.
  • WhatFont: Еще больше упрощая определение шрифта, WhatFont позволяет просматривать название шрифта, просто наведя на него курсор.
  • CSS Peeper: Созданное специально для веб-дизайнеров, это расширение немного более надежное и может предоставить вам дополнительные сведения из кода CSS веб-страницы.

Однако каждое из этих расширений имеет различную поддержку браузера. WhatFont доступен для Firefox, Chrome, Safari и Internet Explorer. Fontanello, с другой стороны, доступен только для Firefox и Chrome. CSS Peeper — это специальный инструмент для Chrome, который вы не сможете использовать ни с какой другой платформой.

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

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

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

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

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

3. Обнаружение шрифтов в изображениях

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

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

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

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

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

Заключение

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

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

  1. Определите шрифты с помощью инспектора браузера.
  2. Поиск шрифтов с помощью расширения браузера, например WhatFont.
  3. Обнаружение шрифтов в изображениях с помощью WhatTheFont.
Comments
Leave Comment