Fonty jsou důležitým prvkem designu každé webové stránky. Pokud se chcete inspirovat, nebo prostě zjistit, jaký font na konkrétním místě vašeho webu používáte, nemusíte zdlouhavě prohledávat zdrojový kód stránky. Skvělým pomocníkem jsou nejrůznější rozšíření do prohlížečů, která dokáží zjistit konkrétní fonty na stránkách, řeknou vám jejich velikost či barvu, a dokonce umí poradit, kde hledaná písma nejlépe zakoupíte či stáhnete.

V článku jsme vyzkoušeli čtveřici nejoblíbenějších rozšíření pro detekci fontů v prohlížeči Google Chrome. Jaké je nejlepší?

FontFace Ninja – detekuje fonty a poradí, kde je stáhnout

FontFace Ninja dokáže být skutečně rychlý, v průběhu 1 – 2 sekund identifikuje názvy všech fontů na zobrazené stránce, které vypíše v roletce pod ikonou doplňku. V pátrání, který blok textu využívá jakého konkrétního fontu, si však zatím musíte pomoci sami, a to najetím na myší na daný prvek stránky. Pak se dozvíte dokonce i detaily o velikosti písma, řádkování, odsazení písmen a barvě.

Navazující funkcí je možnost vyzkoušet si konkrétní font v libovolné velikosti a odsazení písmen přímo ve FontFace Ninja okně. Stačí jen kliknout na libovolní text na stránce. Tento nástroj však nepovoluje změny ve fontu nahradit na webu, abychom je viděli v praxi. Co však, na rozdíl od ostatních nabízí, je možnost zakoupit si nalezené fonty (skrz stránku oficiálního prodejce) nebo přímo stáhnout zdarma, pokud to ovšem jejich licence dovolují.

Nechybí ani možnost přenášet seznam svých oblíbených fontů do dalších zařízení. Po registraci a přihlášení se si můžete vybrané fonty označit jako „oblíbené“, aby jste se k nim jednoduše dopátrali i později.

FontFace Ninja je skvělý nástroj pro rychlou orientaci ve fontech použitých na webu s možností se k nim jednoduše dostat (stáhnout či zakoupit) a používat je ve vlastních projektech.

WhatFont – zjistí a porovná písma na stránce

Pravděpodobně nejpoužívanější rozšíření pro Chrome ze všech na fonty zaměřených doplňků je WhatFont. Po jeho aktivaci na stránce vám u kurzoru ukazuje název fontu kamkoliv se pohnete. A to skutečně kamkoliv. I pokud myší najedete na volnu plochu nebo obrázek, máte u kurzoru zobrazenu informaci o písmu, což je trochu matoucí.

Po kliknutí na vybraný text nebo volnou plochu či obrázek, se vám zobrazí černé okénko s detaily. Dozvíte se přesné údaje o rodině písma, stylu, váze, velikosti, řádkování a barvě. U barvy lze přepínat zobrazený formát barev z HEX do RGB a zpátky. Výhodou doplňku je, že tyto detailní informace nezmizí, jakmile se kurzorem posunete jinam, ale okno zůstává zobrazené až dokud ho křížkem neuzavřete, nebo neukončíte práci s doplňkem kliknutím na jeho ikonu. Těchto oken se specifikacemi si můžete naklikat po stránce libovolný počet, díky čemuž máte možnost si fonty navzájem porovnat. Okna se však občas překrývají, a pokud vás zajímají rozličné fonty blízko u sebe, nedají se posouvat. Dá se ale mezi nimi přepínat a uzavřít ty, které vám překáží nejvíc.

WhatFont je vhodným nástrojem pro získání základných informací o písmu s možností vybrané typy písma na stránce vzájemně porovnat.

Font Finder – zjistí vše o prvcích a písmech na stránkách

Pokročilý nástroj Font Finder se orientuje především na vývojáře, designéry nebo typografy, resp. na ty, kterých zajímá mnohem více než jenom název fontu a jeho velikost. Nástroj aktivujete buď pomocí ikony doplňku, nebo přes pravý klik do stránky a výběrem „Inspect font“ ze zobrazeného kontextového menu. Poté, po výběru zvoleného bloku textu, se vám v novém okně zobrazí tabulka s přehledem informací.

Informace, které vám Font Finder nabízí, jsou setříděné do oblastí jako barva, font, řádkování a další detailnější informace o elementu stránky vhodné především pro vývojáře webových stránek. V každé z těchto skupin naleznete detailnější rozpis. Například barvu v HEX i RGB formátu, barvu pozadí, rodinu, typ a velikost písma, řádkování a styl písma a podobně. Jednoduše si můžete jednotlivé informace vykopírovat a vložit například do svého kódu.

Font Finder nabízí spoustu informací o konkrétním fontu a prvcích na stránce, ale bez možnosti další editace či jiné práce s fontem.

Fonts infos – zobrazí všechny využívané fonty na webu

Doplněk Fonts infos má na rozdíl od ostatních jiný přístup k zobrazování informací o fontech. Jako jediný nástroj dokáže ukázat například velikost písma v jednotlivých elementech po celé stránce najednou. Nemusíte tak pohybovat kurzorem ani klikat sem a tam, abyste velikosti viděli.

Na druhou stranu nevýhodou je, že takto najednou vám dokáže ukázat jenom jednu informaci, kterou si vyberete, že chcete mít zobrazenou. Není tak možné najednou vidět například velikost ale i typ písma na celé stránce.

Co však Fonts infos nabízí, je zobrazení všech dostupných informací o fontu po najetí kurzorem na konkrétní textový element. Informace nejsou tak obšírné jako u Font Finderu, ale obsahují vše, co běžný uživatel potřebuje poznat (rodina, styl, velikost, váha, barva, řádkování, dekorace, odsazení). Pokud si potřebujete něco ze zobrazených informací překopírovat, nebo jen nechcete, aby vám informace zmizely po najetí na jiný element, stačí kliknout a specifika daného fontu vám zůstanou fixně zobrazené vpravo nahoře na stránce, až dokud je nenahradíte kliknutím na jiný textový element, nebo křížkem neuzavřete.

Fonts infos má sice nejslabší grafické zpracování ze všech zkoušených podobných nástrojů, ale funkčně nezaostává a jako jediný dokáže zobrazit informaci o všech textových elementech na stránce naráz – škoda snad jen, že pouze jednu.