InsurMe shared/typography-showcase
← Galerie
Design system · Typografie

Schweizer Typografie

Wie InsurMe Schrift, Zahlen und Zeichensetzung behandelt — basierend auf der Tradition Schweizer Grafik (Helvetica, Akzidenz-Grotesk, das Bauhaus-Erbe in Basel und Zürich).

Schriftfamilie

System-Fallback-Stack mit Helvetica Neue an erster Stelle. Keine Web-Fonts in MVP — die Performance bleibt schweizerisch ehrlich.

CSS-Variable --font-sans
"Helvetica Neue", "Helvetica", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

«Eine gute Versicherung ist wie eine gute Wohnung: man bemerkt sie erst, wenn etwas nicht funktioniert.»

Vollkasko
Helvetica Neue — neutraler, geometrischer Charakter, ideal für lange deutsche Komposita.
Vollkasko
Serif-Schriften wirken im Schweizer Kontext nostalgisch — vermeiden bei Finanz-/Versicherungs-UI.

Skala

Acht Stufen, jede ein klares Sprung, keine Zwischenwerte. Mobile reduziert Display und H1 — der Rest bleibt.

display 56/60Ihre Versicherung.
h1 40/48Empfehlungen
h2 28/36SmartDrive Plus
h3 20/28Was Sie bekommen
h4 17/24Bonus-Malus Stufe
body 16/24Helvetia rechnet diese Doppelung heraus, dafür ist Glasbruch standardmässig eingeschlossen.
small 14/20CHF 41 / Mt. gespart · Coverage Score 82
micro 12/16Stand 27. Mai 2026

Zahlen — tabellarisch, ausgerichtet

Schweizer Tradition: Ziffern haben gleiche Breite (tnum), damit Frankenbeträge in Spalten exakt fluchten. Apostroph als Tausendertrennzeichen, Punkt als Dezimal.

Klein
CHF 98.00
Mittel
CHF 1'840.00
Gross
CHF 24'316.50
Sehr gross
CHF 100'000'000
CHF      98.00
CHF   1'240.50
CHF     112.00
CHF  24'316.50
Apostroph 1'000 · Punkt für Dezimal · tnum-Ziffern fluchten.
CHF 98,00
CHF 1.240,50
CHF 112,00
CHF 24.316,50
Deutsche oder US-Konvention (Punkt/Komma) verwirrt Schweizer Leser. Niemals mischen.

Kein Eszett (ß) — immer Doppel-s

Die Schweiz hat das Eszett offiziell 1938 aus dem Schulalphabet entfernt. In professionellen Schweizer Texten wird nie ß verwendet — es signalisiert Deutschland oder Österreich und wirkt fehlerhaft.

Strasse
ausschliesslich
gemäss Gesetz
Fussball
dass · gross · muss
Straße
ausschließlich
gemäß Gesetz
Fußball
daß · groß · muß

Anführungszeichen — Guillemets «…»

Der offizielle Schweizer Stil verwendet französische Guillemets mit Spitzen nach aussen. Niemals deutsche Anführungszeichen („…") oder US-Quotes ("…").

« »
Primär
Französische Guillemets · Spitzen nach aussen · mit non-breaking space innen
‹ ›
Innerhalb eines Zitats
Einzel-Guillemets für verschachtelte Zitate
" "
Nicht verwenden
Gerade Quotes sind ASCII-Notbehelf — nie in Endprodukten.
Beispiel im Kontext

Sandra fragte: «Würde das auch in Italien gelten?» — Der Berater zitierte die AVB: «Geltungsbereich: ‹EU und EFTA›».

Silbentrennung für deutsche Komposita

Deutsche zusammengesetzte Substantive sind lang. hyphens: auto mit korrektem lang="de-CH" aktiviert die Schweizer Trennregeln des Browsers.

Die Motorfahrzeug-Haftpflichtversicherung deckt Schäden gegenüber Dritten, einschliesslich Personenschäden und Sachschäden, im gesetzlich vorgesehenen Rahmen.
Die Motorfahrzeug-Haftpflichtversicherung deckt Schäden gegenüber Dritten, einschliesslich Personenschäden und Sachschäden, im gesetzlich vorgesehenen Rahmen.

Datums- und Zeitformate

ISO 8601 intern, Punkt-Format für Anzeige. Niemals US-Format MM/DD.

Lang
27. Mai 2026
Kurz
27.05.2026
ISO (intern)
2026-05-27
Uhrzeit
14:32
Relativ
vor 14 Min.
Frist
in 67 Tagen

Mehrsprachigkeit

InsurMe ist viersprachig konzipiert. Deutsch ist die Standardsprache des MVP, mit Französisch und Italienisch in Phase 1/2. Englisch nur für administrative und API-Oberflächen.

Sprachprioritäten

Jede Schweizer Versicherungs-Sprache wird gleichwertig behandelt — niemals Übersetzungen automatisch generiert.

DE-CH · Deutschschweizer Standard · 64% Marktanteil · Phase 1 Tag 1 FR-CH · Suisse romande · 22% · Phase 1 (Tag 90) IT-CH · Svizzera italiana · 8% · Phase 2 EN · Admin / API · keine Konsumenten-UI
Sprachumschalter (im Topbar jeder Seite)
DE FR IT
Aktive Sprache wird im Pillen-Pattern hervorgehoben — keine Flagge (Sprache ≠ Nationalität)

Implementierung

Drei CSS-Variablen + zwei HTML-Konventionen — das ist alles.

tokens.css
--font-sans: "Helvetica Neue", "Helvetica", "Inter", ui-sans-serif, ...;
--font-features-num: "tnum" 1, "lnum" 1;
--font-features-body: "kern" 1, "liga" 1;
In jedem HTML
<html lang="de-CH">
  ...
  Sandra fragte: <q>Würde das auch in Italien gelten?</q>
  CHF 1'840.00 / Jahr
Voilà

Sandra fragte: Würde das auch in Italien gelten? Ihre Jahresprämie beträgt CHF 1'840.00.