Выбираем веб-шрифты: руководство для начинающих

Содержание

Поиск шрифта по картинке с whatfontis

  1. Загружаем изображение со шрифтом с компьютера.
  2. Заливаем по url.
  3. Открываем дополнительные настройки.
  4. Отмечаем если по картинке есть тень.
  5. Если линия шрифта идет не четко по горизонтали, то его надо выровнять, отмечаем галочку.
  6. Если необходим редактировать файл, то на сервисе есть встроенный менеджер.
  7. Продолжить.

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


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

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

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

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

Which Tool Do You Use?

Clearly, several of these apps have similar features and functions. However, to be safe, you should never rely on just one of them.

Some fonts are extremely similar, so it’s prudent to run your image through several of the tools to ensure they agree on the result before downloading and using the font yourself.

Better yet, why not build your own extensive font library with these free font bundles for graphic designers and these free Google fonts you can use in presentations.

The 10 Best Free Font Bundles for Graphic Designers

If you’re a graphic designer, picking fonts can be a daunting task. However, these free font bundles should help you out.

How to Learn to Code the Easy Way (and Earn More Money)

Programming skills can take your existing career to new heights, even if you don’t have a computer science degree.

About The Author

Dan joined MakeUseOf in 2014 and has been Partnerships Director since July 2020. Reach out to him for inquires about sponsored content, affiliate agreements, promotions, and any other forms of partnership. You can also find him roaming the show floor at CES in Las Vegas every year, say hi if you’re going. Prior to his writing career, he was a Financial Consultant.

More About Dan Price

Compatability

One final note: You may notice that some of the fonts don’t work on Instagram. Unfortunately Instagram filters out some of the fancy letters and symbols — probably because they don’t want people to abuse certain Unicode stuff like the excessive diacritics used in the «glitch text» font that you’ll see in the list.

Okay, that’s all for now folks! I hope you find all these Instagram fonts useful! You can keep clicking that «show more» button, and it’ll keep randomizing all the different symbol alphabets all day long. If you have a stylish text font that you’ve created, or you want to share some feedback, please share it here. I’m always playing around building new websites, so if you’ve got any other ideas for text generators or text fonts, feel free to share those too. 𝒯𝒽𝒶𝓃𝓀𝓈 𝒻𝑜𝓇 𝓈𝓉𝑜𝓅𝓅𝒾𝓃𝑔 𝒷𝓎! ٩( ᐛ )و

Специальные сервисы

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

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

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

What font is

Ресурс What font is позволяет опознать шрифты с картинки бесплатно и достаточно быстро, но работает только с латиницей.

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

Порядок действий для пользователя ресурса следующий:

  • Открыть главную страницу сервиса.
  • Загрузить на сайт изображение, щёлкнув по форме с надписью Upload image containing the font или вставив ссылку на картинку в Сети.

Рис. 1. Загрузка изображения на сервис What font is.

  • Нажать на «Find a font».
  • Выбрать, будет ли распознаваться изображение без изменений или при распознавании будет выполнено реверс цветов, а также установить определяемую область.

Рис. 2. Выбор реверса цветов.

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

Рис. 3. Настройки изображения.

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

Рис. 4. Расстановка букв.

Выбрать подходящий вариант из появившегося на экране списка.

Рис. 5. Список подходящих шрифтов.

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

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

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

WhatTheFont

Ещё один способ распознать шрифты – перейти на сайт сервиса WhatTheFont и воспользоваться уже его помощью.

Благодаря стараниям сообщества My Fonts, ресурс получил огромную базу данных и является одним из самых удобных в использовании.

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

Действия пользователей должны быть следующие:

Открыть страницу и загрузить изображение с текстом.

Рис. 6. Начало работы с сервисом – загрузка изображения.

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

Рис. 7. Выбор области распознавания.

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

Рис. 8. Результаты поиска.

Identifont

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

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

Рис. 9. Вопросы, задаваемые сервисом.

Bowfin Printworks


На сайте Bowfin Printworks можно найти значительное количество данных, касающихся различных шрифтов, и идентифицировать тот, который находится на картинке.

Работать с сервисом удобнее, чем с Identifont, но времени придётся потратить больше по сравнению с WhatTheFont.

Рис. 10. Главная страница ресурса Bowfin.

На сайте можно найти удобное руководство по самым популярным в дизайне вариантам шрифтов – таких как Serif, Sans Serif и Script.

Кроме того, есть возможность задавать вопросы владельцу сайта по поводу неопределённого набора символов.

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

TypeNavigator

Ресурс TypeNavigator предлагает собственный подход к поиску шрифтов.

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

С помощью сервиса пользователь постепенно сужает количество вариантов и после недолгих поисков получает положительный результат.

Рис. 11. Варианты наборов символов, которые предлагает сайт TypeNavigator.

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

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

Онлайн-сервисы

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

WhatTheFont

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

Порядок работы:

  1. Откройте сайт.
  2. В правом верхнем углу нажмите на надпись «WhatTheFont» и во всплывшем меню выберите «WhatTheFont», как показано на рисунке.
  3. Перетащите изображение с искомым шрифтом в пунктирный прямоугольник или нажмите на подчёркнутый текст, чтобы выбрать его из галереи устройства.
  4. После того как картинка будет загружена, программа предложит вам выделить шрифт для распознавания. Выделите нужную область и нажмите на синюю стрелочку.
  5. Распознавание шрифта длится от нескольких секунд до минуты. После завершения поиска вам будет предложено несколько вариантов шрифтов на выбор. Выберите наиболее подходящий и скопируйте его название.
  6. При желании можно сразу же приобрести понравившийся шрифт на сайте за определённую плату.

FONT IDENTIFIER от Font Squirrel

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

FONT IDENTIFIER качественно распознает и латинские, и русские буквы.

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

  1. Зайдите на сайт. На горизонтальной панели меню выберите пункт «FONT IDENTIFIER».
  2. Нажмите кнопку «Upload Image» и загрузите скриншот изображения.
  3. Выделите текст для распознавания в специальную рамку. Для регулировки границ используйте левую кнопку мыши.
  4. Нажмите кнопку «Matcherate It!», расположенную в нижней части окна, и дождитесь результатов.
  5. Сравните предложенные варианты с первоначальной версией (она будет размещена в центре экрана).
  6. Скопируйте название понравившегося шрифта в буфер обмена или сразу загрузите его с сайта.

На Font Squirrel представлены как платные, так и бесплатные шрифты.

Fontspring

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

  1. Откройте страницу поиска.
  2. Нажмите кнопку «Upload Image» и загрузите картинку для распознавания.
  3. Выделите область с нужным текстом и нажмите зелёную кнопку «Matcherate It!».
  4. После поиска сервис предложит несколько вариантов шрифтов, похожих на заданный. Выберите лучший.

IdentiFont

Работа сервиса IdentiFont несколько отличается от остальных. Он предлагает несколько вариантов поиска шрифта: по картинке или символу (Fonts by Picture), по имени дизайнера (Fonts by Designer), по внешним признакам (Fonts by Similarity), по части названия (Fonts by Name) или с помощью наводящих вопросов (Fonts by Appearance).

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

Как узнать шрифт по картинке

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

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

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

Text Fonts or Text Symbols?

ASCII characters are the first 128 symbols of Unicode, and these are the things that you’re reading right now. But there are far more than 128 symbols in Unicode, and it just so happens that there are quite a few that look a bit like the normal Latin alphabet (i.e. that look like English text). We can take advantage of that to make «pseudo-alphabets» which resemble normal ASCII text, but which have certain differences — such as being bolder, or italic, or even upside down! These «alphabets» often aren’t perfect — they’re basically «Unicode hacks» which take advantage of various symbols from different sets all throughout the 100k+ symbols in the standard.

The term «font» actually refers to a set of graphics that correspond to some or all of the Unicode glyphs. You’ve probably heard of «Comic Sans» and «Arial» — these are fonts. What you’re copying and pasting above are actually symbols that exist in every font. So the cursive text and other fancy letters that you’re seeing above are actually separate character, just like «a» and «b» are separate characters.

WhatTheFont

WhatTheFont is arguably the most well-known of all the free font finder apps.

There is no sign-up process and the app is easy to use. Click Upload an image or drag-and-drop the file to start the process, and the app will take care of the rest.

The site includes three tips for ensuring the process is successful. You should apply these tips to any of the tools we discuss in this article:

  • Try and limit font height to 100 pixels.
  • Try and upload horizontal images.
  • Ensure the letters aren’t touching each other.

If your original image doesn’t match these requirements, edit it in an app like Photoshop before you upload it.

If the app cannot match your image to a font, head over to the thriving forum section. Here, you’ll find a community of font experts. Post your picture and someone will quickly jump into help.

You can also download WhatTheFont on Android and iOS. It can read images you have saved in your phone’s library and can also work «on-the-fly» with your device’s camera. It’s the perfect companion if you frequently find yourself wondering about fonts used on billboards and in shops.

Font Squirrel

Font Squirrel is more than just a font identifier and font search tool. It works in the same way as WhatTheFont, but also allows you to download any fonts it recognizes—assuming it’s available in the company’s database. Some of the fonts are free; some require a one-off payment.

When you upload your image, the tool will automatically detect individual shapes. Just enter the corresponding letter below each shape you want to use in your scan. You don’t have to use all the letters, which is useful if your image has an amalgamation of several different fonts.

The site claims you can use any fonts you download in both personal and commercial projects, but always check each font’s individual license before proceeding.

Лучшие сервисы для определения шрифта по изображению онлайн

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

Сервис «WhatTheFont» поможет идентифицировать красивый шрифт

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

  1. Нажмите на кнопку «Choose File» (выбрать файл), и выберите на жёстком диске вашего ПК картинку с нужным вам фоном.
  2. Затем нажмите на кнопку «Continue».

Рабочее окно сервиса «WhatTheFont»

Сервис проведёт процедуру распознавания, и откроет вам экран, на котором вам предстоит определить, верно ли сервис распознал буквы (если нет, введите необходимые коррективы).

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

Сервис «FontSquirrel» распознает буквы алфавита онлайн

Сервис «Font Squirrel» — ещё один англоязычный ресурс для поиска шрифта онлайн. Как и в случае с «WhatTheFont»  вы сможете не только возможность распознать нужный нам алфавит, но и сразу скачать его с базы данного ресурса (как бесплатно, так и за деньги).

  1. Теперь разместите нужный для распознавания шрифта текст в специальной рамке (размер рамки регулируется, как и регулируется размер текста).
  2. А затем кликните на кнопку «Matcherate It!».

Рабочее окно сервиса «FontSquirrel»

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

Каким образом определить русский шрифт по картинке

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


Западные сервисы преимущественно работают с латиницей

Осознавая подобный «латинский» акцент, ряд мировых стран (Китай, Япония, страны ближнего Востока и др.) направили свои усилия на создания собственных веб-ресурсов, обслуживающих особенности их собственных шрифтов. В России такие ресурсы на данный момент отсутствуют, как и не слышно об их появлении в ближайшем будущем.

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

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

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

При необходимости помогите ресурсу в определении отдельных букв

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

WhatFontIs

The final tool we’re going to talk about is WhatFontIS. It’s arguably more powerful than Fontspring, but it requires registration if you want to access the full range of features.

There are a couple of restrictions for all users: images sizes cannot be greater than 1.8 MB, and it only supports JPEG, JPG, GIF, and PNG.

The app has two other significant benefits:

  • Browser Extension: There are add-ons available for both Chrome and Firefox, allowing you to identify any font you come across online instantly.
  • PDF Fonts: The nature of PDFs make them difficult to extract fonts from; they’re not images, and they’re not traditional text documents. WhatFontIs’ PDF scanner lets you upload PDF files. The tool then scans the document and supplies a list of any fonts it finds.

Like WhatTheFont, there is an active forum section if you want to discuss your fonts in more detail.

Текст на картинке (кириллические)

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

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

  1. Зайдите на сайт fontmassive.com и вставьте в сообщение картинку. Для этого либо перетащите его из окна проводника с помощью зажатой левой кнопкой мыши прямо в строку, либо нажмите на соответствующий значок. 
  2. Напишите какое нибудь сообщение или комментарий, введите свое имя и почту, чтобы получить уведомление когда вам ответят, и нажмите «Отправить».
  3. После этого либо периодически заходите на сайт, чтобы проверить, как там поживает ваш пост, либо ждите, когда придет уведомление на почту. Обычно это не занимает много времени. 

Текст на веб-страницах

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

  1. Для начала нужно установить само расширение в браузере google chrome, называется оно Whatfont. Как ставить расширения вы можете посмотреть на примере этой статьи. Так что если вы не знаете, то почитайте. 
  2. Теперь зайдите на любой сайт и нажмите на появившийсязначок расширения в правом верхнем углу, после чего наведите курсор на любой фрагмент текста. Видите? Появилась рамочка с названием шрифта. Собственно это и есть то, что мы искали. 
  3. А если нажать нажать левой кнопкой мыши по фрагменту, то вам откроется окошко с более подробной информацией. Кроме самого названия шрифта вы сможете увидеть его размер на данном фрагменте, а также его цвет. 

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

Как распознать текст онлайн с помощью Whatfontis.com

Англоязычный ресурс whatfontis.com может похвалиться огромной базой коммерческих и бесплатных шрифтов, а также развитым AI для их поиска. Авторы ресурса обещают найти 60 платных и 60 бесплатных шрифтов-аналогов для каждого загруженного пользователем шрифта. Ресурс имеет не только инструментарий для идентификации шрифтов онлайн, но и форум, на котором вы найдёте помощь людей.

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

Выполните следующее:

  1. Кликните на «Browse» для загрузки картинки со шрифтом на ресурс;

    Кликните на «Browse» для загрузки изображения со шрифтом на ресурс

  2. После загрузки картинки сервис предложит вам помочь с идентификацией отдельных букв (достаточно 4-10 букв). Введите их правильные значения под каждой из предложенных букв ниже. Затем нажмите на «Continue»;
  3. Просмотрите полученные результаты с возможностью сохранения нужно шрифта (кнопка «Download»).Сохраните нужный шрифт с помощью сервиса Whatfontis.com

«IdentiFont» сервис для поиска шрифта

Данный сайт обладает пятью уникальными инструментами:

  • «Fonts by Appearance» (идентификация шрифта по внешнему виду);
  • «Fonts by Name» (определение шрифта по названию или части названия);
  • «Fonts by Similarity» ( по схожести);
  • «Fonts by Picture» (поиск почерка по картинке);
  • «Fonts by Designer/Publisher» (по имени создателя или издателя).

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

Рабочее окно сервиса «IdentiFont»

Англоязычный сервис для определения шрифтов Fontsquirrel.com

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

  1. И нажмите на кнопку «Upload Image» для загрузки картинки с нужным шрифтом на ресурс.
  2. Разместите нужный вам текст с картинки в центре рамки и нажмите на кнопку «Matcherate It!» внизу (процедура de facto идентична вышеописанному ресурсу «FontSquirrel»).
  3. Вы получите результат со списком найденных совпадений.

Рабочее окно сервиса «FONTSPRING»

Текст на картинке (только зарубежные)

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

  1. Заходим на сайт myfonst.ru в раздел whatthefont. Именно на этом сервисе мы и будем искать то, что нам нужно.
  2. Так. Теперь нажмите на «Выберите файл» и найдите на своём компьютере ту картинку, по которой вы хотите найти шрифт. Сдалали? Отлично. Теперь нажмите «Continue». 
  3. Дальше сервис попробует определить правильно ли он расшифровал буквы на этом изображении. Если где-то остались пустые клеточки или вы видите, то буква в клетке не соответствует действительности, то помогите сервису и расставьте буквы как надо. Это и нужно для самого определения. 
  4. Далее, после обработки, вам высветятся все похожие шрифты, которые нашлись в базе. Во, я как раз нашел и тот, который использовал. Хотя и остальные похожи по написанию. 

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

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

Copy and Paste

So why doesn it matter that they’re separate characters? Who cares? Well, you do! Because if they weren’t (i.e. if they were just normal fonts), then you wouldn’t be able to copy and paste them! You can’t copy and paste some Comic Sans into your Instagram bio because the symbols the you’d be copying would just be normal ASCII characters, and the fact that they’re rendered in one font on one website doesn’t mean that they’ll appear as that same font on another — it’s up to the website owner to decide what fonts they use on their website. However, if there’s a set of unicode characters that looks like a specific font, or has a particular style (e.g. bold, italic, cursive, etc.), then we can use them to «emulate» a font that will work across different websites when you copy and paste those «fonts».

So really, if I were to be really pedantic, this site should be called «pseudo instagram fonts». But the current name gets the point across, and it’s nice and short 🙂 So, anyway, that’s why you’re able to copy and paste these fonts into Instagram.

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

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

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

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

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

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

Что такое гарнитура

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

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

Начертание

характеристика

Толщина

Светлое (Thin, Light); нормальное (Regular); полужирное (DemiBold, SemiBold); жирное (Bold, Extra Bold)

Наклон

Прямое, курсивное

Ширина

Узкое (Narrow, Condensed); нормальное; широкое (Wide, Extended, Expanded)

Условия успешного распознавания шрифтов

Чтобы программа смогла распознать шрифт, к картинке предъявляются определённые требования. Для большинства приложений и сервисов они одинаковы:

  • каждый символ отделён от соседних;
  • буквы имеют четкие, хорошо различимые контуры;
  • картинка сохранена в формате JPG или PNG (при необходимости ее можно переформатировать в графических редакторах);
  • качество изображения не снижается при масштабировании, поскольку многие программы требуют подгонки высоты букв под некий шаблон.

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

  1. Сделайте скриншот или фото объекта, на котором размещен нужный шрифт.
  2. Вставьте картинку в поисковое окно программы и запустите процесс сравнения.
  3. По запросу выделите область, где расположен текст.
  4. Оцените результат. Многие программы выдают несколько вариантов шрифтов, наиболее похожих на образец.
  5. Скачайте и установите шрифт в систему. Некоторые сервисы предлагают купить или загрузить его бесплатно со своих ресурсов.

Далее рассмотрим наиболее популярные сервисы и приложения для распознавания шрифтов.

Fontspring

Fontspring is another tool for performing font detection from an image. Visually, it’s very similar to WhatTheFont, but it introduces a couple of features its competitors do not offer.

Firstly, there’s an image editor. If you photograph is too small, is poorly spaced, or has letters touching each other, you can use the editor to make the adjustments before performing a scan.

Secondly, there a tag feature. It lets you add characteristics to your upload in a bid to find non-mainstream fonts.

Lastly, the tool supports OpenType feature detection. OpenType is a file format used for scalable computer fonts.

The site supports both uploading images from your local computer and using an online image’s URL. You’ll also find an online font store, a searchable library, and even a web font generator.

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

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

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


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

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

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

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

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

  Скриним.

Растр

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

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

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

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

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

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

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

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

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

Вектор

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

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

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

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

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

Классификация шрифтов

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

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

Антиква — шрифт с засечками, поэтому часто в названии есть слово serif («засечка»). Популярная антиква: Times New Roman.

Шрифт Times New Roman

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

Гротеск — классификация шрифта без засечек. В названии его часто встречается слово sans («без»). Популярные представители гротеска: Arial, Helvetica, Verdana.

Шрифт Arial

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

Выводы

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

Даже если все способы, которые были описаны в статье, вам не помогли, не отчаивайтесь.

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

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

Как определить шрифт по картинке? Лучшие сервисы 2019 года

7.7 Total Score

Определяем шрифт по картинке

What The Font

8

What Font Is

8.5

Bowfin Printworks

7.5

Identifont

7

Flickr Typeface Identification

7

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

8

 | 


С этим читают