Schriftarten

• so wenig wie möglich Schriftschnitte laden
• Fonts verkleinern: Subsetting
• Flash Of Unstyled Text (FOUT) besser als Flash Of Invisible Text (FOIT)
• Vermeidung zusätzlicher Requests: Einbetten von Fonts ins CSS per Data-URI
• Vermeidung starker Irritationen: Wahl eine Ersatz-Systemfonts im Font-Stack, dessen Metriken dem endgültigen Font nahe kommen

Beispiel

<!-- Nicht-blockierendes Laden von Schriftarten (im CSS als Data-URI) -->
<link rel="stylesheet" href="fonts.css" media="none" onload="if(media!='all')media='all'">
<noscript><link rel="stylesheet" href="fonts.css"></noscript>

Links

• https://www.filamentgroup.com/lab/font-events.html (Filament Group)
• Umsetzung mit FontFaceObserver (Filament Group)

Schriftgrößen

• Standardgröße 16px = 1em (= 100%)
• Schriftgrößen stets nur relativ angeben, da sonst die benutzerdefinierten Voreinstellungen ausgehebelt werden:

html {
    /* Um die Standardschriftgröße um 20% zu vergrößern */
    font-size: 120%;
    font-size: 1.2em;    
}

• Auch möglich: Angabe in Viewport-Einheiten font-size: calc(1em + 1vw)
• margin und padding von Texten sollten sich proportional zum Text verändern → Angabe in den schriftartbezogenen Maßeinheiten em und rem
• line-height sollte relativ als Fließkommazahl angegeben werden und bezieht sich dann ebenfalls auf die aktuelle Schriftgröße

Links

• leserlich.info — Schritte zu einem inklusiven Kommunikations­design