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 von Browser zu Browser variieren. 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 – er passt sich dem 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. Typografie umfasst mehr als die Auswahl geeigneter Schriftarten. Sie müssen die Einstellungen der Nutzer, die Textgröße, die Zeilenlänge und den Abstand zwischen den Textzeilen berücksichtigen.

Textgröße

Es ist schwierig zu wissen, welche Textgröße im Web angemessen ist.

Wenn jemand ein kleines Display verwendet, ist es wahrscheinlich, dass er es ziemlich nah an den Augen hält – etwa in Armlänge.

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

Sie können zwar nicht genau wissen, wie weit jemand von einem Bildschirm entfernt ist, aber Sie können 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 responsiverer Ansatz besteht darin, die Schriftgröße von der Gerätebreite des Nutzers abhängig zu machen.

Die Einheit vw in CSS steht für „Viewport-Breite“. Wenn Sie Schriftgrößen mit der Breite des Viewports verknüpfen, wird der Text im Verhältnis zur Browserbreite vergrößert und verkleinert. Daher ist es schwierig vorherzusagen, wie groß der Text bei einer bestimmten Breite sein wird. Sie wissen jedoch, dass die Schriftgröße für die Browserbreite des Nutzers geeignet ist.

Verwenden Sie das Zeichen vw in einer Schriftgrößendeklaration nicht allein.

html {
  font-size: 2.5vw;
}

Andernfalls kann der Nutzer die Größe des Texts nicht ändern. Der Text kann neu skaliert werden, wenn Sie eine relative Einheit wie em, rem oder ch verwenden. Die CSS-Funktion calc() eignet sich dafür hervorragend.

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

Lassen Sie die Berechnungen vom Browser erledigen. Daher ist es schwierig, genau vorherzusagen, wie groß der Text bei einer bestimmten Breite sein wird. Sie wissen jedoch, dass die Textgröße im richtigen Bereich liegen wird. Der Browser des Nutzers berechnet die genaue Textgröße.

Jetzt besteht jedoch die Gefahr, dass der Text auf schmalen Bildschirmen zu klein und auf breiten Bildschirmen zu groß wird.

Fixierungstext

Sie möchten wahrscheinlich nicht, dass Ihr Text extrem schrumpft oder wächst. 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 clamp()-Funktion ähnelt der calc()-Funktion, nimmt aber drei Werte an. Der mittlere Wert ist mit dem identisch, den Sie an calc() übergeben. Der Anfangswert gibt die Mindestgröße an, in diesem Fall 1 rem, damit die bevorzugte Schriftgröße des Nutzers 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 proportional zum Bildschirm des Nutzers verkleinert und vergrößert. Die Textgröße fällt jedoch nie unter 1rem oder über 2rem.

Zeilenlänge

Das Web ist nicht das Printmedium, aber wir können von der Printbranche lernen und die Erkenntnisse auf das Web übertragen.

In seinem klassischen Buch The Elements of Typographic Style (Die Elemente des typografischen Stils) äußerte sich Robert Bringhurst so zur Zeilenlänge:

Eine Zeilenlänge von 45 bis 75 Zeichen gilt allgemein als zufriedenstellend für eine Seite mit einer Spalte, die in einer Serifenschrift in einer bestimmten Textgröße gesetzt ist. Eine Zeile mit 66 Zeichen (einschließlich Buchstaben und Leerzeichen) gilt allgemein als ideal. Bei mehreren Spalten ist ein durchschnittlicher Wert von 40 bis 50 Zeichen besser.

Sie können die Zeilenlänge nicht direkt in CSS festlegen. Es gibt keine line-length-Eigenschaft. Sie können jedoch verhindern, dass Text zu breit wird, indem Sie die Breite des Containers einschränken. Das Attribut max-inline-size eignet sich dafür hervorragend.

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 Maßeinheit wie rem oder ch.

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

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

Wenn Sie ch-Einheiten für die Breite verwenden, wird bei dieser Schriftgröße bei Zeichen 66 ein neuer Zeilenumbruch eingefügt.

Zeilenhöhe

In CSS gibt es zwar keine line-length-Eigenschaft, aber eine line-height-Eigenschaft.

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 wertlose Werte. So wird sichergestellt, dass die Zeilenhöhe relativ zur font-size ist.

line-height: 24px;

line-height: 1.5;

Kombinationen und Skalierung

Denken Sie daran, bei der Erstellung Ihrer Benutzeroberflächen die Hierarchie zu priorisieren, um für mehr Klarheit und einen besseren Seitenfluss zu sorgen. Eine gute Möglichkeit dazu ist eine in Ihr Designsystem integrierte Typografieskala.

Webschriften

Eine Schriftart ist wie eine Stimme für Ihre Worte. Lange Zeit gab es im Web nur sehr wenige Schriftarten. Es gab nur Systemschriften. Jetzt können Sie jedoch einen Webfont auswählen, der zum Stil Ihrer Inhalte passt.

Mit @font-face können Sie Browsern mitteilen, wo sie Ihre Web-Schriftdateien finden. Verwenden Sie WOFF2 als Webschriftformat. Sie ist 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 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 Teil der User Experience. Eine gute Nutzererfahrung ist eine, die sich schnell anfühlt.

Schriftarten laden

Sie können festlegen, dass Browser so schnell wie möglich mit dem Herunterladen einer Schriftartdatei beginnen. Fügen Sie dem head Ihres Dokuments ein link-Element hinzu, das auf Ihre Web-Schriftdatei verweist. Ein rel-Attribut mit dem Wert preload weist den Browser an, dieser Datei eine höhere Priorität zu geben. Ein as-Attribut mit dem Wert font teilt dem Browser mit, um welche Art von Datei es sich handelt. Mit dem type-Attribut 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 angeben, auch wenn Sie die Schriftdateien selbst hosten.

Mit der CSS-Eigenschaft font-display können Sie dem Browser mitteilen, wie der Wechsel von einer Systemschriftart zu einer Webschriftart erfolgen soll. Sie können festlegen, dass bis zum Laden der Webschriftart gar kein Text angezeigt wird. Sie können die Systemschriftart sofort anzeigen und nach dem Laden zur Webschriftart wechseln. Beide Strategien haben ihre Nachteile. Wenn Sie warten, bis der Webfont 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 abrupten Wechsel der Inhalte auf der Seite kommen.

Ein guter Kompromiss besteht darin, kurz zu warten, bevor Text angezeigt wird. Wenn die Webschriftart vor Ablauf dieser Zeit geladen wird, wird der Text mit der Webschriftart ohne Inhaltsverschiebungen angezeigt. Wenn die Webschrift nach Ablauf der Zeit immer noch nicht geladen wurde, wird der Text in der Systemschrift angezeigt, damit der Nutzer die Inhalte 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 Wert fallback, wenn nach dem Rendern des Texts die Systemschriftart verwendet werden soll.

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

Variable Schriftarten

Wenn Sie viele verschiedene Schriftschnitte oder Stile derselben Schriftart verwenden, benötigen Sie möglicherweise viele separate Schriftdateien – eine für jeden Schriftschnitt oder 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 in verschiedenen Schriftschnitten oder Stilen erforderlich sind.

Das bedeutet, dass eine einzelne Datei mit variabler Schrift größer ist als eine einzelne Datei mit normaler Schrift, aber wahrscheinlich kleiner als mehrere Dateien mit normaler Schrift. Wenn Sie viele verschiedene Schriftschnitte verwenden, kann eine variable Schriftart zu einer deutlichen Leistungssteigerung führen.

Gute Typografie im Web geht nicht nur um die Schriftarten, die Sie als Designer auswählen. Bei der responsiven Typografie geht es auch darum, das Gerät und die Netzwerkverbindung des Nutzers zu berücksichtigen. Das Endergebnis ist ein Design, das unabhängig von der Ansicht gut aussieht.

Nachdem Sie responsiven Text verinnerlicht haben, ist es an der Zeit, sich mit responsiven Bildern zu beschäftigen.

Wissenstest

Ihr Wissen über Typografie testen