Как быстро определить шрифт на сайте: 4 способа

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

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

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

Зачем знать, какой шрифт используется на сайте?

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

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

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

Как узнать название шрифта на сайте

Существует несколько методов для определения шрифта, применяемого на веб-сайте проекта.

Возможны следующие варианты:

Давайте более детально рассмотрим каждый из них.

Браузерные расширения

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

Font Master

Популярные браузеры: Chrome, Firefox, Safari.

Посетите веб-сайт: https://www.fonts.ninja/

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

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

К слову, на сайте Fonts Ninja можно найти популярный шрифт от известной студии TypeType — TT Norms® Pro.

WhatFont is a useful tool for identifying fonts on websites.

Поддерживаемые браузеры: Chrome и Safari.

Ресурс: https://www.whatfontis.com/

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

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

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

Ручной поиск в коде страницы

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

Для использования ручного поиска необходимо выделить нужный участок текста и найти в коде страницы параметр Font Family.

Для того чтобы выполнить данное действие в браузерах Chrome и Firefox, необходимо нажать правой кнопкой мыши на тексте и выбрать опцию "Просмотреть код" из выпадающего меню. Затем перейдите на вкладку "Elements", затем "Styles", где вы найдете код font-family.

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

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

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

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

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

Чаще всего для идентификации шрифта на изображении применяются следующие онлайн-сервисы:

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

Определение шрифта в Adobe Photoshop

С помощью Adobe Photoshop можно определить шрифт на картинке. Функция "Подбор шрифта" постоянно улучшается, однако на данный момент не поддерживает все языки.

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

Бонус: приложения для смартфонов

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

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

Вместо выводов

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