Як визначити шрифт на вебсторінці: ТОП 6 онлайн-сервісів і розширень для Google Chrome
Шрифти — це невіддільна частина дизайну та візуальної ідентичності вебсторінок. Вони не лише встановлюють візуальну ієрархію та впливають на впізнаваність бренду, але й відображають характер, настрій та особливості проєкту. Але що робити, якщо ви натрапили на шрифт, який прикував вашу увагу, і хочете використати щось подібне у своєму проєкті?
У цій статті ми розповімо, як визначити шрифт на зображенні, розпізнати шрифт в CSS чи в браузері, а також як здійснити пошук шрифту по фото чи знайти його на вебсайті.
MyFonts by Monotype
MyFonts ― це онлайн-платформа, де зібрано понад 250 тисяч різноманітних шрифтів. Окрім можливості ознайомитися з різними видами гарнітури та офіційно придбати їх, цей веб-сайт надає можливість розпізнавання шрифту за зображенням.
WhatTheFont використовує алгоритми глибокого навчання для пошуку відповідності шрифту з вашої фотографії у своїй колекції. Інструмент впорається навіть якщо на зображенні є декілька різних шрифтів. Просто завантажте картинку, клацніть на шрифт, який потрібно визначити і переглядайте результати.
Важливо пам’ятати, що для досягнення найкращих результатів слід завантажити зображення високої якості і переконатися, що текст на ньому горизонтальний.
WhatFontIs
Онлайн-сервіс WhatFontIs має вражаючу базу даних з більш ніж 900 тисячами шрифтів, що дозволяє знайти навіть дуже рідкісні або непоширені шрифти.
Окрім великого каталогу, цей сервіс має ще декілька переваг:
- розпізнавання шрифтів за допомогою штучного інтелекту;
- WhatFontIs надає користувачам список можливих альтернатив та схожих шрифтів;
- після розпізнавання шрифту ви отримуєте інформацію про його назву, виробника, доступні стилі і навіть посилання на придбання, якщо шрифт є комерційним.
Fontspring Font Matcherator
Fontspring Font Matcherator ― онлайн-сервіс, який знайде відповідний шрифт, якщо завантажити зображення або вставити URL-адресу зображення.
Сервіс також має широкий вибір шрифтів у своїй великій базі даних (близько 900 тисяч гарнітур). Окрім цього, Matcherator виділяється своєю потужною технологією ідентифікації шрифтів та розширеними функціями пошуку, які дозволяють точно ідентифікувати гліфи та порівнювати особливості OpenType.
WhatFont
Для швидкого пошуку шрифтів на вебсайті можна скористатися спеціальним розширенням для браузера, таким як WhatFont, що надає детальну інформацію про типографіку прямо під час перегляду сторінки.
Вам лише потрібно натиснути на іконці розширення у вашому браузері, а потім навести курсор на слово, щоб отримати інформацію про використаний шрифт, включаючи назву, розмір, колір та інші деталі шрифту.
Fonts Ninja
Fonts Ninja ― ще одне розширення для Google Chrome завдяки якому процес розпізнавання шрифту займе буквально декілька секунд. Логіка його роботи ідентична до минулого сервісу. Потрібно лише “увімкнути” розширення на сторінці та навести курсором до потрібного тексту.
Серед переваг саме цього сервісу варто відзначити:
- ДНК шрифту ― авторський алгоритм, який вивчає файли шрифтів для отримання більш точних результатів.
- Деталі шрифту ― ви можете отримати більше інформації про гарнітуру, перевірити скільки доступно стилів, їх виробника та ціну.
- Закладки ― є можливість додати шрифт, який сподобався, до закладок і тим самим не загубити його в роботі.
Fontanello
Fontanello – розширення для веббраузера, яке спрощує аналіз типографіки тексту на вебсторінці. Воно дозволяє користувачам швидко перевіряти основні типографські стилі тексту.
Для того, аби скористуватися цим сервісом, варто лише натиснути правою кнопкою миші на текст на сторінці.
Якщо вас цікавить пошук шрифтів в браузері, скористайтеся інструментами розробника (Developer Tools), доступними у більшості сучасних браузерів. Вони дозволяють визначити, який саме шрифт використовується для певного елементу на сторінці.
Висновки
Шрифти визначають, як клієнти сприймають бренд, з чим його асоціюють та які емоції відчувають. Вибір шрифтів впливає на те, як люди споживають і реагують на інформацію, яку отримують. Тому гарнітура має бути адаптивною та читабельною.
У цій статті ми представили вам різноманітні інструменти: від зручних розширень для браузера Google Chrome до онлайн-сервісів, які дозволяють завантажувати фотографії. Вони значно полегшують процес ідентифікації шрифтів..
Сподіваємось, наведені сервіси допоможуть вам у пошуку найкращих референсів для розробки або вибору власної типографіки!
FAQ
Чи можна визначити шрифт з картинки?
Так, для цього існують сервіси, як-от MyFonts (WhatTheFont), WhatFontIs чи Fontspring Font Matcherator. Достатньо завантажити фото та виконати аналіз.
Як розпізнати шрифт у CSS?
Використовуйте вбудовані інструменти браузера, як-от “Інспектор елементів” (Developer Tools). Натисніть правою кнопкою на текст, виберіть “Переглянути код” і знайдіть параметр font-family.
