Jak zjistit font z obrázku nebo webu

Narazíte na nadpis, logo nebo web, jehož písmo se vám líbí, a chcete vědět, jak se jmenuje. Někdy jde o fotku z ulice, jindy o screenshot cizí prezentace nebo o web konkurence, a v obou případech vede k cíli jiná cesta. U obrázku pomůže nástroj, který porovná tvary písmen s databází fontů, u živého webu stačí nahlédnout do toho, co prohlížeč sám vykresluje.

Jak zjistit font z obrázku nebo fotky

Princip nástrojů na rozpoznání fontu je vždy stejný. Nahrajete obrázek s textem, algoritmus rozebere tvary jednotlivých písmen a porovná je s databází fontů, a čím lépe je text vidět, tím přesnější výsledek. Jedním z takových nástrojů je What font is, který podle svého popisu prohledává přes 1,2 milionu komerčních i volných fontů a obrázek přijme nahráním, přes URL adresu nebo přetažením myší.

whatfontis.com

Než obrázek nahrajete, věnujte pár minut přípravě. Vyfoťte nebo naskenujte text tak, aby řádek zůstal vodorovný, protože nakřivo vyfocené písmo dělá algoritmům problémy tím, že deformuje tvary hlásek a znejasňuje jejich charakteristické rysy. Držte foťák stabilně. Menší, drobné písmo dává algoritmu míň informací než velký, čitelný nadpis.

1. Vyberte co nejostřejší a nejrovnější snímek textu, ideálně jeden řádek jednoho stylu písma.
2. Pokud je obrázek rozmazaný nebo má nízký kontrast, zvyšte jas a kontrast v libovolném editoru fotek, ať písmena vyniknou.
3. Nahrajte obrázek do nástroje – přetažením, výběrem souboru nebo vložením URL adresy.
4. V editoru nástroje oddělte případná slepená písmena a označte jen jeden font najednou, pokud je na obrázku textů víc.
5. Zaměřte výběr na charakteristická písmena, ne na první řádek, který vás napadne.

Poslední bod stojí za zdůraznění. Písmena jako i nebo l vypadají u naprosté většiny fontů podobně, takže nástroji moc nepomůžou. Naopak velké R, Q, malé g nebo znak & mají u různých fontů výrazně odlišný tvar – patky, zakončení tahů, sklon. Pokud je ve vzorku máte, označte přednostně je.

Jak číst výsledky a co dělat, když shoda nesedí

Nástroj po analýze vrátí seznam nejpravděpodobnějších shod seřazený podle podobnosti, ale první výsledek nemusí být ten pravý, protože algoritmus vybírá jen z toho, co má v databázi nejblíže vašemu vzorku. U skriptových nebo ručně psaných fontů bývá tahle nejistota ještě větší, protože variabilita tvarů písmen je u nich mnohem širší než u tiskového písma. Projděte první tři až pět návrhů a porovnejte je se svým vzorkem, hlavně u písmen s ozdobnými prvky.

Pokud žádná ze shod nesedí přesně, nejčastější příčinou bývá vlastní, upravený nebo velmi malou písmolijnou vydaný font, který v databázi chybí. Podívejte se na nejbližší návrhy jako na inspiraci, ne jako na definitivní odpověď – blízká shoda v praxi často funguje stejně dobře jako originál. Pomůže i vyzkoušet stejný obrázek v jiném nástroji, protože různé databáze mají různé silné stránky a co nenajde jeden, může odhalit druhý.

Jak zjistit font přímo na webové stránce

Pokud vidíte zajímavé písmo na webu, nemusíte dělat screenshot a hádat. Web totiž font neskrývá, protože ho prohlížeč právě vykresluje, a stačí sáhnout po vývojářských nástrojích, které má vestavěné každý moderní prohlížeč.

V Chromu klikněte pravým tlačítkem na text, jehož font vás zajímá, a zvolte „Prozkoumat“. V panelu přejděte na kartu Computed a rolujte dolů, kde najdete sekci s vykresleným písmem a v ní uvedený skutečně použitý font. To je důležité zejména tehdy, když CSS stránky definuje víc fontů v řadě za sebou jako zálohu pro případ, že první z nich není v systému uživatele dostupný – tomuto seznamu se říká font-stack. Karta Computed ukáže, který z nich prohlížeč doopravdy použil, a hádat tedy nemusíte.

Firefox a Edge mají obdobu přímo pojmenovanou Fonts. Po otevření vývojářských nástrojů a výběru elementu stránky se v postranním panelu zobrazí seznam použitých fontů, a najetím myší na název fontu navíc zjistíte, ve kterých částech stránky se používá.

Kdo nechce sahat do vývojářských nástrojů, může použít rozšíření do prohlížeče, které font ukáže po najetí myší na text – bez dalšího klikání. Takové rozšíření navíc často pozná i to, jestli web font načítá přes některou z běžných služeb pro webové fonty.

Zvláštní případ nastává, když je text na webu ve skutečnosti obrázek, třeba logo nebo grafický banner. Vývojářské nástroje pak font neukážou, protože žádný text tam z pohledu prohlížeče není. Řešení je jednoduché: obrázek uložte na disk a postupujte podle první části tohoto návodu.

Co dělat, když je font placený nebo nedostupný

Nástroj vám font pojmenuje, ale to neznamená, že ho hned můžete použít, protože řada identifikovaných fontů je komerčních a vyžaduje licenci, jiné jsou dostupné jen v placených sadách. Pokud hledáte volnou náhradu, některé nástroje po zadání názvu fontu rovnou nabídnou vizuálně podobné alternativy s volnou licencí. I tak je vždy potřeba licenci u konkrétního fontu zkontrolovat, než ho nasadíte do komerčního projektu.

U pár typů písma existují zavedené volné náhrady, které designéři běžně používají. Za čistý neo-grotesque styl podobný Helvetice nebo Arialu se často volí Inter, Roboto nebo Work Sans. Za geometrický kulatý sans-serif typu Futura poslouží Poppins nebo Jost. A tam, kde byste sáhli po Gothamu, se hodí Montserrat, který vznikl jako pocta podobnému geometrickému písmu na pouličních cedulích.

Hledání a testování takových náhrad je zároveň místo, kde se hodí širší designový asistent, a to nejen na identifikaci jednoho fontu, ale na celkovou skladbu vizuálu, do kterého písmo zapadá. Pokud naopak řešíte spíš vizuál kolem textu, třeba pozadí nebo ilustrace k danému fontu, může se hodit i generátor obrázků.

Časté otázky