Webově použitelná písma

Na této stránce si můžete prohlédnout písma různých fontů, řezů a velikostí, které jsou prakticky použitelné ve webových stránkách. Já zde hledávám optimální varianty pro nové stránky. V praxi jsem zjistil, že některé z fontů, co tu uvádím, nejsou moc spolehlivé (stránka je mírně zastaralá).

Vizte též Uživatelská písma, Velikosti písem v prohlížečích, test fontů Windows 7 a hlavně Přehled vlastností CSS. Můžete se také pokusit vytvořit dynamické fonty.

Font se zadává CSS vlastností font-family. Použitelné jsou jenom taková písma, která jsou běžně rozšířená. U českých písem je to Times New Roman, Arial a Courier New. Protože doba pokročila, dají se dnes úspěšně použít též písma Garamond, Georgia, Verdana a MS Sans Serif. 

Times New Roman - Garamond - Arial - Arial Narrow - Verdana - Courier New - MS Sans Serif

Sekundární font: pokud systém nenajde písmo zadané ve stránce, zkusí najít písmo další, které je uvedeno jako druhé za čárkou. Například: font-family: Verdana, Arial, Helvetica, sans-serif je spolehlivá deklarace bezpatkového písma. 

Velikost písma se dá zadávat absolutně (v bodech = pt nebo pixelech px) nebo relativně (v procentech nebo ve stupních). Základní rozdíl je pak ten, že relativně zadané písmo si může uživatel zvětšit v prohlížeči (velikost písma), což u absolutně zadaných velikostí (pt, px apod.) nemůže. Webdesigneři se liší v názoru, co je lepší a nemohou se shodnout. 

Pro přepočet bodů na pixely platí 4pt = 3px; lze použít též mm, cm, in. Vizte přehled CSS jednotek. Stupňů písma je 7, zadávají se pomocí slov typu large apod. (v tabulkách nepoužívám). 

Tip: při nastavování velikosti písma nastavte také výšku řádku vlastností line-height. Není to nutné, ale text se při vyšším řádku stává čitelnějším. Obvykle se dává výška řádku přibližně o polovinu větší, než je výška písma.

Spolehlivá deklarace: Většinou nestačí nastavit písmo pro celé tělo (tag <body>). Musí se napsat něco jako: 

body, p, li, td {font....}

aby to fungovalo na celou stránku ve všech prohlížečích. Pokud budete zadávat velikost procenty, vynechte body, protože by se to těmi procenty někde násobilo vícekrát. 


Times

Times New Roman bývá základní font prohlížečů. Pokud font nezadáte, použije prohlížeč obvykle toto písmo. Je dobře čitelné z papíru, protože má patky. Čitelnost na obrazovce je horší, přesto považuji Times za nejlepší písmo. 

font-family: Times New Roman, serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

Garamond

Garamond je patkové písmo renesančního řezu. Pozoruhodná je zejména kurzíva. Díky patkám je dobře čitelné. Používá se zejména na nadpisy. Pro běžný text se nedoporučuje, protože je příliš vzdušné. Na mnoha systémech toto písmo nebývá nainstalované, proto se jistí Timesem. Řídce se vyskytují problémy s českými znaky. 

font-family: Garamond, Times, serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

Arial

Nejčastěji používané písmo vyniká jednoduchostí. Nemá patky, proto se špatně čte z papíru, ale pro obrazovku je velmi vhodné. Problémem tohoto fontu je "okoukanost" a přílišná zahuštěnost prostoru. Nebývají s ním problémy, protože patří do záklaních instalací na všech systémech. Přesto se někdy jistí Helveticou a sans-serifem. Chybuje v češtině na Win 3.11 (a tak je lepší deklarovat ho jako "Arial CE"). Je třeba dávat pozor na to, že Arial je písmo opticky i fakticky vyšší, protože má vysoké malé znaky. Používáte-li Arial zárověň s Timesem, zmenšete Arial. 

font-family: Arial, Helvetica, sans-serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

Georgia

Georgia je novější font. Má velmi úzké dříky písmen, ale je patkové. Používám ho na normální text. Tento font se doporučuje na delší texty, protože má patky, které vedou oko, ale přitom nehrozí, že znaky splynou. Je lépe čitelný. Nebývá na všech systémech, proto se jistí jiným fontem (v tomto případě Arialem a sans-serifem). Hlavní nevýhodou je fakt, že se na Internetu vyskytuje v různých variantách (i nečeských), čili na jeho vzhled není spolehnutí

font-family: Georgia, Arial, sans-serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

Verdana

Nové písmo vynikající svou kulatostí se stává velmi oblíbeným. Patří do skupin bezpatkových písem, je trochu podobné Arialu. Na rozdíl od Arialu má ale širší znaky a relativně ještě vyšší malé znaky. Je velmi špatně čitelné, ale pokud se nastaví malá velikost a vysoké řádky, dá se to skousnout. Na mnoha starších systémech se nevyskytuje a občas má problémy s českými znaky. Jistí se Arialem nebo Courierem. 

font-family: Verdana, Arial, Courier, sans-serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

Courier New

Strojové písmo. Jedinou předností tohoto ošklivého písma je fakt, že má všechny znaky stejně široké (označuje se jako "monotype"). Proto se hodí pro různé výpisy kódů, ve kterých musejí znaky pod sebe zapadat. Občas se dá použít pro poutavé nadpisy. Prohlížeče toto písmo používají pro elementy <code>, <pre> a podobné. Jistí se starší variantou Courier a generickým monotype. 

font-family: Courier New, Courier, monotype
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

MS Sans Serif

Systémové písmo. Je na všech windowsáckých počítačích. Jinde se dá jistit sekundárním fontem Geneva. Stává se, že blbne s češtinou (obzvláště v editorech a v Opeře). Přestože jde o písmo systémové, je vcelku málo okoukané, protože ho nikdo pořádně nepoužívá. Pohledné jsou zejména menší řezy. Kurzívu je lépe nepoužívat.

font-family: MS Sans Serif, Geneva, sans-serif
Normální font-weight: bold font-style: italic tučná kurzíva
font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 8pt

font-size: 10pt

font-size: 11pt

font-size: 12pt

font-size: 13pt

font-size: 14pt

font-size: 16pt

font-size: 18pt

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

font-size: 80%

font-size: 90%

font-size: 95%

font-size: 100%

font-size: 105%

font-size: 110%

font-size: 120%

font-size: 130%

 


Jak psát web