3defacto Frontend-System / Styleguide
data-site

Schrift

TheSans SCd von LucasFonts, selbst gehostet, kein externer Request. Eine Familie, drei Gewichte, keine zweite Schrift und keine Breitenachse. Die Größenleiter steht auf der Tokens-Seite; diese Seite zeigt, woraus sie gesetzt ist.

Fünf Schnitte, zehn Dateien

Gekauft ist die ganze Familie, von ExtraLight (2) bis Black (9), je aufrecht und kursiv. Ausgeliefert werden die fünf Schnitte, die das System benutzt. Die Nummer des Schnitts ist nicht das CSS-Gewicht: Die Familie zählt ihre Schnitte selbst, das System kennt nur 400, 500 und 700. Die Zuordnung steht in src/styles/tokens.css, die Ableitung nach public/fonts in scripts/build-assets.mjs.

Seit dem 28.09.2026 ist jeder Schnitt subsettet, mit Freigabe von LucasFonts. -latin ist der Kern mit rund 33 KB: Latin-1, die deutsche und westeuropäische Typografie, € und die technischen Zeichen. -ext trägt den Rest der Familie, von Latin Extended bis Vietnamesisch, und wird nur geladen, wenn ein Zeichen daraus auf der Seite steht. Kein Zeichen geht verloren. Eine Seite in 400, 500 und 700 lädt rund 98 KB statt 300 KB.

CSSSchnitt der FamilieDateiWofür
400 5 Plain thesans-scd-5-plain-latin.woff2
thesans-scd-5-plain-ext.woff2
Fließtext, Lesetext, Vorspann
400 kursiv 5 Plain Italic thesans-scd-5-plain-italic-latin.woff2
thesans-scd-5-plain-italic-ext.woff2
Auszeichnung im Rich Text
500 6 SemiBold thesans-scd-6-semibold-latin.woff2
thesans-scd-6-semibold-ext.woff2
Navigation, Labels, Meta, Band
700 8 ExtraBold thesans-scd-8-extrabold-latin.woff2
thesans-scd-8-extrabold-ext.woff2
Alle Überschriften, Kennzahlen, Buttons
700 kursiv 8 ExtraBold Italic thesans-scd-8-extrabold-italic-latin.woff2
thesans-scd-8-extrabold-italic-ext.woff2
Auszeichnung im Rich Text

Für 700 steht ExtraBold, nicht Bold: Der Bold (7) dieser Familie ist so gezeichnet, dass ein Sektionskopf gegen seinen eigenen Vorspann nicht durchbricht. Für 500 steht SemiBold, weil SemiLight (4) neben Plain nicht als eigene Stufe zu erkennen wäre. Beide Kursivschnitte lädt der Browser erst, wenn eine Seite sie braucht – im ganzen Prototyp steht Kursivsatz dreimal.

Drei Gewichte

Hierarchie entsteht aus Größe und Gewicht, nicht aus Breite und nicht aus Kursivsatz. Dieselbe Zeile, dieselbe Größe, drei Gewichte.

400 · Plain

Von der Idee zur laufenden Anlage. Einfach. Sicher.

500 · SemiBold

Von der Idee zur laufenden Anlage. Einfach. Sicher.

700 · ExtraBold

Von der Idee zur laufenden Anlage. Einfach. Sicher.

Das kleine Ende

Die drei untersten Stufen der Leiter, links auf Papier, rechts auf Tiefanthrazit. Der Fuß der Website steht auf Tiefanthrazit, und helle Schrift auf dunklem Grund wirkt dünner als dunkle auf hellem – wenn eine Größe irgendwo kippt, dann rechts.

14px --text-meta

Datum, Kategorie, Bildunterschrift, Legende, Band, Fußnote

20. August 2026 · Projekt · Werksvorabnahme im Technikum

20. August 2026 · Projekt · Werksvorabnahme im Technikum

20. August 2026 · Projekt · Werksvorabnahme im Technikum

20. August 2026 · Projekt · Werksvorabnahme im Technikum

16px --text-small

Bedienoberfläche: Navigation, Formularlabel, Tabellenzellen, Linklisten

Garantierte Service-Rückmeldung innerhalb von vier Stunden, Festpreis auf Lastenheftbasis.

Garantierte Service-Rückmeldung innerhalb von vier Stunden, Festpreis auf Lastenheftbasis.

Garantierte Service-Rückmeldung innerhalb von vier Stunden, Festpreis auf Lastenheftbasis.

Garantierte Service-Rückmeldung innerhalb von vier Stunden, Festpreis auf Lastenheftbasis.

18px --text-body

Fließtext in Karten, Kacheln, Tafeln und Registern

Rüstfreiheit von 15 bis 58 Zoll, ±0,1 bar Befülltoleranz bei bis zu 9 bar, 30 bis 80 Sekunden Taktzeit je Komplettrad.

Rüstfreiheit von 15 bis 58 Zoll, ±0,1 bar Befülltoleranz bei bis zu 9 bar, 30 bis 80 Sekunden Taktzeit je Komplettrad.

Rüstfreiheit von 15 bis 58 Zoll, ±0,1 bar Befülltoleranz bei bis zu 9 bar, 30 bis 80 Sekunden Taktzeit je Komplettrad.

Rüstfreiheit von 15 bis 58 Zoll, ±0,1 bar Befülltoleranz bei bis zu 9 bar, 30 bis 80 Sekunden Taktzeit je Komplettrad.

Versalien, Kürzel und Ziffern

Die drei Stellen, an denen eine SemiCondensed am ehesten eng wird: gesperrter Versalsatz am Button (13px), die Kürzel der Geschäftsbereiche im laufenden Text, und Tabellenziffern in Maßangaben. Die Sperrung steht im Token, nicht am Element.

Projekt besprechenUnterlagen anfordern

EDS, IPS und WAM arbeiten auf einer Fertigungs- und Softwarebasis. NEXUS liefert die OEE live, für alle 3defacto-Anlagen ab Baujahr 2018.

15–58 Zoll · ±0,1 bar bei 9 bar · 30–80 s Taktzeit · 4 h Rückmeldung · seit 2000 · 85+ Mitarbeitende

Zeichen je Zeile

Die CSS-Einheit ch misst die Ziffer Null, nicht ein Zeichen. In TheSans SCd steht die Null auf 0,540 em, ein durchschnittliches deutsches Zeichen auf --char. Wer eine Breite in Zeichen meint, schreibt calc(N * var(--char)). Die Linien zeigen, wo 40, 55 und 68 Zeichen enden – 68 ist die Obergrenze für Fließtext.

40 Zeichen · Spalte in der Karte, Kachel, Tafel

NEXUS zeigt die OEE live, meldet Warnungen und plant die Wartung vorausschauend. Der Fernzugriff läuft über ein ISO-zertifiziertes VPN.

55 Zeichen · Vorspann unter der Überschrift

NEXUS zeigt die OEE live, meldet Warnungen und plant die Wartung vorausschauend. Der Fernzugriff läuft über ein ISO-zertifiziertes VPN.

68 Zeichen · Obergrenze für Fließtext

NEXUS zeigt die OEE live, meldet Warnungen und plant die Wartung vorausschauend. Der Fernzugriff läuft über ein ISO-zertifiziertes VPN.