Design-Referenz · iOS

Typografie

Vollständige Auflistung aller Schriften, Größen, Gewichte und Varianten der App „Außendienst 2.0". Die Seite rendert in SF Pro – also exakt der App-Schrift.

1 Familie · SF Pro (System, non-rounded) + SF Mono · Timer & Ziffern 5 Gewichte · 400–800 7 Tokens · ADVAType ~30 Größen · 7–34 pt

Design-Tokens · ADVAType

Die semantischen Rollen aus DesignSystem/Tokens/ADVAType.swift. An System-Textstile gebunden → skalieren mit Dynamic Type.

Außendienst 2.0

.largeTitlelargeTitle · heavy · ~34pt

Besuchsbericht

.titletitle2 · bold · ~22pt · 3×

Nächste Schritte

.headlineheadline · semibold · ~17pt · 18×

Die Verkaufschance wurde korrigiert.

.bodybody · regular · ~17pt · 13×

Adresse oder Ort eingeben

.calloutcallout · regular · ~16pt · 30×

Zusammenfassung

.captioncaption · medium · ~12pt · 28×

02:47

.monofootnote · monospaced · ~13pt

Fixe Punktgrößen

Alle direkt gesetzten .system(size:)-Größen, absteigend. Rechts das typische Gewicht + wo sie vorkommen.

Besuchsbericht

34 · boldBericht-Kopf (→22 beim Scrollen)

Heute

30 · heavyListen-Kopf · Profil-Titel (→19)

Briefing

26 · heavyBriefing-/Detail-Titel

Besuchsdokumentation

25 · heavyGesprächs-Titel

22 · heavyKachel-Anzahl · Profil

20 · heavyBriefing-Kennzahl · Icons (20)

655

19 · heavyProfil-Statwert · Edit-Zähler

Aufgaben

18 · semiboldDetail-Sheet-Titel · Tab-Icon

0/4

17 · heavyDonut-Mitte

Mikrofon

16 · semiboldSuch-Icon · Gespräch · Controls

Bauzentrum Nord GmbH

15 · bold/semibold/heavyListen-Firma · Kachel-Titel · Banner

Budgetfreigabe aktiv vorantreiben

14 · semibold/medium/boldCoaching-Tipp · Kontakte · Icons

Industriestraße 14 · 28195 Bremen

13 · regular…heavyFließtext · Sektion · Legende · Timer(mono)

Anschrift

12.5 · reg/semiboldDetail Key/Value · Datum · Anschrift

Verkaufschancen

12 · bold…regularChips · Labels · Tab-… · Ziffern

Transkript wird ausgewertet.

11.5 · regularGesprächs-Untertitel · Banner-Zeile

Vorbereitung

11 · semibold/boldBadges · kleine Labels

STAMMDATEN

10.5 · bold · +1 trVersal-Sektionslabels

Home

10 · semiboldTab-Bar-Label

✓

9 · boldHäkchen im Timeline-Knoten

freigegeben

7 · semiboldDonut-Sublabel

Gewichte

Fünf Schnitte im Einsatz. Titel/Zahlen tragen Heavy, Fließtext Regular.

Heavy · 800 · Titel, Zahlen

Bold · 700 · Firmen, Kopf

Semibold · 600 · Headline, Labels

Medium · 500 · Caption, Untertitel

Regular · 400 · Body, Callout

Varianten & Modifier

Feineinstellungen, die über Größe/Gewicht hinausgehen.

Tracking (Laufweite)

Heute 655 km

Negativ bei großen Titeln/Zahlen: −0.5 / −0.4 / −0.3 / −0.1. Positiv +1 bei Versal-Labels.

Tabellenziffern

02:47 · 6 Std 48 Min

.monospacedDigit() · 10× · Timer, km/Zeit, Zähler, Statwerte – Ziffern springen nicht.

Kursiv

„Guten Tag, Herr Vogel …"

.italic() · 1× · Beispiel-Zitat in der Coaching-Karte.

Versal-Labels

KONTAKTPERSONEN

Großbuchstaben + Sperrung für Sektionsüberschriften (10.5–11pt bold).

Monospaced

00:00

SF Mono für Gesprächs-Timer (13/12pt bold, mono) – ruhige Ziffernbreite.

Dynamische Kopfzeilen

Besuchsbericht 34→22

Titel schrumpfen beim Scrollen stufenlos: Bericht 34→22, Listen 30→19.

Nach Screen

Wo welche Typo dominiert.

Screen	Kopf	Kern-Typo
Login	largeTitle heavy	body / caption (Namen), headline (Button)
Heute / Listen	30 heavy →19	15 bold (Firma) · 12.5 (Datum/Anschrift) · 12.5 (Etappen)
Donut	17 heavy	13 heavy (Zahl) · 12 (Legende) · 7 (Sublabel)
Briefing	26 heavy	20 heavy (KPI) · 14/13 · 11 bold (Badge)
Besuchsdetail	26 heavy	14 bold · 12.5 · 10.5 bold Versal
Gespräch	25 heavy	16/15 · 13 mono (Timer) · 11.5
Bericht	34 bold →22	22 heavy (Kachel) · 17 body (Zshg.) · 15/14/13
Coaching / Transkript	headline	14 medium (Tipp) · 13 · 13 italic (Zitat)
Profil	30 heavy	22 heavy · 19 heavy (Stat) · 13
Tab-Bar	18 icon	10 semibold (Label)

Quelle: ADVAType.swift (Tokens) + alle .font(.system(size:)) in Packages/ & App/. Punkt = iOS-Point; im Browser 1:1 als px gerendert. Stand: 06.08.2026.