Typografie

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

Wenn Sie keine Zeilenlänge angeben, setzen Browser die Textzeilen am Bildschirmrand um. Text im Web ist also standardmäßig responsiv und passt sich an den Darstellungsbereich des Nutzers an.

Aber nur weil Text auf einen Bildschirm passt, heißt das nicht, dass er bequem zu lesen ist. Bei einer guten Typografie geht es darum, Ihren Text angemessen darzustellen. Die Typografie umfasst mehr als nur die Auswahl geeigneter Schriftarten. Sie müssen die Präferenzen der Nutzenden, die Textgröße, die Zeilenlänge und den Abstand zwischen den Textzeilen berücksichtigen.

Textgröße

Die Schriftgröße von Text im Web ist schwer zu erkennen.

Wenn jemand ein kleines Display verwendet, ist es wahrscheinlich, dass das Display nur eine Handlänge entfernt ist.

Je größer die Bildschirme sind, desto schwieriger wird es, eine Verbindung herzustellen. Ein Laptop-Bildschirm ist wahrscheinlich ziemlich nah am Betrachter, aber ein Breitbild-Desktop-Bildschirm ist ungefähr genauso groß wie ein Fernsehbildschirm. Menschen sitzen eine Armlänge von einem Desktop-Bildschirm entfernt, sitzen aber viel weiter vom Fernseher entfernt.

Auch wenn Sie nicht genau wissen können, wie weit jemand von einem Bildschirm entfernt ist, können Sie versuchen, Textgrößen zu verwenden, die sich hoffentlich als angemessen erweisen. Verwenden Sie kleinere Textgrößen für kleinere Bildschirme und größere Textgrößen für größere Bildschirme.

Mit Medienabfragen können Sie die Eigenschaft font-size ändern, wenn der Bildschirm größer 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

Das Umschalten zwischen festen Textgrößen an bestimmten Haltepunkten ist ziemlich kompliziert. Ein reaktionsschnellerer Ansatz besteht darin, die Textgröße von der Breite des Geräts des Nutzers beeinflussen zu lassen.

In CSS steht die Einheit vw für „viewport width“ (Darstellungsbereichsbreite). Das Verbinden von Schriftgrößen mit dem Die Breite des Darstellungsbereichs bedeutet, dass der Text proportional zur Breite des Browsers größer und kleiner wird. Dadurch lässt sich nur schwer vorhersagen, wie groß der Text in einer bestimmten Breite sein wird. Sie wissen jedoch, dass die Textgröße an die Browserbreite des Nutzers angepasst wird.

Es ist wichtig, dass du in einer Schriftgrößendeklaration nicht das vw an sich verwendest.

html {
  font-size: 2.5vw;
}

In diesem Fall kann der Nutzer die Größe des Textes nicht ändern. Die Größe des Textes kann angepasst werden, wenn Sie eine relative Einheit verwenden, z. B. em, rem oder ch. Die CSS-Funktion calc() ist dafür perfekt geeignet.

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

Der Browser übernimmt die Berechnungen. Das macht es schwierig, genau vorherzusagen, wie die Textgröße bei einer bestimmten Breite sein wird, aber Sie wissen, dass die Textgröße im richtigen Bereich liegt. Der Browser des Nutzers findet die genauen Textgrößenberechnungen.

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

Fixierungstext

Wahrscheinlich möchten Sie nicht, dass Ihr Text zu klein und zu extrem wird. Mit der CSS-Funktion clamp() können Sie festlegen, wo die Skalierung beginnt und endet. Dadurch wird die Skalierung auf einen bestimmten Bereich „beschränkt“.

Die clamp()-Funktion entspricht der calc()-Funktion, akzeptiert jedoch drei Werte. Der mittlere Wert ist mit dem identisch, den Sie an calc() übergeben. Der Anfangswert gibt die Mindestgröße an, in diesem Fall 1rem, damit die vom Nutzer bevorzugte Schriftgröße nicht unterschritten wird. Der Schlusswert gibt die maximale Größe an.

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

Jetzt wird die Textgröße je nach Bildschirm des Nutzers verkleinert und vergrößert. Sie wird jedoch nie unter 1rem oder über 2rem liegen.

Zeilenlänge

Das Web ist keine Printversion, aber wir können daraus etwas lernen und sie auf das Web anwenden.

In seinem klassischen Buch The Elements of Typographic Style sagt Robert Bringhurst Folgendes zur Linienlänge (oder Measure):

Alle Zeichen zwischen 45 und 75 Zeichen werden allgemein als zufriedenstellende Zeilenlänge für eine einspaltige Seitenreihe mit Serifentext und Schriftgröße angesehen. Die 66-stellige Zeile, die sowohl Buchstaben als auch Leerzeichen umfasst, gilt weithin als ideal. Bei mehrspaltigen Arbeiten sind 40 bis 50 Zeichen besser.

Sie können die Zeilenlänge nicht direkt in CSS festlegen. Es gibt keine line-length-Property. Sie können jedoch verhindern, dass Text zu breit wird, indem Sie die Breite des Containers einschränken. Die Property max-inline-size ist dafür perfekt geeignet.

Legen Sie die Zeilenlängen nicht mit einer festen Einheit wie px fest. Nutzer können ihre Schriftgröße nach oben und unten skalieren und die Linienlängen sollten entsprechend angepasst werden. 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 beim 66. Zeichen dieser Schriftgröße umgebrochen.

Zeilenhöhe

In CSS gibt es zwar kein line-length-Attribut, dafür aber eine line-height-Property.

Kürzere Textzeilen können größere line-height-Werte haben. Wenn Sie jedoch große line-height-Werte für lange Textzeilen verwenden, ist es für das Auge schwer, vom Ende einer Zeile zum Anfang der nächsten zu gelangen.

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

Verwenden Sie für Ihre line-height-Deklarationen Werte ohne Einheit. Dadurch wird sichergestellt, dass die Zeilenhöhe relativ zur font-size ist.

line-height: 24px;

line-height: 1.5;

Kombinationen und Skalierung

Denken Sie daran, die Hierarchie beim Erstellen Ihrer Benutzeroberflächen zu priorisieren, um die Übersichtlichkeit und den Seitenfluss zu verbessern. Eine gute Möglichkeit dafür ist eine in Ihr Designsystem integrierte Typografieskala.

Web-Schriftarten

Ein Schriftbild ist wie eine Stimme für Ihre Wörter. Die längste Zeit im Web gab es nur sehr wenige Schriftartoptionen. Die einzigen Optionen waren Systemschriftarten. Jetzt können Sie jedoch eine Webschriftart auswählen, die zu Ihrem Content passt.

Mithilfe von @font-face kannst du Browsern mitteilen, wo sie deine Web Font-Dateien finden. Verwende WOFF2 als Webschriftart. Es wird gut unterstützt und erzielt die besten Leistungssteigerungen.

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

Jede hinzugefügte Webschriftartdatei kann jedoch die Nutzererfahrung beeinträchtigen, da sich dadurch die Seitenladezeit erhöht. Denken Sie daran, dass es beim Design nicht nur darum geht, wie die endgültigen Pixel aussehen. Wie schnell diese Pixel dargestellt werden, ist ein wichtiger Bestandteil der User Experience. Ein schnelles Erlebnis ist auch eine gute User Experience.

Schriftart wird geladen

Sie können festlegen, dass Browser so schnell wie möglich mit dem Herunterladen einer Schriftartdatei beginnen. Fügen Sie dem head-Element 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 teilt dem Browser mit, um welche Art von Datei es sich handelt. Mit dem Attribut type können Sie noch genauere Angaben machen.

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

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

Mit der CSS-Eigenschaft font-display teilen Sie dem Browser mit, wie die Umstellung von einer Systemschrift auf eine Webschriftart gesteuert werden soll. Sie können festlegen, dass erst dann Text angezeigt wird, wenn die Webschriftart geladen wurde. Sie können die Systemschriftart sofort anzeigen und nach dem Laden zur Webschriftart wechseln. Beide Strategien haben ihre Nachteile. Wenn Sie mit dem Anzeigen von Text warten, bis die Webschriftart heruntergeladen ist, sehen Nutzer möglicherweise frustrierend lange auf eine leere Seite. Wenn Sie den Text zuerst in einer Systemschriftart anzeigen und dann zur Webschrift wechseln, kann es bei den Nutzern zu irritierenden Verschiebungen des Inhalts auf der Seite kommen.

Ein guter Kompromiss besteht darin, eine kurze Zeit zu warten, bevor Text angezeigt wird. Wenn die Webschriftart geladen wird, bevor diese Zeit abgelaufen ist, wird der Text in der Webschriftart ohne Inhaltsverschiebungen angezeigt. Wurde die Webschriftart auch nach Ablauf der Zeit noch nicht geladen, wird der Text in der Systemschriftart angezeigt, damit der Nutzer den Inhalt zumindest lesen kann.

Verwenden Sie den font-display-Wert swap, wenn die Webschriftart beim endgültigen Laden der Webschriftart die Systemschrift dennoch ersetzen soll.

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

Verwenden Sie den font-display-Wert fallback, wenn Sie die Systemschrift beibehalten möchten, sobald der Text gerendert wurde.

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

Variable Schriftarten

Wenn Sie viele unterschiedliche Schriftstärken oder Stile desselben Schriftbilds verwenden, kann es sein, dass Sie am Ende viele separate Schriftartdateien verwenden – eine separate Schriftartdatei für jede Schriftstärke oder jeden Stil.

Variable Schriftarten lösen dieses Problem durch die Verwendung einer einzigen Datei. Eine Datei mit variabler Schriftart ist responsiv, anstatt separate Dateien für normal, fett, extrafett usw. zu haben. Sie enthält alle Informationen, die für die Darstellung über ein Spektrum an Gewichten oder Stilen erforderlich sind.

Das bedeutet, dass eine einzelne variable Schriftartdatei größer ist als eine einzelne reguläre Schriftartdatei, aber eine einzelne variable Schriftartdatei wahrscheinlich kleiner als mehrere reguläre Schriftartdateien ist. Wenn Sie viele unterschiedliche Schriftstärken verwenden, kann eine variable Schriftart zu einer großen Leistungssteigerung führen.

Bei einer guten Typografie im Web geht es nicht nur um die Schriftauswahl, die Sie als Designfachkraft treffen. Bei der responsiven Typografie geht es auch darum, das Gerät und die Netzwerkverbindung der Nutzenden zu respektieren. Das Endergebnis ist ein Design, das sich anfühlt, egal wie es betrachtet wird.

Sie wissen nun, wie der responsive Text funktioniert. Als Nächstes beschäftigen wir uns mit responsiven Bildern.

Wissen testen

Testen Sie Ihr Wissen über Typografie