← Все статьи

Как найти шрифт с картинки: проверили на баннере

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

WhatFontIs: исходное слово ARRIVALS и найденный Montserrat Bold
WhatFontIs нашёл Montserrat Bold по фрагменту нашего баннера.
В этой статье

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

Выберите надпись латиницей

Для этого способа подойдут, например, NEW ARRIVALS или название бренда латиницей. WhatFontIs и WhatTheFont распознают латинские буквы. Если на картинке только русский текст, этот маршрут не подойдёт — сначала понадобится узнать название шрифта или найти образец той же гарнитуры с латиницей.

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

Загрузите картинку и проверьте буквы

  1. Откройте WhatFontIs, нажмите Browse files и загрузите изображение.
  2. Выделите нужную строку. На нашем баннере сервис выбрал слово ARRIVALS. Перейдите дальше кнопкой Next Step.
  3. На шаге Optimize проверьте контраст и разделение букв. Если образец читается нормально, настройки можно оставить как есть — так мы и сделали.
  4. На шаге Enter Characters сверьте символы под каждым фрагментом. Учитывайте регистр: большая I и маленькая l — разные буквы.
  5. Оставьте Display all fonts и перейдите к результатам. Ограничить список бесплатными вариантами можно позже, когда станет понятно, что найдено.
Буквы ARRIVALS в полях WhatFontIs после исправления I и V
Проверьте каждую букву под образцом. У нас пришлось исправить I и V.

В нашем примере сервис сначала прочитал I как маленькую l, а V — как маленькую v. Мы исправили два поля и запустили поиск. Первым результатом оказался Montserrat Bold — именно этим шрифтом набран исходный заголовок. В списке также нашёлся Montserrat 700 из Google Fonts.

Первый результат нужно сравнить с исходником

Для проверки мы загрузили тот же баннер в WhatTheFont и выбрали то же слово ARRIVALS. Первым он предложил Organetto Bold. На первой странице совпадения с Montserrat не было; остальные страницы мы не перебирали. Это результат одного образца, а не рейтинг точности сервисов.

Первый результат WhatTheFont: Organetto Bold для слова ARRIVALS
WhatTheFont поставил первым Organetto Bold. В нашем исходнике использован Montserrat.

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

Проверьте кириллицу, толщину и условия использования

Откройте страницу найденной гарнитуры. Для нашего примера это Montserrat в Google Fonts. В поле Type here to preview text введите свою русскую надпись: в разделе Styles она появится в разных начертаниях. Мы проверили строку «Новая коллекция · Ёж · 1 990 ₽» — буквы и знак рубля отображаются.

Русский текст, буква Ё и знак рубля в Montserrat SemiBold 600 и Bold 700, прямом и курсивном
В Google Fonts можно проверить русский текст и сравнить толщину букв.

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

Montserrat из Google Fonts распространяется по SIL Open Font License 1.1 и подходит для коммерческих баннеров. Для другого найденного шрифта проверьте его собственную лицензию: бесплатное распознавание не означает бесплатное использование.

Сохраните в папке проекта название семейства, начертание, источник скачивания и лицензию. Тогда для следующего поста не придётся искать всё заново. Если нужно поправить саму картинку, у нас есть разбор правки готового баннера в Google Pics.

Источники

Пусть в работе будет больше ясности.