Fonty

Vhodně zvolené fonty se nemalou měrou podílejí na prvním dojmu každého dokumentu.

Bezpečný font

Bezpečné fonty nabízejí:

• jednotný vzhled
• okamžité načtení

Bezpatkové písmo	Operační systém
Arial	téměř všechny
sans-serif	všechny

Příklad použití:

body {
  font-family: Arial, sans-serif;
}

Bezpečné patkové písmo	Operační systém
Times New Roman	téměř všechny
serif	všechny

Přiklad použití:

h1, h2, h3, h4, h5, h6 {
  font-family: 'Times New Roman', serif;
}

Bezpečné neproporcionální písmo (stejně široké znaky)	Operační systém
Courier New	téměř všechny
monospace	všechny

Příklad použití:

code, kbd, pre, samp {
  font-family: 'Courier New', monospace;
}

Systémové fonty

Výhody systémových fontů:

• vzhled odpovídá používanému operačnímu systému
• okamžité načtení
• jsou navržena pro obrazovky s vysokým rozlišením

Na pořadí systémových písem záleží a je třeba je průběžně aktualizovat na základě nově vydávaných operačních systémů.

Systémové písmo	Operační systém
-apple-system (San Francisco)	iOS Safari, macOS Safari, macOS Firefox
system-uimac	OS Chrome, Windows Chrome (new versions)
BlinkMacSystemFont (San Francisco)	macOS Chrome
Segoe UI	Windows Vista and newer
Tahoma	Windows XP
Roboto	Android, Chrome OS
Oxygen / Oxygen-Sans	KDE
Fira Sans	Firefox OS
Droid Sans	Android (old versions)
Ubuntu	Ubuntu
Cantarell	GNOME
Helvetica Neue	OS Yosemite
Lucida Grande	OS Mavericks
Arial	všechny
sans-serif	všechny

Příklad použití:

body {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Tahoma, Roboto, Oxygen, Oxygen-Sans, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

Webové fonty

Webové fonty nabízejí jednotný vzhled, je ovšem třeba „ošetřit“ dobu před načtením zvoleného webového fontu.

Google Fonts:

• pro češtinu zvolte: Latin Extended
  • např. New Rocker, Poiret One, Open Sans Condensed, Black Ops One, Hanalei, Oregano, Devonshire, Black Ops One, atd.
• pro kontrolu využijte např. Pangram (z řečtiny „každé písmeno“): „Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890„
• volte raději užší písmo (u moc širokého písma se vejde na řádek méně znaků)
• přidejte font do výběru (Select This Font)
  • sekce „Families Selected“ zobrazuje rychlost načítání písma (Load Time)
    • na záložce „Customize“ zvolte: Latin Extended

Font Squirrel:

• neobaluje HTML zdroj pomocnými tagy
• využívá kombinace javascriptu a CSS
• font je možné i tisknout
• má menší datovou náročnost než Cufon
• font se aplikuje i na obsah dotažený např. pomocí jquery

Cufon:

• obaluje HTML zdroj pomocnými tagy
• větší datová náročnost než Font Squirrel

Font Awesome:

• Font Awesome – ikony zdarma i pro komerční účely

Glyphicons:

• zdarma pouze ikony ve formátu PNG

Doporučený postup pro webové fonty

1. Stáhnout si požadovaný TTF font písma:
   • České fonty (Pangram: „Nechť již hříšné saxofony ďáblů rozzvučí síň úděsnými tóny waltzu, tanga a quickstepu. 1234567890“)
   • Font Squirrel (české webové fonty)
   • Google Fonts (české – Latin Extended)
   • The League of Moveable Type
   • Lost Type
   • Typekit.com
   • Fonts4Free
2. Pomocí Font Squirrel generátoru vygenerovat požadované soubory:
   • pro české fonty nastavit volby:
     • Expert
     • Subsetting: Custom Subsetting
       • Language: Czech
       • (Unicode Tables: Basic Latin, Latin Extended-A)
     • Agreement: Yes
3. Rozbalit webfontkit archiv, rozbalený adresář přejmenovat např. na fonts a umístit do svého tématu vzhledu.
4. V html zdroji připojit CSS fonts/stylesheet.css.
5. Název fontu obsažený v souboru stylesheet.css je možné použít v libovolném CSS jako vlastnot font-family.
6. Např. pomocí https://meowni.ca/font-style-matcher/ ošetřete dobu před načtením webového fontu.
7. Definujte si vlastní název systémového fontu viz např. https://css-tricks.com/snippets/css/system-font-stack/#article-header-id-2