Víkendový tip: fonty, barvy, ikonky, SVG

Na přednáškách a konferencích se mi líbí především tipy z praxe. Mnohdy se tak člověk dozví zajímavé tipy a vidí nápady, které nesouvisí až tak z hlavním tématem přednášky, ale o to více ho zaujmou. Od začátku roku jsem takto na různých akcích posbíral několik odkazů, které bych si rád tímto článkem uložil a zároveň se o ně s vámi rád podělím.

Fonty

Když přijde řeč na webové fonty, asi vás jako první napadnou Google Fonts. Mě samozřejmě taky, možná ještě Adobe Typekit. Ale zajímavých webů s písmy pro použití nejenom na webu, je více. Mrkněte například na web 1001 free fonts.

Ikonky a ikonkové fonty

Co se ikonek týče, dnes již máme nepřeberné množství zdrojů, odkud je čerpat. Na webech, které s kolegy stavím, čím dál častěji používám nějaké vektorové ikonky. Obvykle Font Awesome, který asi dobře znáte. Pokud byste rádi využili jeho ikonky, ale přitom nechcete implementovat celý soubor fontu a používat to s třídou v CSS, mrkněte na webovou aplikaci fa2png.io, která konvertuje zvolené ikonky do souboru PNG.

Vzhledem k bezproblémové podpoře SVG v aktuálních prohlížečích, je však někdy lepší použít vektorový soubor. A vhodnější, například kvůli displejům Retina. Koukněte na FlatIcon.com, kde si můžete mimo jiné stáhnout celou sadu Font Awesome v balíčku obsahujícím ikonky ve formátech EPS, PNG, PSD a právě SVG.

Hledáte-li nějakou jinou rozsáhlejší sadu ikonek k použití na vašem webu, mrkněte na Glyphicons.com. Obsahuje přes osm stovek různých symbolů. Základní sada plus ikonky sociálních sítí jsou tu zdarma ke stažení, komplet s různými velikostmi PNG a PSD je k mání za 25 dolarů. Na 59 dolarů vás pak přijde celá sada včetně SVG a dalších formátů. Pokud se vám ikonky líbí a chcete je využívat nějak častěji, pak se to vyplatí. Už třeba proto, že je zde i přes 140 ikonek různých typů souborů.

Zdá se vám, že ikonkové fonty jako je zmíněný Font Awesome jsou zbytečně veliké, když stejně použijete jen pár z jejich ikonek? Pak vám nic nebrání v tom, vytvořit si vlastní ikonkový font. Můžete použít buď symboly z Font Awesome či jiných sad, nebo si do fontu nahrát vlastní SVG. Výsledek pak máte přímo na míru, bez zbytečných dalších dat. Vlastní ikonkové fonty si vyrobíte na webech Fontastic nebo Fontello během pár okamžiků.

Barvy

Poslední z tipů vám pomůže s obarvením ikonek tím správným barevným odstínem. Jak asi víte, vektorové ikonky jsou dodávány obvykle v černé barvě a je na každém, aby si ji upravil, jak potřebuje. Pokud chcete tedy obarvit ikonky například sociálních sítí, ale nechcete zkoumat CSS kód jejich webů, mrkněte na BrandColors. Najdete zde celou škálu společností a značek s jejich typickými barvami. Po najetí na zvolenou barvu se vám pak objeví příslušný hexakód pro zápis v CSS (či jinde).

Jak barvím ikonky já? V ikonkovém fontu vyřešíte zabarvení ikonky jednoduše – nastavením CSS vlastnosti color. Tedy pokud má mít ikonka jednu jedinou barvu. V momentě, kdy potřebujete obarvit samostatnou vektorovou ikonku, je to mírně složitější. Buď si SVG otevřete v textovém editoru a upravte atribut fill, nebo použijte grafický editor, který to s SVG umí. Ve Windows by to měl zvládat bezplatný InkScape, na Macu používám povedený Sketch.