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. 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.
Vizte též Uživatelská písma a hlavně Přehled vlastností CSS.
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, Arial Narrow, 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. Vebdesigneř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 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.
| 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 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.
| 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% |
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.
| 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 Narrow je novější písmo. Má velmi úzké znaky, ostatně se podle toho jmenuje. Používám ho zejména pro odkazová tlačítka, která potřebuji mít úzká. Tento font se doporučuje na delší texty, protože ačkoli nemá patky, není tak robustní jako Arial, a tak je lépe čitelný. Nebývá na všech systémech, proto se jistí Arialem a sans-serifem. Hlavní nevýhodou je fakt, že se na Internetu vyskytuje v různých variantách, čili na jeho vzhled není spolehnutí.
| 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% |
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 ná 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.
| 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% |
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.
| 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% |
Systémové písmo. Je na všech windowsáckých počítačích. Jinde se dá jistit sekundárním fontem Geneva. Velmi zřídka se stává, že blbne s češtinou (obzvláště v editorech). 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.
| 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:
http://dusan.pc-slany.cz/internet/
Píše Yuhů: autorova stránka, mail: dusan@pc-slany.cz
Sláva kočkám! Poslední aktualizace 08.12.2001