Typografie

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

Wenn Sie keine Zeilenlänge angeben, werden die Textzeilen im Browser am Bildschirmrand umgebrochen. Daher ist Text im Web standardmäßig responsiv, sodass er sich an den Darstellungsbereich des Nutzers anpasst.

Nur weil der Text auf den Bildschirm passt, bedeutet das nicht, dass er angenehm zu lesen ist. Bei einer guten Typografie geht es darum, Ihren Text angemessen zu präsentieren. Die Typografie ist wichtiger als die Auswahl geeigneter Schriftarten. Sie müssen die Präferenzen der Nutzenden, die Größe des Textes, die Zeilenlänge und den Abstand zwischen den Textzeilen berücksichtigen.

Textgröße

Es ist schwierig, die Größe von Text im Web zu bestimmen.

Wenn jemand ein kleines Display verwendet, ist es mit Sicherheit so, dass das Display nah an den Augen – nur eine Handlänge entfernt ist – zu sehen ist.

Aber je größer die Bildschirme werden, desto schwieriger wird es, eine Verbindung herzustellen. Ein Bildschirm in Laptop-Größe ist wahrscheinlich ziemlich nah am Betrachter, während ein Breitbild-Desktop-Monitor etwa die gleiche Größe wie ein Fernsehbildschirm hat. Die Menschen sitzen eine Armlänge von einem Desktop-Bildschirm entfernt, aber viel weiter von einem 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 Schriftgrößen für kleinere Bildschirme und größere Schriftgrößen für größere Bildschirme.

Sie können Medienabfragen verwenden, um die font-size-Eigenschaft zu ä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

Der Wechsel zwischen festen Textgrößen an bestimmten Haltepunkten ist recht mühsam. Bei einem reaktionsschnelleren Ansatz kann die Breite des Geräts des Nutzers die Textgröße beeinflussen.

Der vw-Anzeigenblock in CSS steht für „Breite des Darstellungsbereichs“. Wenn Sie Schriftgrößen mit der Breite des Darstellungsbereichs verknüpfen, wird der Text proportional zur Breite des Browsers vergrößert bzw. verkleinert. Das macht es schwierig, die Textgröße bei einer bestimmten Breite vorherzusagen, Sie wissen jedoch, dass die Textgröße für die Browserbreite des Nutzers geeignet ist.

Wichtig ist, dass das vw-Objekt nicht alleine in einer Deklaration der Schriftgröße verwendet wird.

html {
  font-size: 2.5vw;
}

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

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

Lassen Sie den Browser die Berechnungen durchführen. Das macht es schwierig, die genaue Textgröße bei einer bestimmten Breite vorherzusagen, aber Sie wissen, dass der Text im richtigen Bereich liegt. Der Browser des Nutzers ermittelt die genaue Textgrößenberechnung.

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

Text wird angepasst

Sie sollten nicht wollen, dass der Text extrem verkleinert und zu extrem wird. Mit der CSS-Funktion clamp() können Sie steuern, wo die Skalierung beginnt und endet. Dadurch wird die Skalierung an einen bestimmten Bereich „gebunden“.

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

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

Jetzt schrumpft und wächst die Textgröße proportional zum Bildschirm des Nutzers, aber die Textgröße wird nie unter 1rem oder über 2rem liegen.

Zeilenlänge

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

In seinem Klassiker The Elements of Typographic Style spricht Robert Bringhurst über die Zeilenlänge bzw. das Maß:

Alles zwischen 45 und 75 Zeichen wird allgemein als ausreichend betrachtet, wenn es sich um eine einspaltige Seite mit einem Gesicht mit Serifen und einer Textgröße handelt. Die 66-stellige Zeile (einschließlich Buchstaben und Leerzeichen) wird weithin als ideal angesehen. Bei der Arbeit mit mehreren Spalten ist ein besserer Durchschnitt zwischen 40 und 50 Zeichen empfehlenswert.

Die Zeilenlänge kann nicht direkt in CSS festgelegt werden. 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änge nicht mit einer festen Einheit wie px fest. Nutzer können die Schriftgröße nach oben oder unten skalieren. Die Zeilenlänge sollte sich entsprechend anpassen. Verwenden Sie eine relative Einheit wie rem oder ch.

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

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

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

Zeilenhöhe

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

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

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

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

line-height: 24px;

line-height: 1.5;

Kombinationen und Skala

Denken Sie daran, beim Erstellen Ihrer Benutzeroberflächen die Hierarchie zu priorisieren, um eine bessere Übersichtlichkeit und einen besseren Seitenfluss zu gewährleisten. Eine gute Möglichkeit dazu ist die Verwendung einer Typografieskala, die in Ihr Designsystem integriert ist.

Web-Schriftarten

Ein Schriftbild ist wie eine Stimme für Ihre Worte. Am längsten im Web gab es nur sehr wenige Schriftarten. Systemschriftarten waren die einzigen Optionen. Jetzt kannst du aber auch eine Webschriftart auswählen, die zu deinem Inhalt passt.

Mit @font-face teilen Sie dem Browser mit, wo Ihre Webschriftartendateien zu finden sind. Verwende WOFF2 als Webschriftartformat. Sie 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 könnte jedoch die Nutzererfahrung beeinträchtigen, da die Seitenladezeit länger wird. Denken Sie daran: Beim Design geht es nicht nur darum, wie die endgültigen Pixel aussehen. Wie schnell diese Pixel gezeichnet werden, ist ein entscheidender Teil der User Experience. Eine schnelle Nutzererfahrung ist für den Nutzer sehr wichtig.

Schriftart wird geladen

Sie können festlegen, dass Browser so bald 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 type-Attribut können Sie noch genauere Angaben machen.

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

Das Attribut crossorigin muss auch dann angegeben werden, 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 erfolgen soll. Sie können festlegen, dass überhaupt kein Text angezeigt wird, bis die Webschriftart geladen ist. Sie können die Systemschriftart sofort anzeigen und dann zur Webschriftart wechseln, sobald diese geladen ist. Beide Strategien haben Nachteile. Wenn Sie Text erst sehen, nachdem die Webschriftart heruntergeladen wurde, kann es sein, dass die Nutzenden frustrierend lange auf eine leere Seite starren. Wenn Sie den Text zuerst in einer Systemschrift anzeigen und dann zur Webschriftart wechseln, kann es zu einer irritierenden Verschiebung des Inhalts auf der Seite kommen.

Ein guter Kompromiss besteht darin, eine Weile zu warten, bevor Text angezeigt wird. Wenn die Webschriftart geladen wird, bevor diese Zeit abgelaufen ist, wird der Text in dieser ohne Inhaltsverschiebung angezeigt. Wenn die Web-Schriftart nach Ablauf der Zeit immer noch nicht geladen wurde, wird der Text in der Systemschriftart angezeigt, sodass der Nutzer den Inhalt zumindest lesen kann.

Verwenden Sie für font-display den Wert swap, wenn die Systemschriftart beim letzten Laden der Webschriftart durch die Webschriftart ersetzt werden soll.

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

Verwenden Sie für font-display den Wert fallback, wenn Sie die Systemschriftart beibehalten möchten, nachdem der Text gerendert wurde.

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

Variable Schriftarten

Wenn Sie viele verschiedene Schriftstärken oder Stile desselben Schriftbilds verwenden, kann es sein, dass Sie 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. Anstatt separate Dateien für reguläre, Fett, Extrafett usw. zu haben, ist eine Datei mit variabler Schriftart responsiv. Sie enthält alle Informationen, die für die Darstellung in unterschiedlichen Stärken oder Stilen erforderlich sind.

Das bedeutet, dass eine einzelne Schriftartdatei mit einer einzelnen Variablen größer ist als eine einzelne reguläre Schriftartdatei, eine Datei mit einer einzelnen Variablen ist jedoch wahrscheinlich kleiner als mehrere reguläre Schriftartdateien. Wenn Sie viele verschiedene Schriftstärken verwenden, kann eine variable Schriftart zu einer erheblichen Leistungssteigerung führen.

Gute Typografie im Web bezieht sich nicht nur auf die Schriftauswahl, die Sie als Designschaffende 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 immer gut anfühlt, ganz gleich, wie es wahrgenommen wird.

Sie haben sich nun mit responsiven Texten vertraut gemacht. Als Nächstes werfen wir einen näheren Blick auf responsive Bilder.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Typografie