Typografie
Typografie ist vor allem Zurückhaltung: eine sinnvolle Skala, komfortable Abstände, ausreichender Kontrast. Ein Label, eine Tabellenzelle, eine Marketing-Überschrift und ein Artikelabsatz teilen sich nicht einen Satz von Regeln.
Überprüfe die gerenderte Seite, anstatt den Code zu scannen. Schlechter Zeilenumbruch, Hurenkinder und Textabschneidung zeigen sich erst bei realen Textlängen.
Schreibe jede Korrektur im Styling-System des Projekts und verwende die genauen Werte unten, anstatt ähnlich aussehende Äquivalente. Das Spickzettel bildet jede Deklaration auf ihr Tailwind-Äquivalent ab.
Die Wörter selbst gehören zu hr-better-writing. Die semantische Überschriftenstruktur gehört zu hr-better-accessibility. Das räumliche RTL-Layout und die logischen Eigenschaften gehören zu hr-better-layout. Die Kontrastmessung gehört zu hr-better-colors. Diese Definition besitzt die Kontrolle darüber, wie Text in gemischt-gerichteten Inhalten dargestellt, umbrochen und verarbeitet wird.
Lieferung des richtigen Formats
Verwende .woff2 im Web, wegen Brotli-Kompression und breiter Unterstützung. .woff ist ein Fallback für sehr alte Browser. .ttf und .otf sind Desktop-Formate ohne Web-Kompression. Wie die Dateien geladen werden, ist Sache des Projekts.
Eigenschaften vor rohen Tags
Wenn eine CSS-Eigenschaft existiert, verwende sie. font-weight: 650 anstelle von font-variation-settings: "wght" 650. font-optical-sizing: auto anstelle von "opsz". font-variant-numeric: tabular-nums anstelle von font-feature-settings: "tnum" 1.
Eigenschaften funktionieren weiterhin, wenn ein nicht-variabler Fallback rendert. Behalte rohe Tags für benutzerdefinierte Achsen ("GRAD" 80) und Nischenfunktionen ("ss01" 1) ohne eigene Eigenschaft vor. Achsen- und Funktions-Tags sind in variable-fonts-and-opentype.md aufgelistet.
Gewünschte Schriftstärken und -stile laden
Browser synthetisieren eine Stärke oder einen Stil, den die aktive Familie nicht bietet, was das tatsächliche Schriftbild verzerrt. Lade die Schriftbilder, die das Design verwendet.
font-synthesis: none schaltet die Synthese aus, löscht aber eher die Betonung, anstatt sie zu melden. Setze es erst, nachdem du überprüft hast, dass jede erforderliche fette, kursive, Kapitälchen-, hochgestellte und tiefgestellte Form im gesamten Fallback-Stack unterscheidbar bleibt.
Weniger Schriftarten, Größen und Stärken
Verwende selten mehr als drei Schriftarten. Stärke und Größe definieren die Hierarchie; ihre Übernutzung beeinträchtigt die Lesbarkeit schnell. Kombiniere für Kontrast, nicht für Ähnlichkeit: eine Serifen-Überschrift über einem serifenlosen Textkörper wirkt bewusst, zwei fast identische serifenlose Schriften wirken wie ein Fehler.
Unter 18px bleibe bei Stärke 400 oder schwerer. Stärken unter 300 sind nur für die Anzeige ab 28px+ geeignet; sie verschwinden bei Textgrößen. Eine Anleitung zum Kombinieren findest du in choosing-fonts.md.
Verwende eine Schriftskala mit semantischen Namen
Definiere einen kleinen Satz von Größen und weiche so wenig wie möglich davon ab. Hartcodierte Größen ohne dahinterliegendes System brechen in großem Maßstab zusammen. Erzwinge die Skala mit einer Lint-Regel oder einem Guard-Test, der bei einer willkürlichen Größe außerhalb der Skala fehlschlägt.
Wenige, standardmäßige Namen wie text-sm sind in Ordnung, wenn die Nutzungsregeln klar sind. In einem Team benenne Größen nach Verwendungszweck (text-body-sm), damit die Regeln auch von anderen Personen übernommen werden können. Der Aufbau der Skala ist in spacing-and-sizing.md beschrieben.
Überschriften-Größen nehmen mit der Ebene ab
Ordne die Überschriftenebenen den absteigenden Stufen der Schriftskala zu, sodass eine visuell untergeordnete Überschrift niemals ihre übergeordnete übertönt. Benachbarte Ebenen können am unteren Ende der Skala eine Größe teilen, solange Stärke oder Abstand sie unterscheidbar halten. Das semantische Element ist Sache von hr-better-accessibility; diese Definition legt nur die visuelle Behandlung fest.
Zeilenhöhe nach Rolle
Überschriften enger, etwa 1.1. Fließtext 1.5 bis 1.6. Bevorzuge einheitenlose Werte, damit die Zeilenhöhe mit der Schriftgröße skaliert; ein fester Wert wie 24px tut das nicht.
Eine enge Zeilenhöhe ist für kurzen Text gedacht. Alles, was auf drei oder mehr Zeilen umbricht, benötigt mindestens 1.4, selbst in einer höhenbegrenzten Zeile.
Buchstabenabstand nach Größe
Große Überschriften wirken oft besser mit leicht negativem Buchstabenabstand. Kleine Großbuchstaben-Labels benötigen einen kleinen positiven Buchstabenabstand, sonst wirken die Buchstaben gedrängt. Fließtext in Lesegröße benötigt weder das eine noch das andere.
Begrenze die Zeilenlänge
Lange Zeilen erschweren es dem Auge, die nächste zu finden. Begrenze Langtext auf etwa 60–75 Zeichen pro Zeile. Jede Einheit ist geeignet, solange eine Begrenzung existiert und die Zeilenlänge im Bereich liegt. Siehe Einheitenauswahl und die Pixel-Äquivalente.
Umbruch bewusst gestalten
Vier Deklarationen, vier Aufgaben:
text-wrap: balanceverteilt Text gleichmäßig über die Zeilen. Verwende es für Überschriften.text-wrap: prettyverhindert, dass ein einzelnes kurzes Wort auf der letzten Zeile landet. Verwende es für Beschreibungen.overflow-wrap: break-wordfür den Fall, dass ein langes Wort, ein Link oder eine ID aus dem Container ausbrechen könnte.white-space: nowrapbei Labels und Badges, wo ein Zeilenumbruch unpassend wirkt.
Verzichte auf balance und pretty bei Fließtexten.
Tabellenzahlen bei sich ändernden Werten
Ziffern haben standardmäßig unterschiedliche Breiten, sodass Timer, Zähler und Preise das Layout beim Aktualisieren verschieben. Wende font-variant-numeric: tabular-nums auf jeden sich ändernden Wert an.
Abschneiden ohne Inhaltsverlust
Für eine einzelne Zeile: text-overflow: ellipsis mit overflow: hidden und white-space: nowrap. Für mehrere: line-clamp. Abschneiden verbirgt Inhalt. Wenn der fehlende Text wichtig ist, halte den vollständigen Wert in einem Tooltip oder einer erweiterten Ansicht erreichbar.
Wähle pro Feld. Umbrich Namen und Titel, die der Benutzer vollständig benötigt, um ein Element zu identifizieren. Schneide in der Mitte ab, wenn sich Elemente am Ende unterscheiden, z. B. bei Dateinamen, Pfaden und E-Mails, die eine Domain teilen, da eine Auslassung am Ende sie identisch aussehen lässt. Schneide niemals Zahlen, Beträge oder Daten ab, die der Benutzer vergleicht. Details sind in wrapping-and-punctuation.md.
Text natürlich schreiben, mit CSS stylen
Speichere Text in natürlicher Groß-/Kleinschreibung und steuere die Darstellung mit text-transform, damit ein Redesign nie das Neuschreiben von Inhalten erfordert.
Verwende intelligente Satzzeichen im gerenderten Text:
- Geschweifte Anführungszeichen in Prosa, gerade Anführungszeichen in Code.
- Einen Gedankenstrich für Bereiche:
2010–2020. - Das einzelne Auslassungszeichen, nicht drei Punkte.
, um16 pxüber einen Zeilenumbruch hinweg zusammenzuhalten.­, um anzugeben, wo ein langes Wort getrennt werden kann.
Unterstreichungen aus der Schriftart
Standardmäßige Unterstreichungen sitzen dort, wo der Browser es entscheidet. Ziehe Position und Dicke aus den eigenen Metriken der Schriftart mit text-underline-position: from-font und text-decoration-thickness: from-font. Stimme von Hand mit text-decoration-thickness, text-underline-offset und text-decoration-skip-ink ab.
text-decoration-style zeichnet die Linie gepunktet, gestrichelt oder wellenförmig. Eine gepunktete Unterstreichung ist ein häufiger Hinweis darauf, dass ein Wort zusätzliche Informationen trägt, z. B. eine Abkürzung oder einen definierten Begriff.
Farbe ist der einzige Teil einer echten Unterstreichung, der zuverlässig animiert werden kann. Wenn also nur die Farbe animiert wird, erstelle die Unterstreichung als separates Element anstatt text-decoration zu verwenden.
Eingabefelder bei 16px auf Mobilgeräten
Safari auf iOS zoomt die gesamte Seite, wenn der Text eines Eingabefelds kleiner als 16px ist. Zwei Korrekturen halten die Größe bei 16px und sehen unterschiedlich aus. Frage daher, welche das Design wünscht:
- Das Eingabefeld auf Mobilgeräten vergrößern (
text-base sm:text-sm). Ändert das Aussehen auf kleinen Bildschirmen. font-size: 16pxbeibehalten und die gewünschte Größe mittransform: scale()rendern, wobei Breite undline-heightkompensiert werden. Auf jeder Ansichtsfläche identisch, mehr zu wartender Code.
Beide Rezepte sind in details-and-accessibility.md.
Größen- und Kontrastuntergrenzen
Beginne Fließtext bei 16px, dem Browserstandard. Weiche nur aus einem Grund ab, den du benennen kannst: Die Schriftart läuft klein, die Zeilenlänge ist schmal oder das Produkt ist ein dichtes professionelles Werkzeug.
UI-Text kann kleiner sein. 14px ist ein nützlicher Ausgangspunkt für Eingabefelder und Menüs, 13px für Bildunterschriften und selten unter 12px. Eingabefelder benötigen auf Mobilgeräten immer noch 16px.
Wenn Text kontrastarm wirkt, verwende hr-better-colors, um das gerenderte Paar zu messen und hr-better-accessibility, um die Anforderung zu klassifizieren. Lasse die Farben in Ruhe, es sei denn, du wirst darum gebeten.
Schriftschärfung auf dem Root-Element
Auf macOS wird Text schwerer als beabsichtigt dargestellt. Wende -webkit-font-smoothing: antialiased und -moz-osx-font-smoothing: grayscale einmal auf dem Root-Layout an, niemals pro Komponente. Tailwinds antialiased deckt beides ab.
Sprache und bidirektionales Verhalten
Setze lang, damit Browser und assistive Technologien die richtige Aussprache, Anführungszeichen und Silbentrennung auswählen. Setze dir auf Dokumentebene oder an der Inhaltsgrenze, an der sich die Richtung ändert. Bewahre die Ziffernreihenfolge und verwende <bdi>, um einen gemischt-gerichteten Wert zu isolieren. Räumliche Spiegelung und logische CSS-Eigenschaften gehören zu hr-better-layout.
Nützlichen Text auswählbar halten
Halte Text standardmäßig auswählbar. ::selection kann Markenidentität in das Leseerlebnis einbringen, solange die ausgewählte Kombination lesbar bleibt.
user-select: none gehört auf eine zieh- oder gestenbasierte Oberfläche, wo versehentliche Auswahl stört. Niemals durchgehend in der Benutzeroberfläche und niemals, weil ein Button-Label hervorgehoben werden kann.
Bevor du fertig bist
| Fehler | Korrektur |
|---|---|
| Synthetisierte Schriftart weicht vom Design ab | Lade die echte Schriftart; deaktiviere nur den verifizierten Synthesemodus |
| Untergeordnete Überschrift übertrumpft visuell die übergeordnete | Ordne die Hierarchie dieses Abschnitts den absteigenden Skalenschritten zu |
| Überschriftenelement aufgrund seiner Standardgröße ausgewählt | Wähle zuerst die Semantik, setze dann die Größe in CSS |
| Einzelne letzte Zeile in einem Absatz | text-wrap: pretty |
| Ungleichmäßige zweizeilige Überschrift | text-wrap: balance |
| Blocksatz in einer Benutzeroberfläche | text-align: start; reserviere Blocksatz für spezifische redaktionelle Layouts |
| Unterstreichung durchschneidet Unterlängen | text-decoration-skip-ink: auto, from-font-Metriken |
| Gemischt-gerichteter Wert wird in falscher Reihenfolge gerendert | Korrigiere lang/dir; isoliere den Wert mit <bdi> |
| Auswahl in der gesamten Anwendung deaktiviert | Stelle sie wieder her; unterdrücke nur dort, wo sie mit Ziehen oder Gesten kollidiert |
| Zusatzinfo-Hinweis ohne visuellen Hinweis | Gepunktete Unterstreichung via text-decoration-style: dotted |
Dünne/Lichte Strichstärke bei 14px UI-Text | Stärke 400+ unter 18px; dünne Strichstärken sind nur für die Anzeige |
leading-none bei einer dreizeiligen Kartenbeschreibung | Mindestens 1.4 bei Text, der auf 3+ Zeilen umbricht |
Berichterstattung
Schweregrad. HIGH macht Text unlesbar oder schneidet Inhalte ab, ohne sie wiederherstellen zu können. MEDIUM unterbricht das Schriftsystem oder die Überschriftenhierarchie. LOW ist isolierte Feinarbeit.
Überprüfung. Ohne Browser: berechnete Größe und Stärke für jede Überschriftenebene, auf absteigende Reihenfolge geprüft; deklarierte Zeilenhöhe und Zeilenlänge; Abschneidungsregeln gegen realistische Zeichenkettenlängen. Mit einem Browser: Ändere die Größe des Ansichtsfensters, um Zeilenumbrüche, Hurenkinder und Abschneidungen bei realen Inhaltslängen zu erkennen. Melde jede Prüfung, die du nicht durchführen konntest, als Nicht verifiziert.
Format. Gruppiere die Ergebnisse unter dem Prinzip, das jedes verletzt, geordnet nach Schweregrad, eine Zeile pro Grundursache mit Auflistung jedes Ortes, an dem sie auftritt:
| Schweregrad | Ort | Vorher | Nachher | Warum |
|---|
Ort ist pfad/zu/datei:zeile. Warum nennt das Prinzip und die Auswirkung auf den Benutzer.
Melde Blockieren, wenn ein HIGH verbleibt, andernfalls Genehmigen und lasse den Rest in der Tabelle als zu erledigende Arbeit stehen. Genehmige niemals eine Abdeckung, die du nicht überprüft hast. Wenn es nichts zu melden gibt, gib an: "Keine relevanten Typografie-Befunde" und melde die Überprüfung.