Schriftakkord
Maj 712-tet
01 / Farbthemen
Vier Stimmungen, ein System
Jedes Thema definiert dieselben sechs Rollen (Primär, Erfolg, Warnung, Gefahr, Info, Neutral) sowie vier Hintergrundebenen. Aktiviere ein Thema, um die gesamte Seite umzustellen — alle Module reagieren über CSS-Variablen.
02 / Schrift
Eine gestimmte Skala
Die Schriftgrößen folgen einem temperierten Akkord; Zeilenhöhen rasten auf der vertikalen Rhythmuseinheit ein. Die x-Höhen aller drei Schriften sind nach DIN 1450 auf eine gemeinsame Basis angeglichen.
Skala mit Akkordton-Bezug
root +12
2.0000 rem
32 px
7th
1.8877 rem
30,20 px
5th
1.4983 rem
23,97 px
3rd+1
1.2599 rem
20,16 px
root
1.0000 rem
16 px
7th+2
0.9439 rem
15,10 px
3rd−1
0.6300 rem
10,08 px
Barlow · Sans
Lauftext, Überschriften, Buttons. Geometrisch, mit ruhigem Strich, breite Anwendung im gesamten System.
300 · 400 · 500 · 700
Playfair Display · Serif
Aa Ää Bb Gg
Zitate, Schmuckstufen, redaktionelle Akzente. Sparsam einsetzen, meist italic.
400 italic · 700
Noto Sans Mono
AA ÄÄ BG
Metadaten, Labels, Kicker, Captions. Trägt die Strukturebene der Seite — immer Versalien, Letterspacing 0,04 em.
400
03 / Farbe
Sechs Rollen, vier Ebenen
Sechs semantische Rollen werden je Thema neu gestimmt. Vier Hintergrundebenen stapeln Tiefe — von blickdichtem Grund bis zur transluzenten Surface. Klicke auf eine Kachel, um den Hex-Wert zu kopieren.
Hintergrund 1
--ds-bg-1
Hintergrund 2
--ds-bg-2
Surface
--ds-surface
Surface stark
--theme-surface-strong
04 / Raster
Vertikaler Rhythmus, acht Spalten
Alle Module rasten auf der vertikalen Rhythmuseinheit von 12,49 px ein (n = +3 auf der Akkordskala, Bezug: Augmented). Horizontal: acht Spalten, Rinne dreimal, Außensteg zweimal so breit.
Spalte 1 – 8 · Beispielmodul
Eine Überschrift, die das System trägt.
Mehrere Zeilen Lauftext zeigen, wie Body und Heading auf derselben Grundlinie rasten. Der Wechsel zwischen Bündigkeit und Atmung entsteht aus ganzzahligen Vielfachen der Rhythmuseinheit.
2 sp
Schmal · Meta · Marker
6 sp
Breite Spur für Lauftext, Tabellen oder Bildunterschriften. Die Rinne misst dreifach den Rhythmus — verlässlich, ruhig, kein Ratespiel beim Setzen.
01
02
03
04
05
06
07
08
05 / Vokabular
Die redaktionellen Module
Diese wiederkehrenden Bausteine bilden das Vokabular jeder Seite. Kombinationsregeln: harte Linie oben, feine Linie unten; Mono-Labels über serifenlosen Titeln; eine Akzentfarbe pro Modul.
A · Kopfzeile / editorial-header
michaelreichart
Atelier
Internes Verzeichnis · 2026
B · Boxpanel / editorial-panel--boxed
Abschnitt 03
Ein eingerahmter Block
Für markierte Aussagen, Hinweise mit Vorrang oder als erste Treppenstufe einer Liste.
C · Editorial-Liste
01 · Notiz
Erster Punkt
Begleittext, gedämpfte Farbe.
02 · Notiz
Zweiter Punkt
Stets mit feiner Trennlinie.
03 · Notiz
Dritter Punkt
Gleiches Layout, gleiche Atmung.
D · Anker-Liste
Verweise
E · Zitat-Specimen / quote-specimen
Form folgt der Stimmung der Stimme — und sucht ihr Maß im Raster.
F · Medien-Rahmen / media-frame
G · Site-Nav / site-nav NEU
H · Verweisliste / link-list NEU
Werkzeuge
- → Harmonic Type Lab extern
- → Accessibility-Sammlung extern
- → Trainerbook intern
I · Werk-Karte / teaser-card
Editorial-System für ein Theater
06 / Bausteine
Knöpfe, Felder, Hinweise
Die operativen Bausteine: Buttons in drei Hierarchien, ein Eingabeformular mit Validierung, Hinweise in vier semantischen Stufen, Teaser-Karten für Übersichten.
Buttons
min-height 2,75 rem · 2 px Border
Kontaktformular
Hinweise
Hinweis
Stilles Update der Komponenten am 14.05.
Erfolg
Die Migration der Farbtokens ist abgeschlossen.
Warnung
Ein paar Seiten verwenden noch die alte Skala.
Gefahr
Bitte die Kontrastwerte im Hochkontrast prüfen.
Teaser-Karten
Editorial-System für ein Theater
07 / Muster
Generative Dekoration
Die Muster sind aus dem System gezeichnet: Lineaturen, Lineale, Hatching, Punktraster, Akkordringe, Wellenstimmen. Sie folgen demselben Maß wie das Raster und nehmen die Akzentfarbe des aktuellen Themas an.
Raster
A · Lineatur
Schraffur
B · 28°
Akkord
C · Augmented
Punkte
D · Matrix
Wellen
E · Stimmen
Schichten
F · Komposit
08 / Rezepte
Vier Seitentypen
Aus denselben Bausteinen entstehen unterschiedliche Seiten. Diese vier Rezepte decken die häufigsten Fälle ab — wechsle, um die Komposition zu sehen.
michaelreichart
Blindtext
Typograf · Kommunikationsdesigner · Web-Entwickler · Trainer
Siehe vollständige Umsetzung: index.html
Verzeichnis · 2024 — 2026
Werke
Auswahl, chronologisch absteigend
Essay · 2026
Über das Maß
Vom temperierten Hören zum gesetzten Wort
Die Schriftgrade dieses Systems sind nicht erfunden, sondern gestimmt. Sie folgen einem Akkord aus der gleichstufigen Stimmung — eine Idee, die der Architektur näher ist als der Typografie, und die doch in beiden gut steht.
Drei Schriften, eine Mittellinie
Barlow, Playfair Display und Noto Sans Mono teilen sich eine gemeinsame x-Höhe. Das macht den Wechsel zwischen ihnen ruhig: die Augen bleiben auf derselben optischen Achse.
Ein System taugt nur, wenn die Ausnahmen leise bleiben.
Der Rhythmus wird vertikal gehalten: jede Zeile, jede Marge ist ein ganzzahliges Vielfaches von 12,49 px.
Kontakt
Schreiben
Direkt · ohne Umweg
Formular
Direkter Weg
Kurz halten — wir melden uns für die Details.