Typografie

Wenn Sie keine Stile für Ihren Text angeben, wenden Browser ihre eigenen Standardstile an. Diese werden als User-Agent-Stylesheets bezeichnet und können sich von Browser zu Browser unterscheiden. Nutzer können auch ihre eigenen Einstellungen für die Textanzeige festlegen.

Wenn Sie keine Zeilenlänge angeben, wird der Text in Browsern am Bildschirmrand umgebrochen. Text im Web ist also standardmäßig responsiv und wird an den Darstellungsbereich des Nutzers angepasst.

Nur weil Text auf einen Bildschirm passt, heißt das nicht, dass er sich auch gut lesen lässt. Bei guter Typografie geht es darum, Ihren Text auf angemessene Weise zu präsentieren. Bei der Typografie geht es um mehr als nur darum, geeignete Schriftarten auszuwählen. Sie müssen die Einstellungen des Nutzers, die Größe des Texts, die Zeilenlänge und den Abstand zwischen den Textzeilen berücksichtigen.

Textgröße

Es ist schwierig zu wissen, welche Textgröße im Web verwendet werden sollte.

Wenn jemand einen kleinen Bildschirm verwendet, ist es wahrscheinlich, dass er sich in der Nähe der Augen befindet – etwa eine Handbreite entfernt.

Je größer die Bildschirme werden, desto schwieriger ist es jedoch, diese Verbindung herzustellen. Ein Laptop-Bildschirm befindet sich wahrscheinlich relativ nah am Betrachter, ein Breitbild-Desktopmonitor hat jedoch ungefähr die Größe eines Fernsehbildschirms. Personen sitzen etwa eine Armlänge von einem Computerbildschirm entfernt, aber viel weiter von einem Fernseher.

Sie können zwar nicht mit Sicherheit wissen, wie weit jemand von einem Bildschirm entfernt ist, aber Sie können versuchen, Textgrößen zu verwenden, die hoffentlich angemessen sind. Verwenden Sie kleinere Textgrößen für kleinere Bildschirme und größere Textgrößen für größere Bildschirme.

Mit Media-Anfragen können Sie die font-size-Property ändern, wenn der Bildschirm breiter wird.

@media (min-width: 30em) {
  html {
    font-size: 125%;
  }
}

@media (min-width: 40em) {
  html {
    font-size: 150%;
  }
}

@media (min-width: 50em) {
  html {
    font-size: 175%;
  }
}

@media (min-width: 60em) {
  html {
    font-size: 200%;
  }
}

Text skalieren

Der Wechsel zwischen festen Textgrößen an bestimmten Breakpoints ist sehr sprunghaft. Bei einem responsiveren Ansatz wird die Textgröße durch die Breite des Geräts des Nutzers bestimmt.

Die Einheit vw in CSS steht für „viewport width“ (Breite des Darstellungsbereichs). Wenn Sie Schriftgrößen mit der Breite des Darstellungsbereichs verknüpfen, wird der Text proportional zur Browserbreite vergrößert und verkleinert. Daher ist es schwierig, die Textgröße für eine bestimmte Breite vorherzusagen. Sie wissen jedoch, dass die Textgröße für die Browserbreite des Nutzers geeignet ist.

Es ist wichtig, dass Sie vw nicht allein in einer Schriftgrößen-Deklaration verwenden.

html {
  font-size: 2.5vw;
}

In diesem Fall kann der Nutzer die Textgröße nicht ändern. Der Text kann in der Größe angepasst werden, wenn Sie eine relative Einheit wie em, rem oder ch verwenden. Dafür ist die CSS-Funktion calc() perfekt geeignet.

html {
  font-size: calc(0.75rem + 1.5vw);
}

Die Berechnung wird vom Browser übernommen. Daher ist es schwierig, die genaue Textgröße für eine bestimmte Breite vorherzusagen. Sie wissen jedoch, dass die Textgröße im richtigen Bereich liegt. Die genauen Berechnungen der Textgröße werden vom Browser des Nutzers vorgenommen.

Es besteht jedoch die Möglichkeit, dass der Text auf schmalen Bildschirmen zu klein und auf breiten Bildschirmen zu groß dargestellt wird.

Text einklemmen

Sie möchten wahrscheinlich nicht, dass Ihr Text extrem verkleinert und vergrößert wird. Mit der CSS-Funktion clamp() können Sie festlegen, wo die Skalierung beginnt und endet. Dadurch wird die Skalierung auf einen bestimmten Bereich begrenzt.

Die Funktion clamp() ähnelt der Funktion calc(), verwendet aber drei Werte. Der mittlere Wert ist derselbe, den Sie an calc() übergeben. Der Öffnungswert gibt die Mindestgröße an, in diesem Fall 1 rem, damit die bevorzugte Schriftgröße des Nutzers nicht unterschritten wird. Der Schließwert gibt die maximale Größe an.

html {
  font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}

Die Textgröße wird jetzt proportional zum Bildschirm des Nutzers verkleinert und vergrößert, ist aber nie kleiner als 1rem oder größer als 2rem.

Zeilenlänge

Das Web ist nicht Print, aber wir können aus der Welt des Print lernen und diese Erkenntnisse auf das Web anwenden.

In seinem klassischen Buch The Elements of Typographic Style (Die Elemente des typografischen Stils) schrieb Robert Bringhurst Folgendes zur Zeilenlänge (oder zum Maß):

Eine Zeilenlänge von 45 bis 75 Zeichen gilt allgemein als zufriedenstellend für eine einspaltige Seitengruppe mit einer Serifenschrift in einer Textgröße. Die 66-Zeichen-Zeile (einschließlich Buchstaben und Leerzeichen) gilt allgemein als ideal. Bei mehreren Spalten sind 40 bis 50 Zeichen ein besserer Durchschnitt.

Sie können die Zeilenlänge nicht direkt in CSS festlegen. Es gibt keine line-length-Property. Sie können jedoch verhindern, dass der Text zu breit wird, indem Sie die Breite des Containers begrenzen. Dafür eignet sich das Attribut max-inline-size.

Legen Sie die Zeilenlängen nicht mit einer festen Einheit wie px fest. Nutzer können die Schriftgröße vergrößern und verkleinern. Die Zeilenlängen sollten sich entsprechend anpassen. Verwenden Sie eine relative Einheit wie rem oder ch.

article {
  max-inline-size: 700px;
}

article {
  max-inline-size: 66ch;
}

Wenn Sie ch-Einheiten für die Breite verwenden, werden neue Zeilen bei dieser Schriftgröße nach dem 66. Zeichen umgebrochen.

Zeilenhöhe

Obwohl es in CSS keine line-length-Eigenschaft gibt, gibt es die Eigenschaft line-height.

Kürzere Textzeilen können größere line-height-Werte haben. Wenn Sie jedoch große line-height-Werte für lange Textzeilen verwenden, fällt es dem Leser schwer, den Blick vom Ende einer Zeile zum Anfang der nächsten Zeile zu bewegen.

article {
  max-inline-size: 66ch;
  line-height: 1.65;
}
blockquote {
  max-inline-size: 45ch;
  line-height: 2;
}

Verwenden Sie einheitenlose Werte für Ihre line-height-Deklarationen. So wird sichergestellt, dass die Zeilenhöhe relativ zu font-size ist.

line-height: 24px;

line-height: 1.5;

Kombinationen und Skalierung

Achten Sie beim Erstellen von Benutzeroberflächen auf eine klare Hierarchie, um die Übersichtlichkeit und den Seitenfluss zu verbessern. Dazu können Sie eine in Ihr Designsystem integrierte Typografieskala verwenden.

Webschriftarten

Eine Schriftart ist wie eine Stimme für Ihre Worte. Lange Zeit gab es im Web nur sehr wenige Schriftarten. Systemschriftarten waren die einzigen Optionen. Jetzt können Sie aber eine Web-Schriftart auswählen, die zum Stil Ihrer Inhalte passt.

Mit @font-face teilen Sie Browsern mit, wo sie Ihre Webfont-Dateien finden. Verwenden Sie woff2 als Webfont-Format. Sie wird gut unterstützt und bietet die besten Leistungssteigerungen.

@font-face {
  font-family: Roboto;
  src: url('/fonts/roboto-regular.woff2') format('woff2');
}
body {
  font-family: Roboto, sans-serif;
}

Jede Webfont-Datei, die Sie hinzufügen, kann jedoch die Nutzerfreundlichkeit beeinträchtigen, da sie die Seitenladezeit verlängert. Denken Sie daran, dass es beim Design nicht nur darum geht, wie die endgültigen Pixel aussehen. Wie schnell diese Pixel gerendert werden, ist ein wichtiger Faktor für die Nutzerfreundlichkeit. Eine schnelle Nutzererfahrung ist eine gute Nutzererfahrung.

Schriftart wird geladen

Sie können anfordern, dass Browser eine Schriftartdatei so schnell wie möglich herunterladen. Fügen Sie dem head Ihres Dokuments ein link-Element hinzu, das auf Ihre Webfont-Datei verweist. Ein rel-Attribut mit dem Wert preload weist den Browser an, diese Datei zu priorisieren. Ein as-Attribut mit dem Wert font gibt dem Browser an, um welche Art von Datei es sich handelt. Mit dem type-Attribut können Sie noch genauer sein.

<link href="/fonts/roboto-regular.woff2" type="font/woff2"
  rel="preload" as="font" crossorigin>

Sie müssen das Attribut crossorigin angeben, auch wenn Sie die Schriftartdateien selbst hosten.

Mit der CSS-Eigenschaft font-display können Sie dem Browser mitteilen, wie er den Wechsel von einer Systemschriftart zu einer Webschriftart verwalten soll. Sie können auch festlegen, dass überhaupt kein Text angezeigt wird, bis die Web-Schriftart geladen ist. Sie können die Systemschriftart sofort anzeigen und dann zur Webschriftart wechseln, sobald sie geladen ist. Beide Strategien haben Nachteile. Wenn Sie warten, bis die Web-Schriftart heruntergeladen wurde, bevor Sie Text anzeigen, sehen Nutzer möglicherweise frustrierend lange eine leere Seite. Wenn Sie den Text zuerst in einer Systemschriftart anzeigen und dann zur Webschriftart wechseln, kann es zu einem störenden Verschieben von Inhalten auf der Seite kommen.

Ein guter Kompromiss besteht darin, kurz zu warten, bevor Sie Text einblenden. Wenn die Web-Schriftart vor Ablauf dieser Zeit geladen wird, wird der Text mit der Web-Schriftart ohne Inhaltsverschiebungen angezeigt. Wenn die Web-Schriftart nach Ablauf der Zeit immer noch nicht geladen wurde, wird der Text mit der Systemschriftart angezeigt, damit der Nutzer die Inhalte zumindest lesen kann.

Verwenden Sie den font-display-Wert swap, wenn die Web-Schriftart die Systemschriftart ersetzen soll, sobald sie geladen ist.

body {
  font-family: Roboto, sans-serif;
  font-display: swap;
}

Verwenden Sie für font-display den Wert fallback, wenn Sie nach dem Rendern von Text die Systemschriftart beibehalten möchten.

body {
  font-family: Roboto, sans-serif;
  font-display: fallback;
}

Variable Schriftarten

Wenn Sie viele verschiedene Schriftstärken oder ‑arten derselben Schriftart verwenden, benötigen Sie möglicherweise viele separate Schriftartdateien – eine separate Schriftartdatei für jede Schriftstärke oder ‑art.

Variable Schriftarten lösen dieses Problem, indem sie nur eine Datei verwenden. Anstatt separate Dateien für die Varianten „Normal“, „Fett“, „Extrafett“ usw. zu haben, ist eine variable Schriftartdatei responsiv. Sie enthält alle Informationen, die für die Darstellung in verschiedenen Schriftstärken oder ‑arten erforderlich sind.

Das bedeutet, dass eine einzelne Variable Font-Datei größer ist als eine einzelne reguläre Schriftartdatei, aber eine einzelne Variable Font-Datei ist wahrscheinlich kleiner als mehrere reguläre Schriftartdateien. Wenn Sie viele verschiedene Schriftstärken verwenden, kann eine variable Schriftart die Leistung erheblich verbessern.

Bei guter Typografie im Web geht es nicht nur um die Schriftarten, die Sie als Designer auswählen. Bei responsiver Typografie geht es auch darum, das Gerät und die Netzwerkverbindung des Nutzers zu berücksichtigen. Das Ergebnis ist ein Design, das unabhängig davon, wie es betrachtet wird, immer richtig aussieht.

Nachdem Sie sich mit responsivem Text vertraut gemacht haben, ist es an der Zeit, sich responsive Bilder anzusehen.

Dein Wissen wird getestet

Ihr Wissen zu Typografie testen