Шрифты названия с изображением: 5 способов распознать шрифт с картинки

8 способов определить название шрифта


  • Типографика
  • 2 мин на чтение

  • 2024

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

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

What Font Is

Ресурс What Font Is позволяет определить название шрифта буквально в три шага. При загрузке изображения шрифта нелишне уточнить, что светлее — фон (The background color is lighter…) или шрифт (The background color is dark…), выбрав один из соответствующих параметров. Здесь же можно отфильтровать результаты по параметру коммерческой доступности, автоматически оптимизировать изображение.
Сервис бесплатный, для браузеров Chrome и Firefox предусмотрено расширение.

What The Font

Не менее известный ресурс для идентификации шрифтов What The Font. Шаги, на первый взгляд, аналогичные, однако с What The Font всё немного сложнее: конечный результат напрямую зависит от качества изображения шрифта, оптимизировать которое автоматически ресурс не позволяет. Тем не менее вероятность успешного распознавания высока, кроме того на сайте действует тематический форум.
База шрифтов уступает предыдущему ресурсу.

FontShop

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

Identifont

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

Bowfin Printworks

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

Typophile

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

Flickr Typeface Identification

Получить справку по шрифтам можно и в тематических сообществах хостинга Flickr: Fonts in Use и Flickr Typeface Identification. В первой группе традиционно размещаются наиболее популярные шрифты, вторая посвящена непосредственно их распознаванию.

Font Trainer

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

Автор: Денис Стригун

  • #типографика
  • #шрифты


  • 2

Статьи по теме

6 быстрых и медленных способов


  • Типографика
  • 5 мин на чтение

  • 4974

Сейчас я вас научу плохому.

Допустим, есть картинка

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

Поиск по картинкам

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

https://www.google.ru/imghp?hl=ru

Исходную картинку загружаем через форму или кидаем на страницу поиска перестаскиванием.

Порой Яндекс отрабатывает лучше Гугла.

https://yandex.ru/images/

Польза от поисковых систем следующая.

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

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

«Что за шрифт» на MyFonts.som

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

http://www. myfonts.com/WhatTheFont/

Мы роботу картинку, он нам — шрифты. Ну или ничего.

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

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

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

Жмем Continue.

Робот постарается найти оригинал шрифта и предложит подходящие теги для дальнейшего самостоятельного поиска.

Поиск по ключевым словам на MyFonts.som

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

Наше изображение выполнено как бы фломастером (brush pen). Еще тут подойдут слова типа «каллиграфия» (calligraphic), «от руки» (handwritten) и т.д. Здесь можно воспользоваться тегами, которые предложил робот.

Можно искать термины по-отдельности или объединять их и комбинировать в одном запросе.

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

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

На Майфонтсе много вариантов на замену исходному шрифту.

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

Скриним.

Растр

В Фотошопе скрин превращаем в смарт-объект. В смарт-объекте накладываем на него Gradient Map от нужного цвета к белому.

В макете выставляем смарт-объекту режим наложения слоев, например, Multiply.

Для большинства случаев с белым фоном этого достаточно.

Кому этого мало, можете удалить из скрина белый цвет. Color Range…, тыкаете пипеткой в белый фон

получаете выделение по цвету, инвертируете выделение,

сглаживаете его пару раз на пиксель-другой, чтобы граница контура не была такой рваной,

и скрываете все белое под маску

В основном документе уже делаете со смарт-объектом все, что душе угодно, почти как с векторным шейпом.

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

Вектор

Если нужен вектор, то делаем трассировку в Иллюстраторе.

Открываем скрин из PNG-файла:

На панели Image Trace ставим Mode: Black and White, галочку Preview и аккуратно крутим Threshold и настройки в Advanced:

Получив приемлемый результат, делаем надписи Expand

и получаем вектор на все случаи жизни:

Бесплатные шрифты

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

За бесплатными шрифтами идем во Вконтакте, в группу «Бесплатные шрифты» или в раздел Шрифты сайта Infogra.ru.

https://vk.com/shrift

Жмем на меню группы и выбираем «Поиск».

На странице поиска пользуем ключевыми словами на русском и английском и меню поиска справа:

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

Палю тему тем, кто дочитал

Во Вконтакте можно найти и лицензионные шрифты с того же Майфонтса и других магазинов и словолитен.

Гуглите запрос типа: vk [имя шрифта] font download и найдете добрых нарушителей лицензий.

Обмазывайся-не-хочу.

Медленный способ

Написать на форуме Майфонтса или залить картинку с вопросом в специальный альбом «Бесплатных шрифтов» с просьбой подсказать шрифт.

И ждать ответа как соловей лета.

Знаешь еще способы? Пиши в комментариях.

Источник: designpub.ru
Фото на обложке: ShutterStock

  • #статья
  • #типографика
  • #шрифт


  • 0

7 лучших средств поиска шрифтов по изображениям и URL-адресам

Веб-идентификаторы шрифтов

Шрифты Ниндзя

Fonts Ninja — самый удобный и стильный поисковик шрифтов. Этот инструмент доступен в виде платного настольного приложения или бесплатного расширения для браузера. Расширение для браузера доступно для Chrome, Safari и Firefox, и им очень легко пользоваться.

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

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

WhatFont

Дополнительный проект разработчика Airbnb, WhatFont, представляет собой расширение Google Chrome и приложение для iPhone и iPad. Наведите указатель мыши на любой текст на веб-странице, и это простое приложение покажет, какой шрифт был использован. Помимо имени шрифта, приложение WhatFont определяет семейство шрифтов, стиль, толщину, размер и высоту.

Источник

Fount — это веб-приложение, которое идентифицирует шрифты на веб-страницах. Он совместим с Safari, Chrome, Firefox и IE8+ и требует только сохранения закладки. Это приложение сообщит вам размер, вес и стиль шрифта.

Фонтанелло

Fontanello — еще одно расширение браузера, доступное для Chrome и Firefox. Он позволяет отображать основные типографские стили, щелкнув правой кнопкой мыши выделенный текст.

Средства поиска шрифтов на основе изображений

WhatFontIs

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

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

WhatTheFont

WhatTheFont — это веб-приложение, которое содержит коллекцию из 130 000 шрифтов и использует искусственный интеллект для проверки изображений. Он использует связанные сценарии и работает, когда в изображении используется более одного шрифта.

Приложение доступно в Mac App Store и Google Play. Чтобы использовать его, вы должны загрузить качественное изображение с горизонтальным текстом и дождаться волшебства. Мобильная версия позволяет идентифицировать шрифты с помощью камеры вашего смартфона.

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

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

Подведение итогов

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

Опубликовано: июль 2022 г.

Art Text 4

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

Получить бесплатную пробную версиюКупить сейчас $29,99

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

Пол Эндрю
on Шрифты

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

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

18 000+ шрифтов с засечками, без засечек, рукописных, декоративных и монофонических шрифтов

Plus, макеты, действия, кисти, графические шаблоны, шаблоны логотипов и многое другое!

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

2600+ шрифтов

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

4700+ шрифтов

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

11 000+ шрифтов

Просмотреть ВСЕ шрифты

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

Инструмент WhatFont поставляется в виде расширения браузера, доступного для Chrome и Safari, а также в виде букмарклета. Все, что вам нужно сделать, это щелкнуть по нему, а затем навести курсор на текст на веб-странице, и расширение покажет вам название шрифта.

В MyFonts есть удобный инструмент WhatTheFont, который позволяет идентифицировать шрифты по изображению. Он поддерживает PNG и JPG и использует свою коллекцию из более чем 133 000 стилей шрифтов, чтобы найти наилучшее соответствие шрифтам на вашем изображении.

Fontface Ninja — еще одно расширение браузера для идентификации шрифтов. Что отличает его, так это возможность попробовать шрифты с вашим собственным текстом и возможность немедленно приобрести шрифт, нажав на цену или ссылку для загрузки. Он работает с Chrome, Safari и Firefox.

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

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

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

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