5 инструментов для определения шрифта
Вы когда-нибудь встречали шрифт, который идеально подходил для вашего проекта, но не могли его опознать? Или другая частая история: вашему клиенту нужно, чтобы шрифт соответствовал существующему дизайну, но название его он, конечно, не помнит. В этом материале — о том, как быть в подобных ситуациях.
Общие советы
Первый, самый просто шаг: если вы работаете с клиентом, спросите у него, знает ли он название шрифта и заплатил ли за него.
- Существует множество инструментов для идентификации шрифта, но все они имеют свои ограничения. Именно здесь пригодится знание теории типографики, чтобы вы могли понять, как найти шрифт, наиболее похожий на тот, который нужен. Зная анатомию шрифта, вы можете лучше понимать, чем отличаются шрифты и почему именно они выбраны для проекта. Обращайте особенное внимание на штрихи, линиям, засечкам, выносные элементы и т.д.
- Прежде чем искать шрифт, оптимизируйте изображение для поисковой системы. Создайте чёрно-белое высококонтрастное изображения, содержащее только символы. Это сделает поиск более быстрым и точным.
- Избегайте включения сложных вещей, таких как лигатуры, которые разветвляются на несколько букв. Большинство идентификаторов шрифтов не очень хорошо их распознают.
- Ищите специальный символ, который легко идентифицировать: например, строчная буква g, которая содержит уникальные идентификаторы в большинстве шрифтов. Если вы сузите изображение для поиска до нескольких отдельных символов, у вас будет больше шансов на успех.
Инструменты для определения шрифта
Дисклеймер: это отличные поисковые системы, но нет никакой гарантии, что вы найдете точное совпадение с первой попытки.
Простой и удобный метод поиска шрифтов. Просто перетащите изображение на страницу, обведите шрифт и позвольте MyFonts сравнить его с более чем 130 000 вариантов. Работает только с VPN.
Сервис работает так же, как и предыдущий. Перетащите изображение или загрузите его с компьютера, а дальше в работу вступает поисковая система.
Сервис содержит более 850 000 шрифтов для сравнения с вашим образцом. Из недостатков — достаточно назойливая реклама.
Сервис всё ещё выглядит как web 1.0 (логотип говорит сам за себя), но может быть полезен, так как помогает найти шрифты по наводящим вопросам об анатомии шрифта.
Функция подбора шрифта в ADOBE PHOTOSHOP
Система поиска шрифтов встроена в саму программу. Photoshop имеет достаточно мощный идентификатор шрифтов, подключенный к библиотеке Adobe Fonts.
Откройте изображение, которое вы хотите идентифицировать в Photoshop, и выделите шрифт. Затем перейдите в меню Type > Match Font. Это даст альтернативные варианты шрифтов, которые соответствуют особенностям выбранного вами изображения (только те, что доступны в Adobe Fonts). Это может оказаться полезным, если у вас нет бюджета на покупку новых шрифтов, но есть возможность найти похожие шрифты.
Загрузите шрифт прямо из библиотеки Adobe и сразу же приступайте к работе!
Как узнать шрифты, который используется на сайте?
Изучаю, к примеры, я сайты. Понравились шрифты на некоторых. Можно ли как-то в коде или еще как-то (я нуб в этом деле) узнать шрифты, которые использовались на каком-то из сайтов?
- Вопрос задан более трёх лет назад
- 12125 просмотров
- Вконтакте
Сначала кликаешь правой кнопки мыши на текст, у которого ты хочешь узнать шрифт и нажимаешь «Просмотр кода элемента».
У тебя появится консоль, и справа ищешь font-family:
Узнать какой шрифт используется на сайте
Часто возникает необходимость узнать, какой шрифт используется на том или ином сайте. Для этого нам нужно распознать, каким шрифтом оформлен текст на конкретной странице. Некоторым просто любопытно, но в основном этим интересуются веб-мастары и дизайнеры, которые ищут привлекательный шрифт, чтобы использовать его в своей работе. Теперь ни один сайт не сможет утаить от вас эту информацию. Самые популярные сайты откроют вам свои маленькие секреты, и вы наконец сможете сделать этот сложный и важный выбор. В этой статье мы рассмотрим 4 самых удобных и простых инструментов для распознавания используемого шрифта на странице.
1. Fontface.ninja
Это приложение для Chrome, которое встраивается в ваш браузер и активируется одним нажатием при необходимости. После установки, вам нужно зайти на страницу сайта, шрифт которой вы хотите распознать – и кликнуть на иконку «ниндзи» в правом верхнем углу браузера. Теперь приложение активно, и при наведении курсора мыши на текст – он мгновенно выдает не только его название, но и размер кегля, кернинг, и межстрочное расстояние. Также есть полезная функция «убрать всё лишнее», после использования которой – приложение скроет все элементы страницы кроме текстов. Приложение абсолютно бесплатное и не требует регистрации. Всё что вам нужно сделать это перейти на официальный сайт fontface.ninja, выбрать название браузера который вы используете, ознакомиться и подтвердить настройки приложения:
2. Typ.io Peek
Это тоже приложение для браузера, но оно работает немного иначе. После установки появляется буква «Т» в правом нижнем углу браузера. Приложение показывает сразу все шрифты, используемые на сайте, и обводит их соответствующим цветом. Это не всегда удобно. Часто нужно узнать один конкретный шрифт и нет необходимости в нагромождении информации. Установить Typ.io Peek можно напрямую из магазина Google Chrome (бесплатно).
3. Type Sample
Еще одно хорошее приложение, но оно доступно только для пользователей Chrome. Его отличием является возможность не только посмотреть все гарнитуры на сайте, но и сразу же их опробовать в специально отведенном окне. Также, при взаимодействии с Twitter можно создать свою собственную коллекцию шрифтов. Скачать Type Sample можно на официальном сайте. Эта программа является находкой для тех кому нужно узнать, какой шрифт используется на странице.
4. WhatFont
Самое универсальное приложение, которое подходит как для Chrome, так и для Firefox, и даже для Яндекс-Браузера. Этот инструмент выводит более чем исчерпывающий объем информации о шрифте, начиная с интервалов, заканчивая начертаниями и текущими цветовыми решениями. Вы сможете посмотреть гарнитуру в разных алфавитах, посмотреть используется ли в шрифте кириллица, и сможете даже скачать сам тут же, на месте, только если он есть в базе google fonts. Устанавливается в один клик, найти можно на официальном сайте. С этой программой вам не составит труда узнать, какой шрифт используется на сайте.
Как определить шрифт на сайте
Бывало ли у вас, что посещая какой-нибудь ресурс в Интернете, вам понравился используемый шрифт? Но как определить название шрифта на сайте? Есть несколько способов.
Используем расширение для браузера
Для каждого браузера есть множество расширений для определения шрифтов на странице сайта, вот самые популярные из них:
Fonts Ninja
WhatFont
Смотрим в коде страницы
Этот способ менее надежен, но позволяет быстро узнать название шрифта без установке расширений, может быть полезен если вам не хочется устанавливать расширение из-за одного раза.
Нажмите правой кнопкой мыши на текст с понравившимся шрифтом. И выберите пункт «Исследовать» в Firefox или «Посмотреть код» в Chrome.
Перед вам откроется окно для разработчиков. В правой части экрана найдите пункт начинающийся с «font-family», после него будет отображаться название шрифта.
Так же возможно вам будет интересно узнать как определить шрифт по картинке