Ako nastavovať písmo v CSS?

(Doplnené) Kóderom webových stránok odporúčam: Megapráca na definíciach písem do CSS pixyho má výsledky. Pre trupíkov s windozami len pripomínam, že správne poradie písem a definícií, ich názvy atď. sú velice variabilnou a nevyspytateľnou entitou s hmlistými výsledkami vo vyobrazení u klienta. Neobrňujte sa za hradby štatistík a verte, že Pixy venoval výskumu velikánsky kus času, roboty a premýšľania. V texte som ďalej vypichol samotné gro, ak máte záujem, neostane nič iné len sledovať pixyho.

Trošku to prepracujem podľa pohľadu kodéra, čiže potreba mať text istým písmom a k tomu odpovedajúca css definícia rodiny písem.
Pixy uviedol tento zoznam:

1 Arial — sans-serif
2 Comic Sans MS — „Comic Sans MS“, „Sand CE“, fantasy
3 Courier New — monospace
4 Georgia — Georgia, „New York CE“, utopia, serif
5 Impact — Impact, „Techno CE“, sans-serif
6 Lucida Console — „Lucida Console“, „Monaco CE“, fixed, monospace
7 Tahoma — Tahoma, „Lucida Grande CE“, lucida, sans-serif
8 Times New Roman — serif
9 Trebuchet MS — „Trebuchet MS“, „Geneva CE“, lucida, sans-serif
10 Verdana — Verdana, „Geneva CE“, lucida, sans-serif

A tu to trošku rozvediem ako otázku a odpoveď.

1. Chcem bezpatkové písmo, vo Windowse najčastejšie Arial:

Pixy: Arial — sans-serif
CSS: font-family: sans-serif;
Poznámka: takže netreba kukať do Windowsu na presné názvy písem vo svojom počítači a proste tam dajte iba tento generický názov písma.

2. Chcem nejaké nechutne ozdobné písmo:

Pixy: Comic Sans MS — „Comic Sans MS“, „Sand CE“, fantasy
CSS: font-family: „Comic Sans MS“, „Sand CE“, fantasy;
Poznámka: tu už treba pred generickým názvom uviesť kvôli špecifickým OS aj skutočné názvy písem, pretože je možné, že generický názov nahradí v reáli klient iným písmom, ktoré si možno neželáte.

3. Chcem písmo neproporcionálne, každé písmeno rovnaká šírka alebo chcem simulovať písací stroj:

Pixy: Courier New — monospace
CSS: font-family: monospace;
Poznámka: opäť jednoduchá situácia.

4. Chcem to pekné patkové písmo, ktoré vyzerá neskutočne dobre trošku väčšie:

Pixy: Georgia — Georgia, „New York CE“, utopia, serif
CSS: font-family: Georgia, „New York CE“, utopia, serif;
Poznámka: toto písmo nepoužívajte veľmi zmenšené, vyzerá to divne a doporučujem pre jeho pekný vzhľad aj zväčšiť riadkovanie.

5. Chcem nejaké in-techno písmo, nevadí mi, že niekde sa nezobrazí:

Pixy: Impact — Impact, „Techno CE“, sans-serif
CSS: font-family: Impact, „Techno CE“, sans-serif;
Poznámka: asi vhodné len na nadpisy, čiže texty s naozaj väčšími znakmi.

6. Ak je to možné, chcem iné neproporcionálne písmo:

Pixy: Lucida Console — „Lucida Console“, „Monaco CE“, fixed, monospace
CSS: font-family: „Lucida Console“, „Monaco CE“, fixed, monospace
Poznámka: no, pokúsime sa.. pozor na tie uvodzovky, myslím, že je korektné použiť aj apostrofy ako uvodzovky v názve písma s medzerami.

7. Vyžívam sa v drobulinkom písme, tak chcem nejaké bezpatkové a trošku iné ako Arial, ktorá majú všetci cooleri:

Pixy: Tahoma — Tahoma, „Lucida Grande CE“, lucida, sans-serif
CSS: font-family: Tahoma, „Lucida Grande CE“, lucida, sans-serif;
Poznámka: ak daný klient má Tahomu či Lucidu, tak sa zobrazí, čo chcete inak aspoň bezpatkový Arial. Ak píšete drobným písmom, nezabudnite že sa tým namáhajú očká a pri dlhších riadkoch na šírku je vhodné zväčšiť riadkovanie.

8. Chcem patkové písmo:

Pixy: Times New Roman — serif
CSS: font-family: serif;
Poznámka: bezproblémová generická rodina.

9. Chcem to ozvláštniť bezpatkovým písmom s jemnejšou linkou:

Pixy: Trebuchet MS — „Trebuchet MS“, „Geneva CE“, lucida, sans-serif
CSS: font-family: „Trebuchet MS“, „Geneva CE“, lucida, sans-serif;
Poznámka: zasa komplikovanejšia definícia.

10. Niečo podobné ako Tahoma ale trolinku tučnejšie linky písma:

Pixy: Verdana — Verdana, „Geneva CE“, lucida, sans-serif
CSS: font-family: Verdana, „Geneva CE“, lucida, sans-serif;
Poznámka: niekedy sa teda zobrazí Arial.

Komu aké písmo?

Významná webka:

Ak robíte web významnejšej firmy alebo sa kladie dôraz na dôveryhodnosť, striedmosť, žiadne výstrelky, tak špekulovať nad výraznými písmami nemá veľmi význam, takže pre tieto účely sa radšej smerujte k definíciam, ktoré obsahujú generické názvy:
Áno: 1, 8, 7, 10
S výhradami: 4, 9
Nie: 2, 3, 5, 6

Cool, veselý, živý, moderný, techno web:

Tak tam si definujte hociktorý z uvedených.

Ignorant page:

Web pre úzku skupinu ľudí, ja, moja mama, segra a kamoši, ktorí chodia stránku kukať na môj počítač:
Hocičo čo nájdete v C:\windows\fonts použite a hlavne, veľa farby, veľa čiar, hýbatka, veľmi dobré je použíť neočakávane marquee, kontrasný background a javascriptove blbinky, ktoré budú neustále meníť tvar, farbu a veľkosť písma. Nezabudnite zmeniť rolovací pruh a veľkosť okna webu. Písmo čo najmenšie.

Záver

Vhodné je vylúčiť závislosť na presnom type písma, najmä ak vám design manuál predpisuje napr. „výhradne písmo Arial“, tak je to divné a neprirodzené. Autor toho manuálu výrazne odflákol totiž svoju prácu. Nevie totiž, že Arial má len vo svojom Windowse a nejaký ten MacIntosh ho netrápi aj keď pre DTP by asi aj mal, nehovoriac o tom, že v DTP sa okrem TrueType používajú aj iné písma.
Vyvarujte sa definíciam ako je napr. font-family: System, Terminal
Toto sú naozaj písma výhradne vo Windows a ak náhodou váš web navštívi niekto bez nich, môže podľa podmienok stavby dokumentu vidieť naozaj divné veci.
Doplnené: pixy ešte cez obed doplnil peknú ukážku písem, trošku inak spracované to, o čom píšem vyššie.
Podstatné doplnenie sa týkalo systémových fontov, ktoré som tiež vyššie spomenul, v CSS existuje totiž „okľuka“, ktorou bezpečnejšie vyobrazíte písma typu Terminal, System a pod. Základom je totiž prebranie nastavenia systémových písiem z operačného systému (takže ak má používateľ popisky ikon v exotickom písme, tak aj vaša stránka bude mať patričný text v tomto písme).