24 апреля, 19:00. «Колмогоров: как создать шрифт на основе почерка ученого». Присоединиться

За 10 лет работы шрифтовой студии мы нарисовали 1.500.000+ знаков. Протестируйте шрифты TypeType

У нас появился электронный каталог! Знакомиться с нашими гарнитурами стало еще удобнее. PDF-каталог шрифтов TypeType

Используйте подписку на шрифты! Полная библиотека из 75+ шрифтов всегда будет у вас под рукой. Узнать больше

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

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

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

Увлечённый дизайнер всегда находится в активном поиске новых шрифтов. Не только во время работы.

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

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

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

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

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

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

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

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

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

Это может быть:

  • Расширение для браузера;
  • Поиск названия в коде страницы;
  • Поиск шрифтов по изображению с помощью онлайн-сервисов;
  • Определение шрифта в Adobe Photoshop.

Давайте подробнее остановимся на каждом из них.

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

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

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

Fonts Ninja

Браузеры: Chrome, Firefox, Safari.

Сайт: https://www.fonts.ninja/

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

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

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

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

WhatFont 

Браузеры: Chrome, Safari.

Сайт: https://www.whatfontis.com/

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

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

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

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

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

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

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

Чтобы сделать это в браузерах Chrome и Firefox, кликните на текст правой кнопкой мыши и выберите пункт выпадающего меню с просмотром кода, затем найдите закладку «Elements», затем «Styles», в котором будет код font-family.

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

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

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

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

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

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

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

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

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

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

Вы можете определить шрифт на изображении, используя Adobe Photoshop. Функция «Подбор шрифта» постоянно совершенствуется, но на данный момент поддерживает не все языки. 

Чтобы воспользоваться функцией, вам нужно:

  1. Выделить текст на изображении, используя инструмент «Прямоугольная область»;
  2. Кликнуть на пункт «Текст» «Подбор шрифта»;
  3. В списке похожих шрифтов выбрать наиболее подходящий.

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

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

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

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

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

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

Последние публикации

20+ лучших тонких и легких шрифтов 2024 года для элегантного дизайна

20+ лучших тонких и легких шрифтов 2024 года для элегантного дизайна

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

Узнать больше
Шрифты как IT-продукт: типографика в цифровую эпоху

Шрифты как IT-продукт: типографика в цифровую эпоху

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

Узнать больше
УниверситеТТ: Урок 7. Отрисовка базовой латиницы: высота знаков, контраст и оптические размеры 

УниверситеТТ: Урок 7. Отрисовка базовой латиницы: высота знаков, контраст и оптические размеры 

Добро пожаловать на седьмой урок нашего «УниверситеТТа»! Мы продолжаем погружаться в процесс создания шрифтов. Сегодня мы продолжим говорить об оптических компенсациях и поймем, как определиться с высотами прописных и строчных знаков, а также разберемся с понятием контраста

Узнать больше

Узнать больше

Шрифты для верстки книги: как выбрать лучший

Шрифты для верстки книги: как выбрать лучший

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

Узнать больше
УниверситеТТ: Урок 1. Классификация шрифтов

УниверситеТТ: Урок 1. Классификация шрифтов

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

Узнать больше
Онлайн-магазин TypeType: оплата банковскими картами для вашего удобства

Онлайн-магазин TypeType: оплата банковскими картами для вашего удобства

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

Узнать больше