jakubkrehel/better-typography

Typografie

Typografie bedeutet vor allem Zurückhaltung: eine sinnvolle Größenskala, angenehme Abstände, ausreichender Kontrast. Ein Label, eine Tabellenzelle, eine Marketing-Überschrift und ein Artikelabsatz teilen sich nicht ein Regelwerk.

Überprüfen Sie die gerenderte Seite, anstatt den Code zu scannen. Schlechte Umbrüche, Hurenkinder und Textkürzung zeigen sich erst bei realen Textlängen.

Schreiben Sie jede Korrektur im Styling-System des Projekts und verwenden Sie die unten stehenden exakten Werte, anstatt ähnlich aussehende Äquivalente. Das Spickzettel ordnet jede Deklaration ihrem Tailwind-Äquivalent zu.

Die Wörter selbst gehören zu better-writing. Die semantische Überschriftenstruktur gehört zu better-accessibility. Das räumliche RTL-Layout und logische Eigenschaften gehören zu better-layout. Die Kontrastmessung gehört zu better-colors. Dieser Skill ist zuständig dafür, wie Text in gemischt-gerichteten Inhalten dargestellt, umbrochen und verhalten wird.

Das richtige Format ausliefern

Verwenden Sie .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 statt roher Tags

Wenn eine CSS-Eigenschaft existiert, verwenden Sie 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 weiter, wenn ein nicht-variabler Fallback gerendert wird. Reservieren Sie rohe Tags für benutzerdefinierte Achsen ("GRAD" 80) und Nischenfunktionen ("ss01" 1), für die es keine eigene Eigenschaft gibt. Achsen- und Feature-Tags sind in variable-fonts-and-opentype.md aufgelistet.

Gewünschte Schnitte und Stile laden

Browser synthetisieren einen Schnitt oder Stil, den die aktive Schriftfamilie nicht bereitstellt, und verzerren so das tatsächliche Schriftbild. Laden Sie die Schriftbilder, die das Design verwendet.

font-synthesis: none schaltet die Synthese aus, löscht aber die Hervorhebung, anstatt sie zu melden. Setzen Sie es erst, nachdem Sie überprüft haben, dass alle erforderlichen Formen (fett, kursiv, Kapitälchen, hochgestellt, tiefgestellt) über den gesamten Fallback-Stack hinweg unterscheidbar bleiben.

Weniger Schriftarten, Größen und Schnitte

Verwenden Sie selten mehr als drei Schriftarten. Gewicht und Größe definieren die Hierarchie; eine Überbeanspruchung schadet der Lesbarkeit schnell. Paaren Sie für Kontrast, nicht für Ähnlichkeit: Eine Serifen-Überschrift über einem serifenlosen Fließtext wirkt bewusst, zwei nahezu identische serifenlose Schriften wirken wie ein Fehler.

Unterhalb von 18px bleiben Sie bei Gewicht 400 oder schwerer. Gewichte unter 300 sind nur für Display-Zwecke bei 28px+ geeignet; sie verschwinden bei Textgrößen. Eine Anleitung zur Paarung finden Sie in choosing-fonts.md.

Eine Schriftgrößenskala mit semantischen Namen verwenden

Definieren Sie eine kleine Menge an Größen und weichen Sie so wenig wie möglich davon ab. Hartcodierte Größen ohne zugrundeliegendes System brechen im größeren Maßstab zusammen.

Alleinstehende, standardmäßige Namen wie text-sm sind in Ordnung, wenn die Verwendungsregeln klar sind. In einem Team benennen Sie Größen nach Verwendungszweck (text-body-sm), damit die Regeln auch von anderen Personen übernommen werden können. Der Aufbau einer Skala wird in spacing-and-sizing.md beschrieben.

Überschriftgrößen nehmen mit der Ebene ab

Ordnen Sie Überschriftenebenen absteigenden Stufen der Typografieskala zu, sodass eine visuell untergeordnete Überschrift niemals ihre übergeordnete dominiert. Benachbarte Ebenen können am unteren Ende der Skala eine Größe teilen, solange Gewicht oder Abstand sie unterscheidbar halten. Das semantische Element ist Sache von better-accessibility; dieser Skill legt nur die visuelle Gestaltung fest.

Zeilenhöhe je nach Rolle

Überschriften enger, etwa 1.1. Fließtext 1.5 bis 1.6. Bevorzugen Sie einheitenlose Werte, damit die Zeilenhöhe mit der Schriftgröße skaliert; ein festes 24px tut das nicht.

Enge Zeilenhöhe ist für kurzen Text. Alles, was auf drei oder mehr Zeilen umbricht, benötigt mindestens 1.4, selbst in einer höhenbegrenzten Zeile.

Laufweite je nach Größe

Große Überschriften wirken oft besser mit einer leicht negativen Laufweite. Kleine Großbuchstaben-Labels benötigen eine kleine positive Laufweite, sonst wirken die Buchstaben gedrängt. Fließtext in Lesegröße benötigt weder noch.

Die Zeilenlänge begrenzen

Lange Zeilen erschweren dem Auge das Auffinden der nächsten Zeile. Begrenzen Sie Langformtexte auf etwa 60–75 Zeichen pro Zeile. Jede Einheit ist geeignet, solange eine Grenze existiert und die Zeilenlänge im Bereich liegt. Siehe Einheitenwahl und die Pixel-Äquivalente.

Bewusst umbrechen

Vier Deklarationen, vier Aufgaben:

• text-wrap: balance verteilt Text gleichmäßig über die Zeilen. Verwenden Sie es bei Überschriften.
• text-wrap: pretty verhindert, dass ein einzelnes kurzes Wort in der letzten Zeile landet. Verwenden Sie es bei Beschreibungen.
• overflow-wrap: break-word dort, wo ein langes Wort, ein Link oder eine ID den Container verlassen könnte.
• white-space: nowrap bei Labels und Badges, wo ein Zeilenumbruch kaputt aussieht.

Verwenden Sie balance und pretty nicht in Langformtexten.

Tabellenziffern bei sich ändernden Werten

Ziffern haben standardmäßig unterschiedliche Breiten, daher verschieben Timer, Zähler und Preise das Layout, wenn sie sich aktualisieren. Wenden Sie font-variant-numeric: tabular-nums auf jeden Wert an, der sich ändert.

Kürzen ohne Inhaltsverlust

Für eine einzelne Zeile: text-overflow: ellipsis mit overflow: hidden und white-space: nowrap. Für mehrere Zeilen: line-clamp. Kürzen verbirgt Inhalt. Wenn der fehlende Text wichtig ist, halten Sie den vollständigen Wert in einem Tooltip oder einer erweiterten Ansicht erreichbar.

Text natürlich schreiben, mit CSS stylen

Speichern Sie Text in natürlicher Schreibweise und steuern Sie die Darstellung mit text-transform, sodass ein Redesign niemals das Umschreiben von Kopien erfordert.

Verwenden Sie intelligente Satzzeichen in gerendertem Text:

• Eckige Anführungszeichen in Prosa, gerade Anführungszeichen in Code.
• Ein Halbgeviertstrich für Bereiche: 2010–2020.
• Das einzelne Auslassungszeichen, nicht drei Punkte.
•   um 16 px über einen Zeilenumbruch hinweg zusammenzuhalten.
• ­ um anzugeben, wo ein langes Wort brechen darf.

Unterstreichungen aus der Schriftart

Standard-Unterstreichungen sitzen dort, wo der Browser es entscheidet. Ziehen Sie Position und Stärke aus den eigenen Metriken der Schriftart mit text-underline-position: from-font und text-decoration-thickness: from-font. Passen Sie von Hand an mit text-decoration-thickness, text-underline-offset und text-decoration-skip-ink.

text-decoration-style zeichnet die Linie gepunktet, gestrichelt oder wellenförmig. Eine gepunktete Unterstreichung ist ein häufiger Hinweis, dass ein Wort zusätzliche Informationen trägt, wie 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 nicht nur die Farbe animiert wird, bauen Sie die Unterstreichung als separates Element, anstatt text-decoration zu verwenden.

Eingabefelder mit 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. Fragen Sie 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: 16px beibehalten und die gewünschte Größe mit transform: scale() darstellen, wobei Breite und line-height kompensiert werden. Identisch bei jeder Ansichtsgröße, aber mehr Code zu warten.

Beide Rezepte finden Sie in details-and-accessibility.md.

Größen- und Kontrastuntergrenzen

Beginnen Sie Fließtext in Langform bei 16px, dem Browser-Standard. Weichen Sie nur ab, wenn Sie einen Grund nennen können: die Schriftart läuft klein, das Maß 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 Beschriftungen und selten unter 12px. Eingabefelder benötigen auf Mobilgeräten weiterhin 16px.

Wenn Text niedrig kontrastiert wirkt, verwenden Sie better-colors, um das gerenderte Paar zu messen, und better-accessibility, um die Anforderung zu klassifizieren. Lassen Sie die Farben in Ruhe, wenn Sie nicht darum gebeten wurden.

Schriftglättung auf dem Root-Element

Auf macOS wirkt Text schwerer als beabsichtigt. Wenden Sie -webkit-font-smoothing: antialiased und -moz-osx-font-smoothing: grayscale einmalig auf dem Root-Layout an, niemals pro Komponente. Tailwinds antialiased deckt beides ab.

Sprach- und Bidi-Verhalten

Setzen Sie lang, damit Browser und assistive Technologien die richtige Aussprache, Anführungszeichen und Silbentrennung wählen. Setzen Sie dir auf Dokument- oder auf Inhaltsebene, wo sich die Richtung ändert. Bewahren Sie die Ziffernreihenfolge und verwenden Sie <bdi>, um einen gemischt-gerichteten Wert zu isolieren. Räumliche Spiegelung und logische CSS-Eigenschaften gehören zu better-layout.

Nützlichen Text auswählbar halten

Halten Sie Text standardmäßig auswählbar. ::selection kann die Marke in das Leseerlebnis einbringen, solange die ausgewählte Kombination lesbar bleibt.

user-select: none gehört auf eine ziehbare oder gestenbasierte Oberfläche, wo versehentliches Auswählen stört. Niemals in der gesamten Schnittstelle und niemals, weil ein Button-Label hervorgehoben werden kann.

Bevor Sie fertig sind

Fehler	Korrektur
Synthetisierte Schrift weicht vom Design ab	Das echte Schriftbild laden; nur den verifizierten Synthesemodus deaktivieren
Untergeordnete Überschrift dominiert visuell ihre übergeordnete	Die Hierarchie dieses Abschnitts auf absteigende Skalenschritte abbilden
Überschriften-Element aufgrund seiner Standardgröße gewählt	Zuerst Semantik wählen, dann die Größe in CSS setzen
Hurenkind in der letzten Zeile eines Absatzes	text-wrap: pretty
Ungleichmäßig gefüllte zweizeilige Überschrift	text-wrap: balance
Im Blocksatz ausgerichteter Text in einer Benutzeroberfläche	text-align: start; Blocksatz für spezifische redaktionelle Layouts reservieren
Unterstreichung schneidet durch Unterlängen	text-decoration-skip-ink: auto, from-font Metriken
Gemischt-gerichteter Wert wird in der falschen Reihenfolge gerendert	Korrektes lang/dir; den Wert mit <bdi> isolieren
Auswahl in der gesamten Anwendung deaktiviert	Wiederherstellen; nur unterdrücken, wo es mit einem Ziehen oder einer Geste kollidiert
Hinweis auf Zusatzinformation ohne visuelles Signal	Gepunktete Unterstreichung via text-decoration-style: dotted
Dünner/Leichter Schnitt bei 14px UI-Text	Gewicht 400+ unterhalb 18px; dünne Schnitte sind nur für Display-Zwecke
leading-none bei einer dreizeiligen Kartenbeschreibung	Mindestens 1.4 bei jedem Text, der auf 3+ Zeilen umbricht

Berichterstattung

Schweregrad. HIGH macht Text unleserlich oder kürzt Inhalt ohne Wiederherstellungsmöglichkeit. MEDIUM zerbricht das Schriftsystem oder die Überschriftenhierarchie. LOW ist isolierte Politur.

Verifikation. Ohne Browser: berechnete Größe und Gewicht für jede Überschriftenebene, auf absteigend geprüft; deklarierte Zeilenhöhe und Maß; Kürzungsregeln gegen realistische Stringlängen. Mit einem: Ansichtsfenstergröße ändern, um Umbrüche, Hurenkinder und Kürzungen bei realen Textlängen zu erkennen. Melden Sie jede Prüfung, die Sie nicht durchführen konnten, als Nicht verifiziert.

Format. Gruppieren Sie die Ergebnisse nach dem Prinzip, das jedes verletzt, geordnet nach Schweregrad, eine Zeile pro Ursache, die jeden Ort auflistet, an dem sie auftritt:

Schweregrad	Ort	Vorher	Nachher	Grund

Ort ist pfad/zu/datei:zeile. Grund benennt das Prinzip und die Auswirkung auf den Benutzer.

Enden Sie mit Block wenn ein HIGH übrig ist, andernfalls mit Approve, und lassen Sie den Rest in der Tabelle als zu erledigende Arbeit stehen. Approve niemals für Dinge, die Sie nicht überprüft haben. Wenn es nichts zu melden gibt, geben Sie an: "Keine relevanten typografischen Befunde" und melden Sie die Verifikation.