Schriften-Fonts

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
ultraleichtmuy fina
thin
ultra chiaro
ultra light
ultra mager
ultra maigre
100
extraleichtextra light200
magerchiarissimo
chiaro
fina
light
maigre
mager
zart
300
normalchiaro tondo
normal
regular
400
leichthalbfettmedium500
halbfettalvfet
demi-bold
demi-gras
neretto
semibold
seminegra
600
fettbold
fet
gras
negra
nero
700
extrafettextra bold
extrafet
extra gras
extra heavy
muy negra
nerissimo
800
ultrafettblack
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.