
Schriften (Fonts)
Schriften sind ein essenzieller Bestandteil des Webdesigns und tragen maßgeblich zur Benutzererfahrung und zur visuellen Identität einer Webseite bei. Bei der Gestaltung von Webseiten wird häufig eine markantere Schriftart für die Hauptüberschrift (H1) verwendet, während für die weiteren Titel (H2-H6) und den Fließtext eine harmonierende, aber weniger auffällige Schriftart gewählt wird. Diese Kombination sorgt für eine klare Hierarchie und erleichtert den Lesefluss. Gängige Anbieter für diese Fonts sind z.B. Google Fonts oder MyFonts.
Ein häufiges Problem beim Einsatz von Schriften ist die Abhängigkeit von Online-Fonts, die oft von Servern in den USA heruntergeladen werden müssen. Dies kann die Ladezeiten der Webseite negativ beeinflussen und die Benutzererfahrung beeinträchtigen. Da mit jedem Aufruf der Webseite eine Verbindung zum Host der Fonts hergestellt wird, ist dieses auch ein DSGVO-Thema. Um diesem Problem entgegenzuwirken, ist es ratsam, die Schriften lokal in die Webseite einzubinden. Dadurch wird sichergestellt, dass diese schnell geladen werden und die Webseite auch bei einer schlechten Internetverbindung gut aussieht.
Lokal eingebundene Schriften
Für die lokale Einbindung von Schriften werden meist verschiedene Formate verwendet, darunter .ttf, .woff und .woff2. Jedes dieser Formate hat seine eigenen Vorzüge, wobei .woff und .woff2 speziell für das Web optimiert sind und eine bessere Kompression bieten.
Um die Schriften korrekt zuzuordnen und die verschiedenen Schriftstärken zu nutzen, kann eine Tabelle hilfreich sein. Diese Tabelle zeigt, welche Datei für welche Schriftstärke verwendet werden sollte, und erleichtert so die Implementierung der Schriften auf der Webseite.
Schriftstärken
Schriftstärken (deu.) | Schriftstärken (int.) | CSS font-weight |
---|---|---|
ultraleicht | muy fina thin ultra chiaro ultra light ultra mager ultra maigre | 100 |
extraleicht | extra light | 200 |
mager | chiarissimo chiaro fina light maigre mager zart | 300 |
normal | chiaro tondo normal regular | 400 |
leichthalbfett | medium | 500 |
halbfett | alvfet demi-bold demi-gras neretto semibold seminegra | 600 |
fett | bold fet gras negra nero | 700 |
extrafett | extra bold extrafet extra gras extra heavy muy negra nerissimo | 800 |
ultrafett | black extra black super ultra bold | 900 |
Insgesamt ist die Wahl und Einbindung von Schriften ein entscheidender Faktor für das Webdesign. Durch die richtige Auswahl und lokale Einbindung können Designer sicherstellen, dass ihre Webseiten nicht nur ästhetisch ansprechend, sondern auch funktional und benutzerfreundlich sind.