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

FontSpace Fonts

FontSpace is your home for designer-centered, legitimate, and clearly licensed free fonts. You can use our font generator to create fonts that are easy to copy and paste into your website, social media profiles, and more.

All you have to do is type some text into the input box. You can change the font size of the previews via the slider next to the input box. You also have the option to change the foreground color.

Above, you’ll see 15 of our handpicked free downloadable fonts for every month. But you can access 1000s of more fonts—from cursive fonts to cool fonts and other trendy styles. 

FontSpace lets you generate different font styles using a large range of Unicode characters.

WhatFontIs

Another popular font identifier tool that will help you identifying that font you loved is WhatFontIs. It has options such as parsing text based on a dark or light background. Unlike the previous tool, with this one you can either upload a file with the font you want to identify, or you can insert a URL.

The previously mentioned options are great, but the next one is even better. The font identifier app allows you to limit the results based the fonts being commercial, free or even both. Thanks to this feature you don’t get too excited about a font to only find out that you have to pay for it. This way, you know which ones are free and which ones are not.

ContextFont Firefox Add-On

If you’re a Firefox user, then you’ll be happy to know that there are several add-ons you can try. They will identify the font that you like so much, so you can start using it as soon as possible. The first add-on is called Context Font, and you will need to restart Firefox to start using it.

Once you’ve restarted your browser, you will be able to know what font is this and get all sorts of information on the font. For example, you can get the Font size, Font family, Font style, Font weight, and font variant of the text you selected in the context menu. Keep in mind that it does not support downloading fonts from data URLs.

Расширения в браузере

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

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

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

Рис. 13. Встраиваемое в браузер Google Chrome расширение Naptha.

Расширение Naptha работает в браузере Chrome, но можно попытаться установить его и на другой веб-обозреватель.

Среди других вариантов стоит отметить Fontface Ninja для Chrome, Firefox и Safari и Typesample для Хрома.

 Есть собственные плагины и у популярных ресурсов – например, разработчики ресурса WhatTheFont создали дополнение Whatfont Tool для Хрома и Сафари, а у IdentiFont есть расширение с таким же названием. 

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

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

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

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

What font is

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

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

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

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

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

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

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

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

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

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

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

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

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

 Важно: Для работы с изображением оно должно иметь размер не больше 1,8 МБ и формат JPEG, GIF или PNG. Также рекомендуется распознавать только одну строку за раз – если шрифтов несколько, выделяется часть картинки. 

WhatTheFont

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

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

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

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

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

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

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

 Важно: Для распознавания требуется выполнение определённых условий: размеры картинки должны быть в пределах 360 х 275 пикс., формат – PNG или JPG. Также рекомендуется, чтобы высота каждого символа была не меньше 100 пикселей. 

Identifont

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

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

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

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

Bowfin Printworks

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

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

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

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

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

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

TypeNavigator

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

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

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

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

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

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

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

Текстовые инструменты

Identifont

Сервис под названием Identifont использует другой интересный подход к решению задачи. Вместо загрузки изображений здесь вам предлагается ответить на несколько наводящих вопросов по искомому шрифту: наличие засечек, формат букв «J», «Q» и символа «$» и др.

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

Bowfint Printworks

Сайт Bowfint Printworks пригодится, если вы пытаетесь узнать шрифт онлайн с засечками из семейства Serif. Здесь задается ряд вопросов по форме глифов для некоторых элементов шрифта (см. скриншот выше). Этот ресурс по специфике похож на предыдущий, но в работе он быстрее, т.к. все задания сразу отображаются на одной странице без переходов. Если у вас что-то не получилось, можете написать автору проекта на почту. Здесь также содержатся руководства Script, Bauhaus-style, Sans Serif и Serif, и Lined.

Форумы и опросники

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

Например:

• Раздел Typeface Identification на Quora – одном из крупнейших порталов по вопросов-ответов (он там, судя по всему, далеко не один).
• Группа typeid (Flickr Typeface Identification) на популярном фотохостинге Flickr – аналогично нужно добавить любую картинку и ожидать подсказки от пользователей. Обновления были недавно, значит группа активна.
• Typophile – сообщество экспертов, где вы можете загрузить свое изображение для получения “помощи из зала”.

1. 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.

О WhatFont Кто за этим стоит

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

WhatFont был создан Chengyin Liu, в настоящее время студентом факультета компьютерных наук. У него есть несколько проектов, на которые он ссылается на своем личном сайте. Одним из этих многочисленных проектов является WhatFont.

Страница WhatFont содержит буквально всю необходимую информацию, включая инструкции по ее использованию. Несколько примеров предоставленной информации — это поле тестирования, журнал изменений и контактная информация разработчика Chengyin.

Desktop Fonts

• How do I install my fonts?
• OpenType application and system support
• What are the differences between OpenType font varieties such as Std, Pro, and Com?
• Not all of my font styles are appearing in my font menu
• My desktop fonts look different than the sample on the site
• If I install a desktop font using Monotype Library Subscription, can I use it like a desktop license?
• How do the desktop fonts included with Monotype Library Subscription work?
• How do I install subscription desktop fonts included in my subscription?
• How long do subscription desktop fonts remain on my workstation?
• How many users and workstations can use subscription desktop fonts?
• How do I send a subscription font?

Распознавание шрифта на картинке

Вариант 1: с помощью ABBY Fine Reader

Если кто-то не слышал о такой программе как ABBY Fine Reader — то кратко скажу, что она предназначена для распознавания текста с картинок, PDF-файлов, сканов и пр. (т.е. на входе — у вас обычный графический файл; на выходе — программа выдает вам текст, который можно перенести в Word).

Так вот, Fine Reader по умолчанию при распознавании текста не меняет шрифт! То есть, при процессе распознавании шрифт текста будет выбран тот, который запечатлен у вас на графическом файле (фото, картинке и пр.).

Покажу на примере, как это работает…

1) Установку и запуск программы я опускаю (они стандартны и никаких сложностей возникнуть не должно). Далее нужно нажать по меню “Файл/Открыть PDF или изображение” и указать картинку/фото, на котором находится нужный текст…

Открыть PDF или изображение

2) Распознавание картинки по умолчанию происходит автоматически (примечание: слева отображается исходная картинка — справа результаты распознавания).

В общем, когда программа закончит свою работу — останется только кликнуть в нужный участок полученного текста, и вы увидите его шрифт. В качестве примера ниже я загрузил скриншот странички своего сайта, Fine Reader выдал шрифт Georgia (правильно!).

Шрифт Georgia (Скриншот ABBY Fine Reader)

Проверить это достаточно просто — перейти в браузер, открыть любую страничку сайта ocomp.info и посмотреть исходный код документа (на скрине ниже показано, как это выглядит в Chrome).

Проверка, что Georgia

В качестве еще одного примера взял фото разворота книги “Война и Мир”. Используемый шрифт — Times New Roman.

Times New Roman — скриншот из ABBY Fine Reader

Удобно? Вполне! Я думаю, что этот способ — один из наиболее эффективных (особенно, если речь касается русскоязычного текста).

Вариант 2: с помощью онлайн сервисов

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

Впрочем, есть и преимущество: они могут определить шрифт даже в том случае, если у вас его нет на ПК. Ниже привожу несколько ссылок:

1. https://www.myfonts.com/WhatTheFont (сервис для авто-распознавания шрифта. Обычно всегда рекомендует платные версии шрифтов, в то время как они почти не отличаются от обычных…);
2. https://www.fontspring.com/matcherator (аналогичный сервис);
3. https://www.whatfontis.com/ (аналог предыдущих, правда работает через раз, но все-таки…);
4. https://www.xfont.ru/russian (богатая коллекция русских шрифтов);
5. http://fonts.by/pages/russian.php (И еще одна… Здесь собрано более 1000 разнообразных шрифтов! ).

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

Рассмотрю работу в одном из сервисов — myfonts.com (он первый в моем мини- списке). После перехода на сайт — вам нужно загрузить изображение и выбрать область текста на нем (см. шаг 1 и 2 на скриншоте ниже).

Загрузка картинки и выбор текстовой области

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

Ну и чем Impact MT отличается от Impact… (результаты работы)

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

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

Font Finder for Firefox

If the first Firefox add-on to know what font is this didn’t convince you hopefully, you’d like Font Finder. It will completely analyze any font on any page and any piece of the fonts information can be copied to the clipboard. If you want, you also have the option of disabling font-families from the entire page to test degradation for cross-OS support.

When a font in captured, you get information such as what font is this, its Font color, Background color, Font family, Font size, Line-height, Font Weight, Text transform and the type, class, and ID. As you can see, you get one very complete report of the font you selected.

Особенности реализации поиска шрифта по картинке онлайн

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

Узнаем шрифт при помощи поиска исходника изображения через поисковики

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

В общем, план действий будет таков:

1. Скачайте картинку, исходник которой вы захотите найти;
2. Затем зайдите в Google или Яндекс картинки, и выполните поиск по картинке, нажав специальную кнопку.

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

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

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

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

1. MyFonts.com;
2. Typophile;
3. FontMassive.com;
4. Photoshop-master.ru;
5. Сообщество Typeface Identification на Flickr.

Поиск шрифта по картинке с помощью специализированных онлайн-сервисов

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

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

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

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

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

1. Первым делом вам нужно будет посетить специализированный онлайн-ресурс;
2. Загрузить на него с компьютера картинку с искомым шрифтом, либо же, указать ссылку на эту картинку в сети;
3. На следующем этапе нужно будет выделить текст на картинке, шрифт которого вы хотите распознать и нажать кнопку для начала идентификации;
4. Далее, дожидаетесь завершения процедуры распознавания шрифта, после которой сайтом будут выданы результаты в виде визуально схожих шрифтов с их названиями, а некоторые сервисы даже позволят вам понравившейся шрифт скачать себе на компьютер.

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

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

FontEdge

FontEdge may not be the popular group, but it does the job well. In the upper left-hand corner, you will see the Image icon with an arrow pointing up, that’s where you need to click on to upload your image. Once you see your image, click on a letter whose font you want to identify.

At the bottom, the letters you clicked on will appear under Letter to identify fonts. Make sure to type in the letter in the box right below and when you’re done choosing, click on the identify font button. You should now see a list of possible fonts for your selection with the letter itself and the name of the font. There is no limit to how many times you can use the font identifier tool since it’s completely free.

Как определить шрифт по картинке и не только. Обзор лучших сервисов

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

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

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

Вот это надпись:

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

Первый сервис, с помощью которого мы будет определять шрифт —

1. WhatFontIs, адрес — https://www.whatfontis.com/

   Нажмите на кнопку “Browse” для выбора картинки с текстом. Далее вам предстоит выбрать один пункт и даух:

   • The background color is lighter than the characters color – означает, что цвет фона светлее цвета букв и символов,
   • The background color is dark, please invert colors – светлый текст на темном фоне. Теперь нажмите на кнопку “Continue” для продолжения.

     В новом окне вам предстоит идентифицировать буквы – введите каждую букву в соответствующую для нее поле.

     Снова кнопка “Continue” и перед нами список наиболее похожих шрифтов. Кстати, сервис правильно определил шрифт. Первый вариант – правильный.

     Оценка сервиса – 5 баллов.

2. What The Font, адрес https://www.myfonts.com/WhatTheFont/ xdf

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

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

   Я добавила букву f, исправила S на i и дописала точку в свободное поле. Снова “Continue”.

   И этот сервис отлично справился с заданием, правильно угадав шрифт. Единственный недостаток сайта What The Font это меньшее количество шрифтов по сравнению с WhatFontIs.

   Оценка сервиса – 5 баллов.

3. Это были сервисы, которые определяют шрифт по картинке. Однако, есть сайты, где работает поиск шрифта по отдельным отличительным элементам. Identifont адрес https://www.identifont.com/index.html

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

   Примеры вопросов, на которые вам предстоит ответить:

   есть ли у шрифта засечки,

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

   Мне не удалось с помощью этого сервиса найти нужный шрифт. Тест на пройден.

6. Font Finder Firefox Add-On — дополнения для Firefox, которое определяет какой шрифт используется на сайте. Просто выделите слово на сайте, и дополнение определит шрифт и стиль CSS. Ссылка на дополнение https://addons.mozilla.org/en-US/firefox/addon/font-finder/
7. Bowfin Print Works — https://www.bowfinprintworks.com/SerifGuide/serifsearch.php Сервис, который основан на вашем представлении о том, как выглядит шрифт, вам нужно провести детальный анализ букв и их элементов.

   С помощью данного сервиса также не удалось определить шрифт.

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

vgrafike.ru

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

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

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

Определите каждому шрифту его задачу и придерживайтесь её.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Измените размер кегля. Сочетание шрифтов может не согласоваться, но если вы измените размер одного из шрифтов, всё станет на свои места.

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

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

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

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

5. 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.

Why You Might Want to Check What Font a Website Is Using

As we already mentioned, beautiful and readable fonts can improve your site’s User Experience (UX) and readability. It also ensures that visitors can comfortably engage with your content without struggling to decipher it. If your text is stylish but illegible, readers will find it difficult to understand or appreciate your material.

Call to Action (CTA) buttons may also turn out to be all but useless if their text isn’t readable. This is why you might find it handy to keep a list of fonts that catch your attention for being both stylish and legible. You can then use them on your site or for a client in the future.

Shopping on Fonts.com

• What are your data replacement, exchange, and refund policies?
• Where can I view the font license before purchasing?
• What are my licensing options?
• Why do I get the error «Does not appear to be a valid font?”
• Why do my fonts disappear when I restart my computer?
• I received my receipt but no fonts were attached
• Currency and payment options
• Can I download my order again?
• How do I clear my Fonts.com cookies?
• I am looking for free fonts and I keep ending up here
• I ordered the wrong font format/platform
• Why can’t I buy certain fonts from the country I live in?
• What does the LT, MT, or EF in my font name stand for?
• I am getting an error message at checkout
• What if my organization is tax exempt?
• Can my Fonts.com account be transferred to a different user?

Conclusion

Visually appealing and legible fonts can enhance the reading experience for your website’s visitors. This might prompt you to stay on the lookout for new typefaces that you could use either on your site or for your clients. Regardless of your reason for wanting to check what font a website is using, there are many tools that can help you.

In this post, we discussed three methods to see what font a website is using:

1. Identify fonts using your browser inspector tool.
2. Find fonts using a browser extension such as WhatFont.
3. Detect fonts in images using WhatTheFont.

Do you have any questions about how to check what font is used on a website? Let us know in the comments section below!

Image by rudall30 / shutterstock.com