Wensity Typografie

Schrift macht den Großteil der Arbeit in einer Benutzeroberfläche. Wenn sie richtig ist, sieht eine schlichte Seite gestaltet aus; wenn sie falsch ist, rettet keine Menge Farbe oder Bewegung sie. Dieses Skill gibt dir ein System, das du einmal einrichtest, und Regeln, die du überall anwendest.

Die folgenden Werte sind Standardwerte. Wenn das Projekt bereits ein Schriftsystem hat, behalte es und verbessere, wie es verwendet wird. Ersetze es nur, wenn danach gefragt wird.

1. Schriftfamilien auswählen

Eine Familie ist normalerweise genug. Eine gute Serifenlose mit einer echten Gewichtsspanne deckt Display, Überschriften, Fließtext und UI ab. Füge eine zweite Familie nur hinzu, wenn die erste eine Rolle nicht erfüllen kann: eine auffällige Display-Serifenlose für eine Marketingseite oder eine Monospace für Code und Daten.
Nur Serifenlose: keine Serife und keine Kursive. Überschriften, Fließtext, Zitate und Bildunterschriften werden alle aufrecht in Serifenlosen gesetzt. Eine Serifen-Überschrift oder eine kursive Zeile liest sich wie ein Kostüm auf einem Webprodukt, also lass beides weg, selbst in Blogs, Dokumentationen und Luxusseiten; transportiere den Ton mit Gewicht, Größe und Abstand.
Nie mehr als zwei Familien plus eine Monospace. Eine dritte Textfamilie wirkt wie Unentschlossenheit.
Wähle für das Thema aus, nicht aus Gewohnheit. Setze nicht dieselbe Schrift auf jedes Projekt. Frage, wie die Welt des Produkts in Print oder auf Hardware aussieht, und wähle dann eine Schrift mit diesem Charakter:

Das Produkt fühlt sich an wie	Greife zu	Kostenlose Beispiele
ein präzises Werkzeug (Entwicklertools, Daten, Infrastruktur)	eine enge Grotesk, Monospace für Daten	Geist, Switzer, Onest; Geist Mono, JetBrains Mono
ruhiges Geld oder Gesundheit (Finanzen, Versicherungen, Kliniken)	eine ruhige Neo-Grotesk oder humanistische Serifenlose	Inter, Public Sans, Source Sans 3
freundliche Verbraucher (Soziales, Essen, Reisen, Bildung)	eine rundere geometrische oder humanistische Serifenlose	Plus Jakarta Sans, Figtree, Nunito Sans, DM Sans
eine selbstbewusste Marke oder Startup-Marketingseite	eine Serifenlose mit Persönlichkeit in Displaygrößen	General Sans, Manrope, Bricolage Grotesque, Space Grotesk
Lesen und Veröffentlichen (Dokumentation, Blogs, Magazine)	eine ruhige Serifenlose mit einem echten Textausschnitt, enge Titel in derselben Familie	Inter, Satoshi, Source Sans 3
Mode, Redaktion oder Luxus	eine verfeinerte Display-Serifenlose, groß und eng gesetzt, nur Titel	Satoshi, General Sans, Clash Grotesk

Überprüfe, ob die Schrift die Aufgabe erfüllen kann: die benötigten Gewichte (normalerweise 400, 500, 600), tabellarische Ziffern, gute Satzzeichen, die Sprachen, die du auslieferst, und eine variable Version, wenn du mehrere Gewichte verwendest.

2. Rollen definieren, nicht Größen

Benenne Text nach seiner Aufgabe. Komponenten verwenden Rollennamen; nur die Rollendefinition enthält Pixelwerte. Sieben Rollen decken fast jede Benutzeroberfläche ab:

Rolle	Verwendet für	Marketingseite	App-UI
`display`	Hero-Überschrift, eine pro Seite	48 bis 80px, Gewicht 600, Zeilenabstand 0,95 bis 1,05, Laufweite -0,03em bis -0,04em	selten verwendet
`title`	Seiten- und Abschnittsüberschriften	32 bis 44px, Gewicht 600, Zeilenabstand 1,1, Laufweite -0,02em	20 bis 24px, Gewicht 600, Zeilenabstand 1,25, Laufweite -0,01em
`heading`	Karten-, Panel- und Unterabschnittsüberschriften	20 bis 24px, Gewicht 600, Zeilenabstand 1,25, Laufweite -0,01em	15 bis 16px, Gewicht 600, Zeilenabstand 1,4
`body`	Absätze	16 bis 18px, Gewicht 400, Zeilenabstand 1,55 bis 1,65	14 bis 15px, Gewicht 400, Zeilenabstand 1,5
`label`	Buttons, Eingaben, Navigation, Tabellenüberschriften	14 bis 15px, Gewicht 500, Zeilenabstand 1,3	13 bis 14px, Gewicht 500, Zeilenabstand 1,3
`caption`	Hilfstext, Metadaten, Zeitstempel	13 bis 14px, Gewicht 400, Zeilenabstand 1,45	12 bis 13px, Gewicht 400, Zeilenabstand 1,4
`code`	Inline-Code, Codeblöcke, IDs	0,9em des umgebenden Textes, mono	gleich

Regeln für die Skala:

Schritte müssen offensichtlich sein. Benachbarte Rollen unterscheiden sich um mindestens etwa 20 % in der Größe oder um einen Größenschritt plus einen Gewichtsschritt (14px 500 Label über 13px 400 Caption ist in Ordnung; 15px 400 neben 16px 400 mit unterschiedlichen Aufgaben ist es nicht).
Ein Verhältnis hilft, aber die Tabelle gewinnt. Für Marketingseiten eignet sich ein Verhältnis von 1,25 bis 1,333 zwischen den Schritten; für dichte App-UI eignet sich 1,125 bis 1,2. Runde auf ganze Pixel.
Maximal drei Gewichte: Normal (400) für Fließtext, Medium (500) für Labels, Semibold (600) für Überschriften und Display. Hierarchie kommt auch von Größe, Farbe und Abstand, daher braucht es keine fünf Gewichte. Wenn 600 für eine große Displayzeile zu schwer aussieht, verwende 500 für Display, anstatt ein viertes Gewicht hinzuzufügen.
Fluide Größe nur für Display und Title auf Marketingseiten: font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem). Halte Fließtext und UI-Text fest, damit dichte Layouts vorhersehbar bleiben.
Fließtext-Mindestgröße: 16px auf Marketing- und Leseseiten, 14px in dichter App-UI. Eingabetext ist 16px auf Mobilgeräten, sonst zoomt iOS Safari die Seite, wenn das Feld fokussiert ist.

In Tailwind CSS v4 die Rollen einmal definieren (ersetze die Familiennamen durch die von dir gewählten):

@theme {
  --text-display: clamp(2.75rem, 1.6rem + 4.2vw, 5rem);
  --text-display--line-height: 1;
  --text-display--letter-spacing: -0.035em;
  --text-display--font-weight: 600;

  --text-title: 2.25rem;
  --text-title--line-height: 1.1;
  --text-title--letter-spacing: -0.02em;
  --text-title--font-weight: 600;

  --text-heading: 1.25rem;
  --text-heading--line-height: 1.3;
  --text-heading--letter-spacing: -0.01em;
  --text-heading--font-weight: 600;

  --text-body: 1rem;
  --text-body--line-height: 1.6;

  --text-label: 0.875rem;
  --text-label--line-height: 1.3;
  --text-label--font-weight: 500;

  --text-caption: 0.8125rem;
  --text-caption--line-height: 1.45;
}

Verwende dann text-display, text-title, text-body im Markup anstelle von text-[44px] oder einer Kette von text-4xl leading-tight tracking-tight. In Tailwind v3 füge dieselben Werte unter theme.extend.fontSize als [size, { lineHeight, letterSpacing, fontWeight }]-Tupel ein.

3. Zeilenabstand und Buchstabenabstand

Der Zeilenabstand nimmt ab, je größer die Schrift wird. Display 0,95 bis 1,05, Titel 1,1 bis 1,2, Fließtext 1,5 bis 1,65, Labels 1,2 bis 1,35. Eine 64px-Überschrift mit Zeilenabstand 1,5 zerfällt in einzelne Zeilen.
Enge Laufweite für große Texte, keine für Fließtext. Display -0,03em bis -0,04em, Titel -0,02em, Überschriften -0,01em, Fließtext und Labels 0. Gehe nicht enger als -0,05em; Buchstaben beginnen sich zu berühren. Passe nach Augenmaß für die gewählte Schrift an.
Keine positive Laufweite bei Kleinbuchstaben-Fließtext und UI-Text. Positive Laufweite hilft nur bei Großbuchstaben-Text, und Großbuchstaben-Text sollte selten sein (siehe Abschnitt 6).
Breite Zeilen brauchen mehr Durchschuss. Wenn Fließtext nahe an 75 Zeichen pro Zeile läuft, verwende Zeilenabstand 1,6 oder mehr; bei 50 Zeichen reicht 1,5.
Heller Text auf dunklem Hintergrund wirkt schwerer und enger. Bei dunklen Themes füge etwa 0,05 zum Fließtext-Zeilenabstand hinzu.

4. Maß und Zeilenumbrüche

Fließtext: 60 bis 75 Zeichen pro Zeile. Setze max-width: 65ch auf Absätze, nicht auf die gesamte Seite. Bildunterschriften und Hilfstexte können schmaler laufen.
Display-Überschriften: etwa 12 bis 20 Zeichen pro Zeile. Eine Überschrift, die über einen 1440px-Bildschirm in einer Zeile läuft, hat keine Form. Beschränke sie mit max-width in ch oder einer Containergröße.
Überschriften ausgleichen, Absätze hübsch umbrechen:

h1, h2, h3, .text-display, .text-title { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }

Beide sind progressiv: Ältere Browser ignorieren sie. balance gleicht Überschriftenzeilen aus; pretty verhindert, dass ein einzelnes Wort allein in der letzten Zeile eines Absatzes steht.

Setze manuelle Umbrüche nur zwischen Phrasen und überprüfe sie bei jeder Breite, bei der der Text gerendert wird. Ein <br>, der auf einem Telefon in der Mitte der Zeile landet, ist schlimmer als der Standardumbruch. Bevorzuge max-width gegenüber <br>.
Lange Wörter und URLs in Benutzerinhalten benötigen overflow-wrap: anywhere auf ihrem Container, sonst drücken sie das Layout auf Mobilgeräten seitlich auseinander.
Abschneiden ist die letzte Option. Schneide einzeilige Labels in engen UIs ab (truncate in Tailwind). Wenn der verborgene Teil wichtig ist, mach den vollständigen Text per Tastatur und Berührung erreichbar (ein Tooltip auf einem fokussierbaren Element, eine erweiterbare Zeile, eine Detailansicht); ein title-Attribut allein reicht nicht. Schneide niemals Fließtext oder etwas ab, das der Benutzer lesen muss, um zu handeln.
Mehrzeilige Begrenzungen (line-clamp-2): Halte den Zeilenabstand bei 1,3 oder mehr für den begrenzten Text, damit Unterlängen (g, y, p) nicht abgeschnitten werden. Füge kein Innenpadding am unteren Rand innerhalb der Begrenzung hinzu; es zeigt den Anfang der nächsten Zeile.

5. Textfarbe und Kontrast

Drei Textfarben reichen: Primär (Überschriften und Fließtext), Sekundär (unterstützender Text, Bildunterschriften, Platzhalter) und Deaktiviert. Definiere sie als Tokens. Vermeide, eine vierte zu machen, indem du die Deckkraft spontan reduzierst.
Kontrast-Mindestwerte (WCAG 2.2 AA): 4,5:1 für Fließtext und kleine Schrift, 3:1 für Text ab 24px (oder 18,66px fett). Sekundärtext und Platzhaltertext benötigen ebenfalls 4,5:1. Nur Text in deaktivierten Steuerelementen ist ausgenommen.
Auf dunklen Hintergründen verwende Off-White, nicht reines Weiß, für lange Texte (ungefähr 90 bis 94 % Helligkeit). Reines Weiß auf fast Schwarz blendet.
Auf farbigen oder getönten Oberflächen töne den Sekundärtext in Richtung des Oberflächentons, anstatt ein neutrales Grau zu verwenden, das auf Farbe schmutzig aussieht.

6. Was zu vermeiden ist

Augenbrauen und Aufmacher: Kleine, großgeschriebene, gesperrte Labels über einer Überschrift („FUNKTIONEN“, „WARUM WIR“, „SO FUNKTIONIERT ES“). Verwende sie nicht. Sie sind das deutlichste Zeichen von Vorlagen-UI. Wenn eine Überschrift Kontext braucht, schreibe eine bessere Überschrift.
Großbuchstaben-Label generell, einschließlich kleiner Abschnittsüberschriften in Seitenleisten, Einstellungsbereichen, Karten, Fußzeilen und Demo-Steuerelementen. Satzfall liest sich schneller; gib einer kleinen Überschrift stattdessen Gewicht (500 oder 600) und die sekundäre Textfarbe. Behalte Großbuchstaben für echte Abkürzungen vor (API, URL).
Verlaufstext und ein farbiges Wort in einer Überschrift. Hervorhebung kommt von Größe, Gewicht und Platzierung, nicht von Farbe.
Kursivschrift, überall. Verwende Gewicht für die Betonung und setze Zitate aufrecht mit einer Regel oder einer größeren Größe daneben.
Serifenschriften. Display-Serifen und Text-Serifen lesen sich beide wie ein Kostüm auf einem Webprodukt. Wähle stattdessen eine Serifenlose mit Charakter.
Monospace als Dekoration. Mono ist für Code, Daten, IDs, Tastenkürzel und Zahlen in Spalten. Mono-Label auf einer Marketingseite sind ein Kostüm.
Zentrierte Absätze, die länger als zwei Zeilen sind. Zentriere nur kurze Überschriften und einzeilige CTAs.
Blocksatz im Web. Ohne Silbentrennung erzeugt er Flüsse von Leerraum.
Unterstreichungen für alles außer Links.

7. Zahlen, Code und Daten

Tabellarische Ziffern in allem, das ausgerichtet oder aktualisiert wird: Tabellen, Preise, Timer, Zähler, Statistiken. font-variant-numeric: tabular-nums; (Tailwind tabular-nums). Ohne sie zittert eine Zählzahl seitlich, wenn sich die Ziffernbreiten ändern.
Durchgestrichene Null für IDs und Codes, wo 0 und O verwechselt werden können: font-variant-numeric: tabular-nums slashed-zero;.
Zahlen am Ende ausrichten von Tabellenzellen (text-align: end), damit Dezimalstellen übereinanderstehen. Textspalten werden am Anfang ausgerichtet.
Code: Monospace mit etwa 0,9em des umgebenden Textes, damit seine x-Höhe übereinstimmt. Inline-Code erhält einen subtilen Hintergrund und 0,2em horizontalen Abstand, keine Umrandung. Codeblöcke erhalten einen Zeilenabstand von etwa 1,6 und horizontalen Scroll, niemals einen Umbruch, der die Einrückung zerstört.
Tastenkürzel (<kbd>) in der Mono-Schriftart in Caption-Größe.

8. Links

Unterstreiche Links in laufendem Text; Farbe allein reicht für farbenblinde Leser nicht aus. Beschränke es auf Prosa, damit Navigationslisten und Buttons nicht unterstrichen werden (.prose umschließt alles, was deinen Artikel oder lange Inhalte umgibt):

:where(p, td, dd, figcaption, blockquote) a,
:where(.prose, article) li a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

Navigation, Buttons und Karten-Links benötigen keine Unterstreichungen; ihre Position sagt bereits, dass sie interaktiv sind.

9. Schriftarten laden ohne Layoutverschiebung

Next.js: Verwende next/font (next/font/google oder next/font/local). Es hostet selbst, lädt vor und generiert einen Fallback mit passenden Metriken, sodass die Seite nicht springt, wenn die Schriftart eintrifft. Stelle es als CSS-Variable bereit und ordne die Theme-Schriftart mit @theme inline zu (damit die Variable dort gelesen wird, wo sie verwendet wird, und nicht einmal bei :root aufgelöst wird):

// app/layout.tsx
import { Onest } from "next/font/google";
const sans = Onest({ subsets: ["latin"], variable: "--font-brand", display: "swap" });
// <html lang="en" className={sans.variable}>

@theme inline {
  --font-sans: var(--font-brand), ui-sans-serif, system-ui, sans-serif;
}

Optische Größe: Eine Schriftart mit einer opsz-Achse (Inter, Roboto Flex, Fraunces) erhält diese nur, wenn du sie lädst: Inter({ subsets: ["latin"], axes: ["opsz"] }). Behalte font-optical-sizing: auto, damit kleiner Text den stabileren Ausschnitt und großer Text den feineren erhält.
Andernorts: Selbst gehostete WOFF2, font-display: swap, lade nur die eine oder zwei Dateien vor, die über dem Fold verwendet werden, und setze size-adjust, ascent-override und descent-override auf eine lokale Fallback-Schriftart, damit der Austausch das Layout nicht verschiebt.
Lade nur, was du verwendest. Bevorzuge eine variable Schriftartdatei gegenüber sechs statischen Gewichten. Beschränke auf die Skripte, die du auslieferst.

10. Renderdetails

-webkit-font-smoothing: antialiased bei dunklen Themes lässt hellen Text auf macOS weniger aufgebläht aussehen. Belasse helle Themes bei der Standardeinstellung.
Setze ::selection auf den Markenton und halte es lesbar. Das Standardblau des Browsers ist ein Zeichen dafür, dass die Seite nicht fertiggestellt wurde.
Verwende echte Satzzeichen im Text: typografische Anführungszeichen („ “ ‚ ‘), das Auslassungszeichen (…) und das Multiplikationszeichen (×) in Maßen.
Respektiere Benutzereinstellungen: Größenangaben von Text in rem, blockiere niemals den Zoom, und überprüfe, ob Text bei 200 % Textgröße und mit größerem Buchstaben- und Zeilenabstand noch passt.

wensity/wensity-typography

Was ist wensity-typography?

In Ihrer bevorzugten KI fragen

Dokumentation

Wensity Typografie

1. Schriftfamilien auswählen

2. Rollen definieren, nicht Größen

3. Zeilenabstand und Buchstabenabstand

4. Maß und Zeilenumbrüche

5. Textfarbe und Kontrast

6. Was zu vermeiden ist

7. Zahlen, Code und Daten

8. Links

9. Schriftarten laden ohne Layoutverschiebung

10. Renderdetails

11. Überprüfe vor dem Abschluss

Individual skills in this repo

wensity/wensity-layout

wensity/wensity-ui-copy

Verwandte Skills

steipete/sag

steipete/oracle

steipete/peekaboo

mattpocock/design-an-interface

mattpocock/prototype

mattpocock/grill-me