Jak vytvořit vlastní font

Dnešní článek bude prvním ze série o typografii, avšak vyhneme se jakékoli teorii a zaměříme se čistě na to, jak z obyčejného nákresu na papíru udělat digitální a funkční font. 

  1. Jaký font vytvořit?
  2. Skicování
  3. Převedení do vektorů
  4. Převedení do Glyphs mini/FontForge
  5. Export

Četla jsem už několik rad od logotvůrců a většinou všichni radí jedno: nejlepší je, když si font vytvoříte jednoduše sami. Společnost se tím bude několik let prezentovat, tak proč nevytvořit něco unikátního? Avšak toto pravidlo samozřejmě neplatí pro všechny případy. Pokud chcete vytvořit běžný web nebo plakát, nejspíš sáhnete po nějakém jednoduše dostupném fontu. Největší výhodou vytvoření vlastního fontu je, že předcházíte problémům s autorskými právy a licencemi.

Pokud nevlastníte software, který vám převede skicu do vektorů, jako například Adobe Illustrator, přeskočte krok 2. a 3.

Kde najít font, když ho nechci vytvářet?

Měli byste znát licence: „personal use“ (pouze pro vaše vlastní užití, nevyděláváte žádné peníze) a „commercial use“ (komerční užití, vyděláváte peníze). Nejlepším řešením je font, který zahrnuje obě licence. 

Pozor na stránku dafont.com – je známá svojí pestrostí a všemožnými dostupnými fonty. Důvod proč jí zmiňuji je ten, že je oblíbená mezi blogery. Fonty se sice uvádí jako “free,” ale velmi často jsou pouze pro osobní použití. 

Nejlepší stránkou za mě bude nejspíše fonts.google.com kde snadno naleznete fonty pro komerční užití. Platí stále, abyste si licenci vždy zkontrolovali, ať už stahujete font odkudkoli!

1.    Jaký font vytvořit?

Do podrobnější teorie typografie, jako je klasifikace „sans-serif, slab-serif,…“ a konkrétní anatomie fontu, bych se pustila až někdy příště. Pro váš první font vám bude stačit, když si určíte, jestli chcete nadpisové písmo nebo menší písmo, jestli bude tenčí, bude mít přirozený vzhled nebo bude vypadat jako psané rukou nebo štětcem. Jednoduchou představu, nic víc. Vymyslete cokoliv. Když bude font ustálený, písmenka spolu budou spolupracovat a font bude „dávat smysl.“

Následně nesmíte zapomenout, že font se skládá z mnoha znaků, zvláště v češtině. Skládá se ale i z čísel, diakritiky atd. Nejlepší je vytvořit váš font s co nejvíce znaky, avšak někdy to může být opravdu časově náročné. Proto moudře rozhodněte, jaké všechny znaky vaším fontem pokryjete.

2.    Skicování

Preference jsou na vás, buď si vyberete papír, nebo tablet. Papír by měl být kostkovaný a kvůli skenování budete muset font vybarvit sytou černou barvou, takže nedoporučuji používat pouze tužku. 

Po sehnání pomůcek si definujte základní dotažnici, tedy čáru, na které sedí písmena. Následně střední dotažnici, což je velikost malých písmen, a horní dotažnici, tedy velikost velkých písmen.

TIP: “kulatá” písmenka, jako je o, p, c, mírně přetáhněte, aby písmenka nepůsobila menší.

Na konci je nejlepší si všechna písmena zobrazit společně a popřemýšlet o tom, jestli se mezi nimi nachází některé, které se od ostatních příliš liší, nebo upoutávají až moc pozornosti.

Pokud tvoříte na papír, na konci byste měli zvýraznit svá písma sytou barvou, aby se lépe skenovala a přenášela do programů. Alternativně můžete skicu vyfotit, ale nejspíš s tím budete mít následně více problémů než se skenerem. Záleží ale na kvalitě fotografie. 

Pro účely tohoto článku jsem nakreslila jen velmi jednoduché a rychlé písmo, které si odešlu do počítače. Nejlépe v PSD formátu, ale JPEG nebo PNG vám taktéž postačí. 

TIP: Pokud jste font skenovali, zkuste nejdřív v Photoshopu zvýšit kontrast celé fotografie a pomocí úrovní snížit viditelnost čtverečků vašeho papíru.
velmi jednoduchý font vytvořený v aplikaci Procreate

3.    Převedení do vektorů

V Illustratoru otevřete soubor s fontem. Zde existuje velmi kouzelné tlačítko, které nám font automaticky vektorizuje. 

Okna > Vektorizovat obraz, zde je nejvhodnější nastavit režim „černá a bílá“ a klikněte na „vektorizovat“ (více o vektorech v článku První měsíce v Illustratoru). Vše by se vám mělo automaticky převést do vektorů. 

Vektorizovaný font

Chtěla jsem, aby font měl texturu a vzbuzoval dojem, že je psán rukou. Proto jsem nastavila práh na menší hodnotu. Pokud bych chtěla mít písmo vyhlazené, nastavím práh na větší hodnotu. S posuvníky si můžete hrát, především pokud jste dokument naskenovali, protože zde se může vyskytnout více problémů.

Abychom mohli písma upravovat jednotlivě, musíme ještě kliknout v okně „vlastnosti“ na „rozdělit.“ Následně lze vše upravit dle představy a smazat bílé pozadí (případně zaškrtněte „ignorovat bílou“).

Převedení do Glyphs mini/FontForge

Pokud nevlastníte Adobe Illustrator nebo jiný příslušný program, můžete například pomocí pera vytvořit font přímo v těchto softwarech.

https://bezier.method.ac/ – pokud se ještě s perem neznáte, tato stránka vás na tento nástroj připraví. 

Který program zvolit?

FontForge je bezplatný program. Spousta tvůrců však doporučuje Glyphs mini, s tím mám ale několik problémů. Jednak je placený a jednak je dostupný pouze pro uživatele operačního systému macOS. Hledala jsem tedy alternativu a našla jsem FontForge, který je zdarma a jednoduchý na pochopení. Glyphs mini je ale určitě na více profesionální úrovni a má také více funkcí.

V téhle fázi trochu lituji, že jsem se spíše nerozhodla nahrát nějaké video, ale pokusím se postup popsat co nejkonkrétněji. Pokud byste však nepochopili postup podle textu, ráda bych pro vás natočila video a zveřejnila jej na blogu.

Vytvoříte soubor o rozměrech 1000×1000 pixelů s mřížkou každých 100 pixelů. Mřížku zapnete:

Úpravy > předvolby > vodítka a mřížka > čáry mřížky po 100 px a dělení 4. 

Zobrazení > zobrazovat mřížku (Ctrl+“)

Postup pro Glyphs

Kolem písmenek vytvoříte dle mřížky boxy bez výplně (překlikla jsem se a mřížku jsem udělala trochu menší, tak se nelekněte, kdybyste měli více řádků, ale ve výsledku to žádnou roli nehraje a vektor můžete jednoduše zvětšit). Následně každé písmenko se svým boxem ještě seskupíme.

Zarovnáno

Teoreticky boxy používat nemusíte, ale kvůli funkci zarovnání a opakování skrze zkratky Ctrl+D mi toto přišlo jako nejrychlejší způsob.

Následně všechna písmena označte a zarovnejte do levého rohu. V okně vrstev klikněte na rozbalovací hamburger (tři vodorovné čárky) a vyberte „rozdělit do vrstev“. Nakonec vše vyberte a zvětšete přes celé plátno.

Nakonec otevřete Glyphs, nastavte si velikost písma podle plátna v Illustratoru a stačí písmenka po jednom kopírovat a vkládat do příslušných okének, nezapomeňte na konci smazat boxy kolem písmenek. 

Postup pro FontForge

Postup je zde trochu komplikovanější, protože písmena mi nikdy nešla jednoduše zkopírovat a vložit jako do Glyphs. Vše tedy musíme exportovat jednotlivě ve formátu SVG.

Podobně jako v Glyphs, i zde si písmena zarovnáme podle boxů. Rozdíl je v tom, že namísto obyčejného vektorového čtverce budeme používat kreslící plátna. Pro každé písmeno vytvoříme samostatné kreslící plátno stejné velikosti a nejlépe tak, aby byla písmena zarovnána na střed. Při tvorbě pláten si zapněte přichytávání na mřížku, což vám ušetří spoustu práce.

Následně exportujte jako SVG formát a před exportem zaškrtněte „použít kreslící plátna“. Další postup je jednoduchý, zapnete si program FontForge a založíte nový dokument.

Element > Font info > General zde si můžete přenastavit velikost fontu; tedy 1000×1000 pixelů. Následně klikněte na písmenko, které chcete importovat a použijte zkratku Ctrl+Shift+I. Vyberete SVG formát a všechny jednotlivě vložíte.

5. Export

Až zaplníte všechny znaky, je čas na export. File > Generate fonts. Zde vyberte buď TrueType nebo OpenType. A máte hotovo! Zbývá jen font nainstalovat. 

Závěrem

Typografie je náročný a komplexní obor plný teoretických znalostí. Tento článek se zaměřuje na praktickou stránku tvorby písem, tedy jak přenést myšlenku do digitální podoby. V budoucnu se můžeme v dalších článcích zaměřit na teoretické aspekty typografie, aniž bychom se museli zabývat praktickou stránkou vektorizace písmen.

Další zdroje pro bádání:

https://www.1001fonts.com/ – spousta fontů pro komerční použití, ale opět pozor na licenci

https://tldrlegal.com/ – stránka, která vám pomůže pochopit obsah licence.  

https://pimpmytype.com/personal-vs-commercial-use/ – více informací ohledně licencí