Typografie für Entwickler

Taimur Abdaal leitet das Design bei Retool, einer schnellen Methode zum Erstellen interner Tools. Sie arbeiten an einem neuen Designsystem für ihre Plattform, damit jeder leicht schöne benutzerdefinierte Apps erstellen kann. Typografie wird ein wichtiger Bestandteil davon sein und Taimur hat dies auf der Grundlage dieser Erfahrung geschrieben.

Sie haben vielleicht den Titel dieses Beitrags gelesen und gedacht: „Warum muss ein Entwickler überhaupt etwas über Typografie wissen?“ Ich meine, es gibt schon viel auf Ihrer Liste und Sie treffen Hunderte von Entscheidungen pro Tag. Sollten Sie React oder Vue verwenden? npm oder Yarn? ES6 oder ES7? Traurigerweise wird Typografie oft als nachträglicher Gedanke behandelt. Aber denken wir daran, dass Webdesign zu 95 % aus Typografie besteht.

95 % der Informationen im Web sind geschriebene Sprache. Es ist nur logisch zu sagen, dass ein Webdesigner eine gute Ausbildung in der Hauptdisziplin der Gestaltung schriftlicher Informationen, mit anderen Worten: Typografie, erhalten sollte.

Auch wenn wir täglich mit Inhalten zu tun haben – sei es beim Lesen, Schreiben oder Gestalten –, kann Typografie einschüchternd sein, da sie mit Fachjargon und Subjektivität gefüllt ist und in der Schule selten ausführlich gelehrt wird.

Dies soll als praktischer Leitfaden für Entwickler dienen, um Webtypografie zu lernen. Wir behandeln eine Reihe von praktischen und nützlichen Themen, wie z. B. die Auswahl und Verwendung von benutzerdefinierten Schriftarten im Web, aber wichtiger noch, wie man Text anordnet, um ein angenehmes Benutzererlebnis zu schaffen. Wir werden die Prinzipien der Typografie und die CSS-Eigenschaften, die sie steuern, sowie praktische Tipps für schnelle und gute Ergebnisse durchgehen.

Was ist Typografie?

In erster Linie geht es bei Typografie um Benutzerfreundlichkeit. Schrift ist die Benutzeroberfläche zur Vermittlung von Informationen, und die Vermittlung von Informationen ist das, wofür wir im Web da sind. Es gibt viele Stellschrauben, an denen wir drehen können, um die Lesbarkeit von Text zu beeinflussen, und nur wenn wir diese bewusst einsetzen, können wir unseren Nutzern ein angenehmes Erlebnis schaffen.

Nach (und *nur* nach) der Benutzerfreundlichkeit geht es bei Typografie um Emotionen. Ergänzen sich die Buchstaben mit Ihrem Inhalt oder widersprechen sie ihm? Verstärken sie die Persönlichkeit Ihrer Marke oder dämpfen sie sie? Auf denselben Text angewendet, werden unterschiedliche Schriften unterschiedliche Gefühle hervorrufen. Bewusstes Arbeiten mit Typografie ermöglicht es uns, diese Gefühle zu kontrollieren.

Entgegen dem, was viele Freunde des Goldenen Schnitts Ihnen vielleicht erzählen wollen, ist Typografie keine exakte Wissenschaft. Gute Richtlinien bringen Sie schon weit, aber Sie müssen auch ein wenig Intuition einsetzen. Glücklicherweise lesen Sie schon Ihr ganzes Leben lang Texte – Bücher, Zeitschriften, das Internet –, sodass Sie mehr ungenutzte Intuition haben, als Sie denken!

Was steckt in einer Schrift?

Lassen Sie uns zunächst einige grundlegende Begriffe klären und wie Schriften kategorisiert werden.

Schriftfamilie vs. Schriftart

So wurden die beiden traditionell definiert und voneinander unterschieden.

• Schriftfamilie: Das Design einer Sammlung von Glyphen (z. B. Buchstaben, Zahlen, Symbole).
• Schriftart: Eine bestimmte Größe, Dicke oder ein bestimmter Stil einer Schriftfamilie (z. B. Regular, Bold, Italic).

Im Grunde ist eine Schriftfamilie wie ein Lied und eine Schriftart wie seine MP3-Datei. Sie werden beide Begriffe in der typografischen Literatur sehen, daher ist es gut, den Unterschied zu kennen. „Font vs. Typeface“ ist auch ein kleines Meme in der Design-Community – Sie könnten es auf Twitter sehen, daher hilft es, „im Bilde“ zu sein.

WIE MAN IN GRAFIKDESIGN GROSS WIRD
– SCHRIFTART AUSWÄHLEN
– „DAS IST EINE SCHRIFTFAMILIE, KEINE SCHRIFTART“
– WÄHLEN SIE EINE VERDAMMTE SCHRIFTFAMILIE
– SIE HABEN DIE FALSCHE WAHL GETROFFEN

— Deena (@itsDeenasaur) 2. November 2014

Ich habe vielleicht „Schriftart“ und „Schriftfamilie“ in dieser Geschichte austauschbar verwendet. Bitte senden Sie alle Beschwerden an [email protected]. https://#/IuHHmlaNAT

— Tristin Hopper (@TristinHopper) 14. Januar 2019

Aber in jüngerer Zeit können Sie beide Begriffe im Wesentlichen austauschbar verwenden und die Leute werden wissen, was Sie meinen.

Wie Schriften kategorisiert werden

Die breiteste Unterteilung erfolgt zwischen *Serif* und *Sans-Serif*-Schriftfamilien. Wahrscheinlich sind Ihnen diese Begriffe bereits begegnet, wenn Sie Schriftfamiliennamen gesehen haben (wie z. B. *Comic Sans*).

Ein „Serif“ ist ein kleiner Strich am Ende von Buchstaben, der ihnen ein traditionelles Gefühl verleiht. Tatsächlich werden die meisten Bücher und Zeitungen in Serifenschriften gesetzt. Sans-Serif-Schriften hingegen haben keine dieser zusätzlichen Striche und vermitteln ein glattes, modernes Gefühl.

Sowohl Serif als auch Sans-Serif haben Unterkategorien. Zum Beispiel hat Serif Unterkategorien wie *Didone*, *Slab* und *Old Style*.

Bei Sans-Serif gibt es Unterkategorien wie *Humanist*, *Geometric* und *Grotesk*.

*Monospace*-Schriften (ja, Schriften) sind eine bemerkenswerte Kategorie für sich. Jede Glyphe (d. h. Buchstabe/Zahl/Symbol) in einer Monospace-Schrift hat die gleiche Breite (daher die *Monospace*-Terminologie), sodass sie zu visuellen Strukturen angeordnet werden können. Sie sind Ihnen vielleicht gut bekannt, da wir sie häufig beim Schreiben von Code sehen, wo sie helfen, Klammern und Einrückungen visuell auszurichten. Der Code-Editor, den Sie gerade geöffnet haben, verwendet wahrscheinlich Monospace.

Wie man Schriftarten und Schriftkombinationen wählt

Das ist subjektiv und hängt davon ab, was Sie tun möchten. Jede Schriftfamilie hat ihre eigene Persönlichkeit, daher müssen Sie eine finden, die zu Ihrer Marke oder dem Inhalt passt, den sie vermittelt. Schriftfamilien müssen im Kontext ihrer Anwendung betrachtet werden. Suchen wir nach Formalität? Vielleicht beginnen Sie mit der Serif-Familie. Warm, lustig und freundlich? Das könnte ein Hinweis auf Sans-Serif sein. Hey, es gibt einen Zeitpunkt und einen Ort sogar für Comic Sans… wirklich! Wissen Sie einfach, dass es keine harte Wissenschaft bei der Auswahl einer Schriftart gibt, und selbst die am besten ausgebildeten Typografen berücksichtigen kontextbezogene Hinweise, um die „richtige“ zu finden.

Aber Schriftarten können in demselben Design kombiniert werden. Zum Beispiel verwenden einige Designs eine Schriftfamilie für Überschriften und eine andere für den Fließtext. Dies ist eine gute Möglichkeit, einen einzigartigen Look zu erzielen, erfordert aber einiges an Arbeit, um ihn richtig zu machen. Wie Farben in einer Palette passen manche Schriftarten gut zusammen, während andere kollidieren. Und selbst gewolltes Kollidieren kann Sinn ergeben, wieder, je nach Kontext.

Der einzige Weg, um herauszufinden, ob zwei Schriftarten gut zusammenpassen, ist, sie zusammen zu sehen. Tools wie FontPair und TypeConnection können dabei helfen. Wenn Ihnen eine Schriftart beim Surfen im Internet ins Auge fällt, ist WhatFont eine großartige Browsererweiterung, um sie zu identifizieren. Eine weitere großartige Ressource ist Typewolf, das Ihnen Beispiele für großartige Webtypografie zeigt, einschließlich verschiedener verwendeter Schriftkombinationen.

Während bei der Auswahl von Schriftarten viel Subjektivität im Spiel ist, gibt es einige objektive Überlegungen.

Schriftstärke als Überlegung

Manche Schriftfamilien haben eine große Bandbreite an Schriftschnitten – Light, Book, Regular, Medium, Semi-Bold, Bold, Black – während andere nur wenige haben.

Wenn Sie eine komplexe Web-App-Benutzeroberfläche erstellen, benötigen Sie möglicherweise eine Reihe von Schriftschnitten, um in verschiedenen Kontexten Hierarchien zu schaffen. Für etwas weniger Komplexes, sagen wir einen Blog, sind wahrscheinlich nur ein paar ausreichend.

Variable Fonts sind eine spannende neue Technologie, die präzise Kontrolle über die Eigenschaften einer Schrift bietet. Für Schriftschnitte bedeutet dies, dass es keine Einschränkungen mehr gibt, nur „Light“, „Regular“ und „Bold“ zu verwenden, sondern tatsächlich jedes Gewicht dazwischen. Probieren Sie hier einige variable Schriften aus und lesen Sie auch Ollie Williams' Beitrag.

Es ist noch früh – es gibt noch nicht viele variable Schriften und die Browserunterstützung ist begrenzt. Aber definitiv ein Bereich, den man im Auge behalten sollte!

Berücksichtigen Sie die Lesbarkeit einer Schriftart

Manche Schriftarten sind schwerer zu lesen als andere. Vermeiden Sie für Absätze ausgefallene Schriften. Wenn Sie *unbedingt* winzige Texte irgendwo haben müssen, stellen Sie sicher, dass die Schriftart bei diesen winzigen Größen gut lesbar ist.

Welches der beiden Beispiele ist für die Augen angenehmer? (Es gibt hier eine richtige Antwort. :))

Siehe den Stift
Font Comparison: Body von Geoff Graham (@geoffgraham)
auf CodePen.

Denken Sie daran, dass Schriften in einer Vielzahl von Stilen erhältlich sind

Das Fettdrucken einer Schriftart ist nicht so einfach wie das Hinzufügen einer Umrandung zum Text, und Kursivschrift sind mehr als nur schräg gestellte Buchstaben. Gute Schriften haben spezifische fette und kursive Stile, ohne die der Browser versucht, sie zu „fälschen“.

Diese gefälschten Stile tendieren dazu, die Lesbarkeit zu verringern und den visuellen Zusammenhalt des Textes zu stören, da der Browser mit den gegebenen Mitteln nur begrenzt viel tun kann. Halten Sie sich an Schriften , die echte fette/kursive Stile bieten, wenn Sie können.

Andere Dinge, die es wert sind, berücksichtigt zu werden

Was wir bisher betrachtet haben, sind die übergeordneten Merkmale und Eigenschaften von Schriften, die uns bei der Entscheidung helfen können, welche wir für ein bestimmtes Design oder einen bestimmten Kontext wählen. Es gibt viele andere Dinge, die (und wahrscheinlich auch) berücksichtigt werden sollten, einschließlich

• Sprachunterstützung: Manche Schriften haben Glyphen für fremde Zeichen, was für ein Projekt, das sich an ein mehrsprachiges Publikum richtet oder mehrsprachige Inhalte enthält, eine Anforderung sein kann.
• Ligaturen: Manche Schriften (typischerweise Serifen) haben Glyphen, um ansonsten unbeholfen aussehende Zeichen zu ersetzen, wie ffi und ffl, die mehrere Zeichen in einer einzigen Glyphe sind.
• Dateigröße: Sie sind Entwickler, daher weiß ich, dass Ihnen die Leistung am Herzen liegt. Manche Schriften haben größere Dateien als andere und diese können die Ladezeiten einer Website beeinträchtigen.

Verwendung von Schriftarten im World Wide Web

Vor nur 10 Jahren gab es zwei komplexe Möglichkeiten, benutzerdefinierte Schriften im Web zu verwenden.

• SiFR: Einbettung eines Flash-Widgets (erinnern Sie sich an das Ding?) zum Rendern von Text.
• cufon: Konvertierung der Schriftart in ein proprietäres Format und Verwendung einer spezifischen JavaScript-Rendering-Engine zur Erzeugung des Textes mittels VML auf einem HTML-<canvas>.

Heute brauchen wir nur noch eine einzige, einfache Methode: @font-face. Sie ermöglicht es Ihnen, eine URL zu einer Schriftdatei anzugeben, die der Browser dann herunterlädt und auf Ihrer Website verwendet.

Sie können die @font-face-Deklaration verwenden, um Ihre benutzerdefinierte Schriftart zu definieren.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Und sie dann wie gewohnt über das Attribut font-family referenzieren.

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Obwohl @font-face den alten Ansätzen für benutzerdefinierte Web-Schriftarten um Lichtjahre voraus ist, gibt es einiges zu beachten, wenn es um die Browserunterstützung geht. Hier ist ein Leitfaden, um die richtige Cross-Browser-Unterstützung zu erhalten.

Die Auswirkung von Schriftarten auf die Leistung

Leistung ist der einzige Nachteil der Verwendung benutzerdefinierter Schriften im Web. Schriftarten sind relativ große Assets – oft Hunderte von Kilobyte groß – und beeinträchtigen die Geschwindigkeit jeder Website nachteilig.

Hier sind einige Tipps, um den Schlag abzumildern:

• Verwenden Sie GZIP-Komprimierung für Ihre Web-Schriftdateien.
• Deaktivieren Sie nicht benötigte Schriftartenfunktionen, z. B. Hinting, Kerning.
• Entfernen Sie nicht benötigte Glyphen, z. B. fremdsprachige Zeichen.

Ein Werkzeug, das helfen kann, eine Schriftdatei an Ihre Bedürfnisse anzupassen, ist Transfonter. Stellen Sie einfach sicher, dass Sie die Rechte an jeder Schrift haben, die Sie auf Ihrer Website verwenden möchten, denn das ist einfach das Richtige.

Einige Dienste hosten Web-Schriften für Sie

Eine weitere signifikante Möglichkeit, etwas Gewicht bei der Verwendung benutzerdefinierter Web-Schriften abzubauen, ist die Nutzung eines Dienstes, der sie für Sie hostet und bereitstellt. Der Vorteil hierbei ist, dass Drittanbieter die Dateien auf einem schnellen CDN speichern, sie optimieren und über ein JavaScript-Snippet, das in den Dokumentenkopf eingefügt wird, an Ihre Website liefern. Kurz gesagt: Es nimmt Ihnen viel Mühe ab.

Wie einfach ist die Nutzung eines gehosteten Dienstes? Bedenken Sie, dass die Verwendung von Google Fonts nur ein einziges <link> im HTML-Kopf erfordert.

<html>
  <head>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>

<!-- Rest of the document -->

Dieses Beispiel stammt von Google Fonts – dem beliebtesten gehosteten Schriftendienst. Die Nutzung ist kostenlos und zum Zeitpunkt der Erstellung hat es einen Katalog von 915 Schriftfamilien. Die Qualität dieser kann schwanken. Manche sind wirklich erstklassig – schönes Design, viele Schnitte, echte fette/kursive Stile und erweiterte Funktionen wie Ligaturen. Andere, typischerweise die neueren Designs, sind spartanisch und möglicherweise nicht für ernsthafte Projekte mit sich entwickelnden Bedürfnissen geeignet.

Adobe Fonts ist ebenfalls sehr beliebt. Es ist in Adobes Creative Cloud-Angebot enthalten, das ab 20,99 USD pro Monat beginnt. Zum Zeitpunkt der Erstellung hat es einen Katalog von 1.636 Schriftfamilien. Dies sind typischerweise hochwertige Schriften, für die man bezahlen müsste, aber mit Adobe Fonts kann man sie alle in einem Netflix-All-you-can-eat-Modell nutzen.

Hier sind einige andere Optionen:

• Adobe Edge Web Fonts: Dies ist die kostenlose Version von Adobe Fonts. Adobe hat sich mit Google zusammengetan, daher gibt es viele Überschneidungen mit der Google Fonts-Bibliothek. Insgesamt gibt es 503 Schriftfamilien.
• Fontspring: Dies ist eine riesige Bibliothek mit über 14.000 Schriftfamilien, jedoch mit einem individuellen Lizenzierungsmodell. Das bedeutet, dass man mehr im Voraus bezahlt, beginnend bei ca. 20 USD pro einzelner Schriftart (und pro Schnitt oder Stil), aber keine wiederkehrenden Kosten. Es ist auch Self-Service – Sie müssen die Dateien selbst hosten.
• MyFonts by Monotype: Dies ist ein wichtiger Schriftgestaltung-Verlag. Ähnlich wie Fontspring: Riesige Bibliothek von Schriftfamilien mit einem individuellen Lizenzierungsmodell.
• Fonts.com: Dies ist ähnlich wie Fontspring. Optionen für Einmalzahlungen oder Pay-as-you-go-Preise (basierend auf Seitenaufrufen).
• Cloud.typography by Hoefler&Co: Dies ist ein wichtiger Schriftgestaltung-Verlag. Über 1.000 Schriftfamilien (alle von Hoefler&Co), mit Optionen für gehostete (Abonnement, ab 99 USD pro Jahr) oder selbst gehostete (individuell lizenzierte) Web-Schriftarten. Der Vorteil hier ist, dass Sie Zugriff auf eine Bibliothek von Schriften erhalten, die Sie nirgendwo anders finden.
• Fontstand: Dieser Dienst ermöglicht es Ihnen, einzelne Schriftarten günstig monatlich zu „mieten“ (ab ca. 10 USD pro Monat), die Sie nach 12 Monaten automatisch besitzen. Bis heute bietet er 1.500 Familien mit einem gehosteten Web-Schriftendienst.

CSS und Typografie

Okay, kommen wir zur Schnittstelle von Design und Entwicklung. Wir haben viele grundlegende Begriffe und Konzepte der Typografie behandelt, aber jetzt können wir uns den Möglichkeiten widmen, mit denen wir Typografie manipulieren und gestalten können, insbesondere mit CSS.

Schriftgrößen anpassen

Die Änderung der Schriftgröße ist etwas, das in einem typischen Projekt zwangsläufig vorkommt. Die Größe ist wichtig, da sie Hierarchien schafft und den Benutzer implizit durch die Seite führt. In diesem Abschnitt werden wir uns zwei CSS-Funktionen ansehen, die uns zur Verfügung stehen, um Schriftgrößen anzupassen und bessere Inhaltshierarchien zu erstellen.

Größen können in verschiedenen Maßeinheiten ausgedrückt werden

Wussten Sie, dass es in CSS 15 verschiedene Einheiten für die Größenbestimmung gibt? Verrückt, oder? Die meisten von uns sind wahrscheinlich mit Pixeln (px) vertraut und arbeiten damit, aber es gibt so viele andere Möglichkeiten, die Größe einer Schriftart zu definieren.

Einige davon sind *relative* Einheiten, andere sind *absolute*. Die tatsächliche Größe eines Elements, das in relativen Einheiten ausgedrückt wird, hängt von anderen Teilen der Seite ab, während die tatsächliche Größe eines Elements, das in absoluten Einheiten ausgedrückt wird, immer gleich ist. Und wie Sie vielleicht erwarten, ist dieser Unterschied wichtig, da sie je nach den Bedürfnissen eines Designs unterschiedliche Funktionen erfüllen.

Von den 15 verfügbaren Einheiten werden wir uns selektiv zwei genauer ansehen: px und em. Nicht nur, dass dies wahrscheinlich die beiden am häufigsten verwendeten Einheiten sind, die zur Definition von Schriftgrößen verwendet werden, sondern sie veranschaulichen auch perfekt den Unterschied zwischen absoluter und relativer Skalierung.

Zunächst einmal ist px eine absolute Einheit und hat eigentlich nicht viel mit Pixeln zu tun (sie gilt als Winkelmessung), aber sie ist so definiert, dass eine Linie der Breite 1px scharf und sichtbar erscheint, unabhängig von der Bildschirmauflösung. Der px-Wert entspricht ungefähr dem Abstand von der höchsten Oberlänge (z. B. der Oberseite des Buchstabens A) bis zur tiefsten Unterlänge (z. B. der Unterseite des Buchstabens p) in der Schrift. Manche Schriften haben höhere Buchstaben als andere, daher kann 16px in einer Schrift merklich „größer“ aussehen als 16px in einer anderen. Noch eine weitere Überlegung, die bei der Wahl einer Schriftart zu berücksichtigen ist!

Interessanterweise ist px bei Typografie eine Einheit, die verstanden, aber nicht verwendet werden sollte. Der wahre Zweck von px-Einheiten ist es, die Grundlage für ein Typensystem auf Basis von relativen Einheiten zu bilden. Mit anderen Worten, es ist ein absoluter Wert, auf den eine relative Einheit verweisen kann, um ihre eigene Größe relativ zu diesem Wert zu definieren.

Was uns zu em führt, einer relativen Einheit. Text mit einer Schriftgröße von 2em wäre doppelt so groß wie die font-size seines übergeordneten Elements. Jedes Gerät hat seine eigene Standard-font-size für das body-Element. Zum Beispiel haben Desktop-Browser normalerweise standardmäßig 16px. Andere Geräte (z. B. Mobiltelefone und Fernseher) können unterschiedliche Standardwerte haben, die für ihre Formfaktoren optimiert sind.

em ermöglicht es Ihnen, Ihre Typografie intuitiv zu durchdenken: „Ich möchte, dass dieser Titel doppelt so groß wie der Absatztext ist“ entspricht direkt 2em. Er ist auch leicht zu pflegen – wenn Sie eine Media Query benötigen, um auf Mobilgeräten alles größer zu machen, ist es einfach, ein font-size-Attribut zu erhöhen. Die Arbeit mit em-Einheiten ermöglicht es Ihnen auch, andere typografische Elemente relativ zur font-size festzulegen, wie wir später sehen werden.

Es gibt semantische HTML-Elemente, auf die CSS abzielen kann, um die Größe anzupassen

Sie sind vom em überzeugt, aber wie viele em-Einheiten sollte jedes Element haben? Sie möchten eine Reihe von Textgrößen haben, um Hierarchien zwischen verschiedenen Elementen Ihrer Seite zu schaffen. Häufiger als nicht sehen Sie Hierarchien, die sechs Ebenen tief sind, was den HTML-Überschriftenelementen h1 bis h6 entspricht.

Die richtige Skalierung der Größe hängt vom Anwendungsfall ab. Als Richtlinie wählen viele Menschen eine *modulare Skala*. Das bezieht sich auf eine Skala, die auf einem konstanten Verhältnis für aufeinanderfolgende Textelemente in der Hierarchie basiert.

Modular Scales ist ein Werkzeug von Tim Brown, der diesen Ansatz popularisiert hat und es einfach macht, verschiedene Größenskalen zu visualisieren.

Vertikaler Abstand und Ausrichtung einer Schriftart anpassen

Die physische Größe einer Schriftart ist eine sehr gängige Methode, mit der wir CSS verwenden, um eine Schriftart zu gestalten, aber der vertikale Abstand ist eine weitere unglaublich mächtige Methode, mit der CSS die Lesbarkeit von Inhalten verbessern kann.

Zeilenhöhe verwenden, um die Höhe einer Textzeile festzulegen

Die Zeilenhöhe ist einer der wichtigsten Faktoren, die die Lesbarkeit beeinflussen. Sie wird durch die CSS-Eigenschaft line-height gesteuert, die am besten als eine dimensionslose Zahl ausgedrückt wird, die ein Vielfaches der definierten Schriftgröße darstellt.

Nehmen wir an, wir arbeiten mit einer berechneten Schriftgröße von 16px (in CSS natürlich als em-Einheiten angegeben). Eine line-height von 1,2 würde jede Zeile 19,2px hoch machen. (Denken Sie daran, dass px nicht wirklich Pixel sind, daher sind Dezimalzahlen gültig!)

Die meisten Browser verwenden standardmäßig eine line-height von 1,2, aber das Problem ist, dass dies normalerweise zu eng ist. Wahrscheinlich möchten Sie etwas näher an 1,5, da dies Ihren Augen beim Lesen etwas mehr Freiraum bietet.

Hier sind einige allgemeine Richtlinien zur Festlegung einer guten Zeilenhöhe

• Erhöhen Sie die line-height für fette Schriftarten
• Erhöhen Sie die line-height, wenn Schriftarten eine dunkle Farbe haben
• Erhöhen Sie die line-height für Langform-Inhalte

Schriften können nicht tanzen, aber sie haben immer noch Rhythmus

Rhythmus beschreibt, wie Text vertikal auf einer Seite fließt. Ähnlich wie in der Musik führt eine gewisse Konsistenz und Struktur normalerweise zu einem guten „Rhythmus“. Wie die meisten Desigentechniken ist Rhythmus keine exakte Wissenschaft, aber es gibt einige sinnvolle Richtlinien, die gute Ergebnisse liefern.

Eine Denkschule schreibt die Verwendung der Zeilenhöhe von Absätzen als Basiseinheit vor, von der alle anderen Abstände abgeleitet werden. Dies umfasst Lücken zwischen Absätzen und Überschriften sowie Polsterungen zwischen dem Text und anderen Seitenelementen.

Nach diesem System könnten Sie die Zeilenhöhe einer Überschrift auf das Doppelte der Zeilenhöhe von Absätzen einstellen und eine einzeilige Lücke zwischen einer Überschrift und einem Absatz lassen. Praktischerweise können Sie dieselben em-Einheiten verwenden, um Ränder und Abstände zu definieren, sodass nichts hartcodiert werden muss.

Lesen Sie hier mehr über Rhythmus.

Horizontale Form

Hoffentlich sind Sie inzwischen davon überzeugt, dass vertikale Abstände ein wichtiger Faktor für die Verbesserung der Lesbarkeit sind, den wir in CSS steuern können. Ebenso wichtig sind die horizontalen Abstände einzelner Zeichen und die Gesamtbreite des Inhalts.

CSS kann den Abstand zwischen Buchstaben steuern

Der Buchstabenabstand ist einer der wichtigsten Faktoren, die die Lesbarkeit beeinflussen. Er wird durch die CSS-Eigenschaft letter-spacing gesteuert, die (wiederum) am besten in em-Einheiten ausgedrückt wird, um alles relativ zu halten. Das Tracking (der typografische Begriff für „Buchstabenabstand“) hängt vollständig von der Schriftart ab – einige Schriftarten sehen standardmäßig gut aus, während andere möglicherweise eine kleine Anpassung erfordern.

Im Allgemeinen müssen Sie sich nur um den Buchstabenabstand für Textelemente kümmern, die besonders groß oder klein sind, da die meisten Schriftarten bei einer typischen Absatzgröße gut beabstandet sind.

Bei größeren Texten, wie Überschriften und Titeln, möchten Sie oft den Abstand zwischen den Buchstaben verringern. Und ein kleiner Abstand macht schon viel aus. Zum Beispiel ist -0,02em eine winzige Dezimalzahl, aber ein guter Ausgangspunkt, der angepasst werden kann, bis er für Ihr Auge genau richtig aussieht. Die einzige Zeit, in der Sie über eine Erhöhung des Buchstabenabstands nachdenken sollten, ist bei stilistisch ungewöhnlichen Texten – Dinge wie Titel in Großbuchstaben und sogar einige Zahlenreihen.

Einige spezifische Buchstabenpaare, wie AV, können ohne kleine manuelle Anpassung ungeschickt beabstandet aussehen. Gut gestaltete Schriftarten geben für solche Paare normalerweise einen benutzerdefinierten Abstand an, und die Einstellung der Eigenschaft font-kerning auf normal ermöglicht Ihnen, dies zu aktivieren. Browser deaktivieren dies standardmäßig bei kleineren Texten. Hier finden Sie etwas mehr über Buchstabenabstand sowie andere CSS-Tools, die uns zur Verfügung stehen, um den Schriftabstand im Allgemeinen zu steuern.

Die Länge einer Textzeile ist wichtiger, als Sie vielleicht denken

Für unsere Augen ist es unangenehm, beim Lesen lange Distanzen zurücklegen zu müssen, daher sollte die Breite von Zeilen bewusst gewählt werden. Der allgemeine Konsens ist, dass eine gute Breite zwischen 60 und 70 Zeichen pro Zeile liegt. Wenn Sie feststellen, dass eine Textzeile (insbesondere für Langform-Inhalte) drastisch außerhalb dieses Bereichs liegt, dann beginnen Sie mit Anpassungen.

Die ch ist eine wenig bekannte CSS-Einheit, die wir zuvor nicht behandelt haben, die aber hilfreich sein kann, um die Zeilenlänge im Auge zu behalten. Es ist eine relative Einheit, definiert als die Breite des Zeichens 0 in der Schrift des Elements. Da schmale Zeichen wie l und i relativ häufig vorkommen, sollte die Einstellung der Breite eines Textcontainers auf etwas wie 50ch zu Zeilen mit einer Länge von 60-70 Zeichen führen.

p {
  width: 50ch;
}

CSS kann sonst knusprige Schriftarten glätten

-webkit-font-smoothing ist eine nette CSS-Eigenschaft, die steuert, wie Schriftarten geglättet werden (Anti-Aliasing). Dies ist eine fancy Art zu sagen, dass sie Graustufen um sonst quadratische Pixel zeichnen kann, um ein glatteres Erscheinungsbild zu erzeugen. Beachten Sie jedoch das -webkit-Präfix, da dies anzeigt, dass die Eigenschaft nur von WebKit-Browsern, z. B. Safari, unterstützt wird.

Die Standardeinstellung ist subpixel-antialiased, aber es lohnt sich zu sehen, wie Ihr Text aussieht, wenn er auf antialiased eingestellt ist. Dies kann das Aussehen vieler Schriftarten verbessern, insbesondere bei Text auf nicht-weißen Hintergründen.

Bei kleinen Schriftgrößen sollte dies mit Vorsicht verwendet werden – es reduziert den Kontrast und beeinträchtigt die Lesbarkeit. Sie sollten auch sicherstellen, dass Sie letter-spacing anpassen, wenn Sie dies verwenden, da eine stärkere Glättung den Abstand zwischen den Buchstaben erhöht.

Zusammenfassung

Puh! Wir haben in relativ kurzer Zeit *viel* Stoff behandelt. Dennoch ist dies keineswegs ein erschöpfender Leitfaden, sondern eher etwas, das Sie hoffentlich dazu ermutigt, mehr Kontrolle über die Typografie in Ihren zukünftigen Projekten zu übernehmen und ein noch tieferes Wissen zu diesem Thema zu erlangen. Dafür habe ich eine Liste zusätzlicher Ressourcen zusammengestellt, die Ihnen helfen, von hier aus weiterzukommen.

---

Typografie lernen

• The Elements of Typographic Style Applied to the Web
• Butterick’s Practical Typography
• Better Web Type

Typografie-Inspiration

• Typewolf
• Fonts in Use
• Awwwards

Schriftarten identifizieren

WhatFont

Identifont

WhatTheFont

Typografie in CSS

• CSS Referenz
• CSS-Tricks Guide to Typography