Skip to main content

Kontakt

Was interessiert Sie?

Zurück zum Glossar (T)
Glossar · T

Typografie.

Typografie ist die Gestaltung mit Schrift: die Wahl der Schriftarten und ihre Anordnung in Grösse, Zeilenabstand, Zeilenlänge, Gewicht und Hierarchie. Im Webdesign entscheidet sie massgeblich darüber, ob Texte gelesen, überflogen oder übersprungen werden.

Illustration zu «Typografie»: Schriftmuster mit Grössenskala von H1 bis Caption AaOutfitH1Klare Schrift48pxH2Klare Schrift34pxH3Klare Schrift24pxBodyKlare Schrift18pxCaptionKlare Schrift14pxABCDEFGHIJKLMabcdefghijklm 0123456789Zeilenlänge 60–75 Zeichen

Typografie — ausführlich erklärt

Typografie wird oft auf die Wahl einer schönen Schrift reduziert. Die Schriftart ist aber nur ein Teil. Mindestens so wichtig sind Schriftgrösse, Zeilenabstand, Zeilenlänge, Abstände zwischen Absätzen und Überschriften, die Gewichtung (regular, medium, bold) und die Hierarchie zwischen Titel, Untertitel und Fliesstext. Eine gewöhnliche Schrift in sauberer Anordnung liest sich besser als eine besondere Schrift in schlechter.

Für Bildschirmtexte haben sich einige Faustregeln bewährt: Fliesstext mindestens 16 Pixel, auf Desktop oft 17 bis 20; ein Zeilenabstand von etwa dem 1,4- bis 1,7-Fachen der Schriftgrösse; eine Zeilenlänge von ungefähr 50 bis 80 Zeichen; ausreichend Kontrast zwischen Text und Hintergrund gemäss WCAG. Überschriften dürfen deutlich grösser sein, brauchen aber engere Zeilenabstände, damit mehrzeilige Titel nicht auseinanderfallen.

Bei der Schriftwahl zählt die Verbindung von Marke und Funktion. Serifenschriften wirken klassisch und eignen sich gut für grosse Überschriften; serifenlose Schriften sind auf Bildschirmen in kleinen Grössen robust. Bewährt hat sich eine Kombination aus höchstens zwei Familien: eine für Überschriften mit Charakter, eine für Fliesstext mit guter Lesbarkeit. Wichtig sind deutsche und französische Sonderzeichen, Ziffern in passender Form für Preise und Tabellen sowie die Lizenz für den Web-Einsatz.

Typografie beeinflusst auch die Technik. Jede zusätzliche Schriftdatei verlängert die Ladezeit; Schriften, die spät laden, lassen Texte springen und verschlechtern den Cumulative Layout Shift. Moderne Websites laden deshalb nur die benötigten Schnitte, nutzen variable Schriften und hosten sie selbst, statt sie bei externen Diensten wie Google Fonts abzurufen.

Beispiel: Lesbarkeit auf dem Smartphone

Ein Architekturbüro hat eine Website mit sehr feiner, grauer Schrift in 14 Pixeln — auf dem grossen Bildschirm im Büro wirkt das elegant. Auf dem Smartphone im Tageslicht ist der Text kaum lesbar, Besucher verlassen die Projektseiten nach wenigen Sekunden. Die Überarbeitung behält die Schrift für Überschriften, wechselt beim Fliesstext auf einen kräftigeren Schnitt in 17 Pixeln, erhöht den Kontrast und verkürzt die Zeilen. Das Erscheinungsbild bleibt zurückhaltend, aber die Texte werden gelesen.

Typografie ist bei uns Teil jedes Webdesigns und jedes Corporate Designs.

Weiterführende Seite

Webdesign Zürich

Im Blog vertieft

Webdesign-Trends Schweiz

Häufige Fragen zu Typografie

Für Fliesstext gelten 16 Pixel als Untergrenze, auf grösseren Bildschirmen sind 17 bis 20 Pixel üblich. Entscheidend ist das Zusammenspiel mit Zeilenabstand, Zeilenlänge und Kontrast.

In der Regel eine bis zwei Schriftfamilien mit wenigen Schnitten. Mehr Schriften erhöhen die Ladezeit und wirken schnell unruhig.

Die Schriftart ist das Werkzeug, Typografie die Arbeit damit: Grösse, Abstände, Hierarchie, Ausrichtung und Kombination. Dieselbe Schrift kann je nach Typografie hervorragend oder schlecht lesbar sein.

Bereit für Ihr Projekt?

Wenden Sie dieses Wissen auf Ihre Website an — DLM Digital hilft Ihnen dabei.