Sperrung der Kartentitel: neuer Token --ls-heading statt --ls-caps

--ls-caps (0.08em) war zu viel: bei 34px sind das 2,7px und die Überschriften
wirkten auseinandergezogen. Gewollt war ein Hauch Luft, etwa 0,4px (Felix).

Dafür gibt es keinen Token, und rohe Werte verbietet die Token-Disziplin — also
--ls-heading: 0.012em, was bei 34px genau 0,408px ergibt (nachgemessen). Der Fall
trifft jede Coolvetica-Überschrift in h3-Größe, nicht nur diese Karten: der
Schnitt ist condensed, bei 60px trägt er ohne Sperrung, bei 34px kleben die
Versalien. --ls-caps bleibt für kleine Labels, wofür es gedacht ist.

Klarstellung zum vorigen Commit: die Titel waren und bleiben Coolvetica. Der
Verweis auf Abel in meiner Begründung war ein Zitat der CLAUDE.md-Regel für
kleine Auszeichnungen, keine Änderung an der Schriftart.

CLAUDE.md entsprechend berichtigt, inklusive der Warnung, hier nicht --ls-caps
zu nehmen.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NzeVVgMCrzCDJAKeLEdKr7
This commit is contained in:
2026-07-31 20:46:25 +02:00
parent 97676e91ee
commit 9244149bac
3 changed files with 19 additions and 10 deletions

View File

@@ -279,10 +279,12 @@ nicht durchgezogen.
darunter unleserlich (mehrfach bestätigt: Footer-Headings, Timeline-Nav). Für kleinere Auszeichnungen darunter unleserlich (mehrfach bestätigt: Footer-Headings, Timeline-Nav). Für kleinere Auszeichnungen
Abel verwenden, ggf. mit `letter-spacing` + uppercase. `base.css` setzt das durch: `h1``h3` tragen Abel verwenden, ggf. mit `letter-spacing` + uppercase. `base.css` setzt das durch: `h1``h3` tragen
Coolvetica, **`h4``h6` laufen über `--ff-body` + uppercase + `--ls-caps`**. Coolvetica, **`h4``h6` laufen über `--ff-body` + uppercase + `--ls-caps`**.
- **Coolvetica unter ~40px braucht `letter-spacing: var(--ls-caps)`.** Der Schnitt ist condensed: bei - **Coolvetica unter ~40px braucht `letter-spacing: var(--ls-heading)`** (0.012em, also 0,4px bei
60px (Abschnitts-h2) trägt er ohne Sperrung, bei 34px in einer schmalen Spalte kleben die Versalien 34px). Der Schnitt ist condensed: bei 60px (Abschnitts-h2) trägt er ohne Sperrung, bei 34px in einer
aneinander und der Titel wird schwer lesbar (aufgefallen an den Beitragskarten, 31.07.2026). Die schmalen Spalte kleben die Versalien und der Titel wird schwer lesbar (aufgefallen an den
globalen `h1``h3` stehen bewusst auf `letter-spacing: normal` — gesperrt wird pro Komponente. Beitragskarten, 31.07.2026). **Nicht `--ls-caps` (0.08em) nehmen** — das ist für kleine Labels
gedacht und lässt eine Überschrift auseinandergezogen wirken. Die globalen `h1``h3` stehen
bewusst auf `letter-spacing: normal`, gesperrt wird pro Komponente.
- Rot nie für Fließtext auf dunklem Grund (Kontrast!) — nur als Button-/Akzent-Fläche mit weißem Text. - Rot nie für Fließtext auf dunklem Grund (Kontrast!) — nur als Button-/Akzent-Fläche mit weißem Text.
**Gemessene Zahl dazu:** `#e20612` auf der Glas-Karte (`rgba(0 0 0 / 0.22)` über `#222`) erreicht **Gemessene Zahl dazu:** `#e20612` auf der Glas-Karte (`rgba(0 0 0 / 0.22)` über `#222`) erreicht
**3,50:1** und verfehlt die 4,5:1 für Fließtext; Weiß liegt bei 17,22:1. Genau daran sind die **3,50:1** und verfehlt die 4,5:1 für Fließtext; Weiß liegt bei 17,22:1. Genau daran sind die

View File

@@ -4176,12 +4176,13 @@
34px ist die nächste Stufe; --fs-690 (bis 44px) würde die langen Titel wie 34px ist die nächste Stufe; --fs-690 (bis 44px) würde die langen Titel wie
„Zusatzbeitrag für bestehende TSV-Mitglieder" in drei Zeilen brechen. */ „Zusatzbeitrag für bestehende TSV-Mitglieder" in drei Zeilen brechen. */
font-size: var(--fs-675); font-size: var(--fs-675);
/* --ls-caps, weil Coolvetica ein Condensed-Schnitt ist: bei 60px (Abschnitts-h2) /* Coolvetica ist ein Condensed-Schnitt: bei 60px (Abschnitts-h2) trägt er ohne
trägt er ohne Sperrung, bei 34px in einer schmalen Kartenspalte klebten die Sperrung, bei 34px in einer schmalen Kartenspalte klebten die Versalien und
Versalien aneinander und „ZUSATZBEITRAG FÜR BESTEHENDE TSV-MITGLIEDER" war „ZUSATZBEITRAG FÜR BESTEHENDE TSV-MITGLIEDER" war schwer zu lesen. Gemessen war
schwer zu lesen (Felix, 31.07.2026). Gemessen war letter-spacing vorher letter-spacing vorher `normal`, also gar keins — nicht zu eng, sondern nicht
`normal`, also gar keins — nicht zu eng eingestellt, sondern nicht gesetzt. */ gesetzt. --ls-heading (0,4px bei 34px), NICHT --ls-caps: mit 0.08em wirkte die
letter-spacing: var(--ls-caps); Überschrift auseinandergezogen (Felix, 31.07.2026). */
letter-spacing: var(--ls-heading);
line-height: var(--lh-heading); line-height: var(--lh-heading);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
} }

View File

@@ -72,6 +72,12 @@
/* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px /* Sperrung. Coolvetica ist Condensed und hat nur einen Schnitt: unter 28px
wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen wird es in Uppercase unleserlich (siehe CLAUDE.md). Kleinere Auszeichnungen
laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */ laufen deshalb über --ff-body + uppercase + --ls-caps statt --ff-heading. */
--ls-heading: 0.012em; /* Coolvetica-Überschriften unter ~40px: nur ein Hauch Luft
zwischen den Versalien (0,4px bei 34px). Der Schnitt ist
condensed, ohne Sperrung kleben die Buchstaben — mit
--ls-caps (0.08em) wirkt eine Überschrift dagegen
auseinandergezogen. Nicht für kleine Labels, dafür
--ls-caps/--ls-wide. */
--ls-tight: 0.03em; /* dezente Straffung in Fließtext-Größen */ --ls-tight: 0.03em; /* dezente Straffung in Fließtext-Größen */
--ls-caps: 0.08em; /* Standard für gesperrte Uppercase-Auszeichnungen */ --ls-caps: 0.08em; /* Standard für gesperrte Uppercase-Auszeichnungen */
--ls-wide: 0.12em; /* kleine Labels, Meta-Zeilen */ --ls-wide: 0.12em; /* kleine Labels, Meta-Zeilen */