Spezifikation

Die Dualität der Schriftdeklaration

Wir müssen die Schriftgestaltung im CSS belassen, damit die Semantik des HTML nicht gestört wird.

Die HTML-Tags strukturieren den Text, mit dem CSS wird das Styling appliziert. Es ist essenziell, dass wir diese Trennung beibehalten und mit CSS-Klassen arbeiten, statt zu versuchen, diese HTML-Struktur auf Design-Ebene zu definieren.

Semantik

Die Semantik des HTML-5 sieht vor, jede section, article etc. eine eigene Titelstruktur, sprich jedesmal ein neuer h1, h2 etc. haben kann. Visuell fallen diese Titel unterschiedlich aus.

Der klassische HTML-Aufbau (non-sematisch) verfolgt hingegen eine stringente Titel-Hierarchie über die ganze Webseite.

Weisst du, wie deine Seite programmiert wird?

Benutzer, Marketing, Google und Screen-Reader

Diverse Ansichten aufs Gleiche erzwingen unterschiedliche Gewichtungen zwischen semantischer und visueller Hierarchie. Je nach Perspektive driftet die visuelle sowie semantische Meinung über die Schriftgrösse auseinander.
z.B.: Haben viele Unternehmens-Startseiten ihr Werbeslogan als grössten Titel, aber aus Suchmaschinen- und Accessibility-Sicht wäre der Firmenname passender.

Separation of Concerns

HTML ist für die Struktur einer Webseite, CSS für die Gestaltung. Nutzen wir Klassen statt HTML-Elemente zur Schriftgestaltung unterstützen wir diese Trennung der Zuständigkeiten.

Terminologie

In einem Projekt-Team ist es zudem viel einfach, wenn die visuellen Schriftschnitte einen eigenen Namen haben, so wird in Gesprächen viel spezifischer kommuniziert.

Wir bleiben flexibler und stringenter, wenn wir eine eigene Schriftlogik aufbauen.

© Webdesign Essentials
Vertiefe dich ins ganze Kapitel

Web-Typografie