Fonty na webu
15/07/2006 / Typografie
O typografii samotné již na českém webu vyšla řada povedených článků. I o samotném užití fontu píše například Dero. Tentokráte tedy z trochu jiného úhlu o volbě vhodného druhu a velikosti písma, která určuje čitelnost textů i celkový dojem z designu stránek.
Web je specifická oblast vnímaná přes monitor. Tomu je potřeba uzpůsobit naše myšlení při tvorbě webových stránek. Znám grafiky, kteří si ve snaze o co nejlepší výběr fontu na jimi vytvářené stránky tiskli vzorníky obrazovkových písem. Tak ale písmo pro účely webu nelze posuzovat, je třeba jej zkoumat přímo na obrazovce, protože tam je jeho pole působnosti.
Rozeberme si tedy nyní, co máme díky Microsoftu k dispozici při tvorbě webu:
Comic Sans MS
Z historie písma: Ačkoliv se asi těžko najde grafik, který by Comic Sans dobrovolně použil, mezi prostým lidem se toto písmo těší obrovské oblibě. Písmo v roce 1994 vytvořil designér Microsoftu Vincent Connare a dodnes z toho asi nemá dobré spaní. Všeobecná nadužívanost písma, ať už na jídelních lístcích či reklamních štítech (u nás ho má v logu například cestovní agentura I´M Travelling) vedla ke vzniku iniciativy Ban Comic Sans!
Klasifikace písma: Jedná se o bezpatkové písmo původně určené do komiksových bublin — odtud jeho název.
Vhodnost použití: Na dětských webech jako písmo ve větších řezech — titulky, menu. Nevhodné v menších řezech pro sazbu delších textů a pro jakoukoliv seriózní prezentaci.
Novinky — Times New Roman v nadpisech, Arial pro text
Arial
Z historie písma: Písmo vzniklo v roce 1982 jako levnější varianta k populární Helvetice. V tištěných médiích je považováno za méněcenné a nedotažené písmo, na webu je Arial velmi okoukaný.
Klasifikace písma: Jedná se o bezpatkové písmo (neboli grotesk) s celkově více kompresní a světlou kresbou.
Vhodnost použití: Vzhledem k jeho okoukanosti je vhodné Arial používat jen zřídka. Uplatnění najde hlavně v místech, kde je potřeba nacpat hodně textu na malou plochu. Je čitelný již od malých velikostí (10 b.) a vzhledem ke své malé šířce zabere velmi málo prostoru. Vhodný pro menu do e-shopů, kde jsou položky s dlouhými názvy či pro popisky obrázků a fotografií umístěných v textu. Neurazí v nadpisech.
Times New Roman
Z historie písma: Toto písmo vytvořili v roce 1932 Stanley Morison, Starling Burgess a Victor Lardent pro londýnské noviny The Times. Jakožto výchozí písmo MS Office se stal Times New Roman časem všudypřítomným a okoukaným, a tak je Office 2007 nahrazen fontem Calibri, součástí systému Windows Vista.
Klasifikace písma: Patkové písmo (antikva) s bohatou historií a smutnou budoucností. Svou všudypřítomností nabylo nudného, až stereotypního charakteru.
Vhodnost použití: Times se do velikosti 12 bodů nehodí pro sazbu delších obrazovkových textů, ale najde použití např. v titulcích konzervativních zpravodajských serverů či státních institucí.
DGX — Georgia v nadpisu + Verdana v textu = ideální kombinace
Georgia
Z historie písma: Další písmo, které pro Microsoft navrhl Matthew Carter, tentokráte v roce 1993. Bylo vytvořeno jako patkové písmo vhodné pro obrazovku.
Klasifikace písma: Příjemná alternativa Times New Roman, s tmavější kresbou. Jako jediné z běžně dostupných obrazovkových písem používá minuskové (skákavé) číslice.
Vhodnost použití: Použitelná již od velikosti 11 bodů, Georgia najde využití pro netechnické weby ať už jako textový, nebo nadpisový font. Vynikne vyhlazená ve vyšších velikostech
Verdana
Z historie písma: Toto písmo navrhl pro Microsoft designér Matthew Carter. Verdana byla vytvořena jako obrazovkové písmo dobře čitelné v malých velikostech.
Klasifikace písma: Bezpatkové písmo čerpající z Frutigera, s větší střední výškou, širokými proporcemi a velkými meziznakovými mezerami.
Vhodnost použití: Delší texty náročné na čtenářovu pozornost, blogy, zpravodajství. Některými grafiky je považována za příliš roztahanou, ideální pro čtení ve velikosti 10–13 bodů. Pro nadpisy je dost široká.
Grafikův blog nechává vyniknout Georgiu a její skákavé číslice
Tahoma
Z historie písma: Toto písmo taktéž navrhl Matthew Carter. Písmo vzniklo jako alternativa k okoukanému Arialu.
Klasifikace písma: Bezpatkové písmo podobné Verdaně, s užšími meziznakovými mezerami, výchozí font Windows XP.
Vhodnost použití: Písmo se mi osvědčilo do horizontálních menu, např. jako verzálky velikosti 10 bodů v tučném řezu. Nezabere tolik místa jako Verdana a není tak okoukané jako Arial. Pro sazbu delších obrazovkových textů není moc příjemné. Je ale vhodné jako neutrální nadpisové písmo.
Courier
Z historie písma: Písmo odvozené od monospace písem prvních psacích strojů. Courier vytvořil Howard Kettler.
Klasifikace písma: Neproporcionální (monospace) patkové písmo.
Vhodnost použití: Sazba textů ve strohém stylu (informační blogy), naznačení administrativních dokumentů. Není příliš pohledné a umožňuje snadnou čitelnost až od velikosti 12 bodů. Všeobecně se příliš nepoužívá.
Whitwa — Arial jako font pro nadpis, pro text Trebuchet 13 bodů
Trebuchet MS
Z historie písma: Písmo vytvořil autor Comic Sansu Vincent Connare pro Microsoft v roce 1996. Sám Microsoft označuje Trebuchet jako dobrý font pro webdesign a je jedním z microsoftích základních webových fontů. Písmo bylo vydáno s operačním systémem Windows 2000, s Internet Explorerem 4 a Wordem 2000. Dá se tedy předpokládat jeho všeobecná rozšířenost.
Klasifikace písma: Zajímavé bezpatkové písmo, dobře rozeznatelné podle skloněných dříků písmene M, typického nedotaženého g či vodorovného serifu na i.
Použítí písma: Trebuchet je pro běžný text nejvhodnější ve velikostech okolo 13 bodů, a potom také v nadpisech všeho druhu, zejména v oblasti grafiky a webdesignu.
Prameny
Na závěr uvádím prameny, ze kterých jsem čerpal:
- Wikipedia, The Free Encyclopedia
- Vladimír Beran & kol.: Typografický manuál
- Magazín Typo / Duben 2006
« Starší: Magazín Typo Novější: Finty s fonty »
Komentáře pro článek: Fonty na webu
[2] Jiří Tvrdek, 15/07/2006
Děkuji za poznámku, doplnil jsem Dera hned na začátek textu. DGX se mi neustále plete, ale už je taky opraven.
[3] aa, 16/07/2006
Vyborny clanecek, dekuji!
[5] crackonosh, 18/07/2006
Jedná se o bezpatkové písmo (neboli grotesk) s užší kuželkou a celkově světlou kresbou.
Dovolím si upozornit, že kuželka nemůže být širší nebo užší, to je čirý nesmysl vzhledem k tomu, že se jedná o „stupeň písma“. Doporučuji přečíst svůj (jak jinak :) článek na http://typomil.com/pismo/stupen-pisma.htm
[7] Jiří Tvrdek, 19/07/2006
crackonosh: Obávám se, že užší stupeň písma je více matoucí, než kuželka, ač je správně. Nebylo by nějaké jednoslovné synonymum vystihující to, co jsem chtěl říci, a zároveň aby ho každý pochopil?
[8] crackonosh, 19/07/2006
[6] Jakub: A sakra, pravdu díš, asi zalezu někam do kanálu. :)
[7] Ani užší stupeň písma, prosím. Asi bych řekl, že písmo má úzký (užší) obraz, případně že v sazbě je více kompresní. A nebo že má více kompresní kresbu.
[9] crackonosh, 19/07/2006
No a abych nebyl opět napaden, tak více kompresní jsem napsal zcela záměrně, přestože slovo kompresnější je zřejmě z hlediska češtiny vhodnější. Jen to jde špatně přes pysky. Tak proto. ;)
[10] Jiří Tvrdek, 19/07/2006
[8] Tak děkuji, už je to opraveno. Jojo, před Jakubem se nikdo neschová, ani typocelebrita! :)
[11] crackonosh, 19/07/2006
[10] Jirko, já ti už do toho nechci moc kecat, ale všude, kde jsi ještě ponechal užší/širší kuželku, bys to měl vyhodit, chceš-li být korektní :)
Mimo to též není vhodné psát s velkou výškou kuželky, protože každé 10bodové písmo má kuželku o rozměru 10 bodů. Avšak některá písma, např. Verdna, mají zvětšenou střední výšku a krátké dotažnice, proto vypadají opticky větší, v menších stupních jsou lépe čitelná. (Tohoto principu se zhusta používá u novinových písem.)
[12] Jiří Tvrdek, 19/07/2006
On-line real-time typo poradenství! Co víc si přát?
Ale teď vážně, děkuji za trpělivost. Snažil jsem se to zbrkle opravit a ani jsem si neuvědomil, kolikrát to ještě v textu mám. Nenabízíš nějakou možnost konzultací typočlánků před jejich zveřejněním? :)
[1] Mingan, 15/07/2006
Drobná poznámka: U ukázky Georgie je uvedeno “DXG”. Jde sice o web muže mnoha tváří, ale většinou písmena řadí na “DGX”.
Fontům pro web se věnuje Dero (http://typografie.dero.name/clanky.phtml).