Styles Typography
Standardschrift ist 'Fira Sans'.
Schriftgrössen
Die Basis für die Desktopschrift ist 16px. Das entspricht 1rem in der Spationierung.
Desktop
| Name | rem | px | |
|---|---|---|---|
H1 headline |
2.25 | 36 | bold |
H2 headline |
1.5 | 24 | bold |
H3 headline |
1.25 | 20 | bold |
| body | 1 | 16 | regular |
| context copy | 0.875 | 14 | regular |
| small copy | 0.75 | 12 | regular |
Mobile
| Name | rem | px | |
|---|---|---|---|
H1 headline |
1.5 | 24 | bold |
H2 headline |
1.25 | 18 | bold |
| body | 0.75 | 12 | regular |
| context copy | 0.625 | 10 | regular |
| small copy | 0.625 | 10 | regular |
Zeilenhöhe
„Text“ Die Zeilenhöhe richtet sich nach der Größe der Schrift selbst. Die ideale Zeilenhöhe für Standardtext hat ein Verhältnis von 1:1,5 (Schriftgrad: Zeilenhöhe). Ein Text mit 16px/1rem hätte beispielsweise eine Zeilenhöhe von 1.5rem/24px (16 x 1.5). Eine Ausnahme bilden Überschriften, die weniger Abstand benötigen und daher ein Ratio von 1:1,25 haben.
| Zeilenhöhe | Ratio |
|---|---|
| Standard Text | 1:1.5 |
| Headers | 1:1.25 |
base font size: 16px
base line hight: 24 px
Mobile
Die Größe der Standardschrift für die mobile Ansicht beträgt 12px anstatt der 16px bei der Desktop-Ansicht.
Die Textgröße bei der Überschrift H1 wird von 36px auf 24px verkleinert.
Die Textgröße bei der Überschrift H2 wird von 24px auf 18px verkleinert.
Die beiden kleinsten Schriftgrößen werden zusammen auf 10px festgelegt.
Weitere Hinweise
- Bitte verwenden Sie ausschließlich die beiden definierten Headergrößen (H1, H2), die Standardtextgröße (Body, P) und die beiden kleinen Textvarianten.
- Verwenden Sie sie maximal 75 Zeichen pro Zeile. Eine Zeile sollte in den 7 Spalten (2/3 der Seite) passen.
- Die Auszeichnung Bold für Standardtext sollte sparsam verwendet werden. Nur bei wichtigen Textpassagen.
- Kursive Schrift sollte niemals verwendet werden.
- Schrift sollte niemals IN GROSSBUCHSTABEN GESCHRIEBEN werden.
- Be responsive: verwende die Schriftgrößen für Desktop- und Mobile-Ansichten.
- Gehe sparsam mit Farben um. Schwarz auf Weiß ist am besten zu lesen.
- Wenn Farben verwendet werden, muss ein genügend hoher Kontrast gewährleistet sein. Die vordefinierten Standardfarben erfüllen diese Eigenschaft.
- Text muss "atmen können". Achte auf genügend Whitespace um Text herum. Dies wird durch korrekte Spationierung gewährleistet.
- Whitespace sollte immer anderen graphischen Elementen wie Linien oder Rechtecken (Boxen) bevorzugt werden um ein leichtgewichtiges, klares Layout zu erreichen. Der Schwerpunkt des Layouts sollte immer auf dem Textinhalt liegen.
- Seiten sollten immer klar gegliedert sein. Nutze Header, Body, Footer, H1, H2 und P. Wenn die zwei Überschriften nicht ausreichen, ist die Struktur zu kompliziert. Sie sollte in mehrere Seiten oder Tabs unterteilt werden.
-
Benutze echte, smarte Anführungszeichen und Satzzeichen.
Also nicht "Lorem Ipsum" sondern „Lorem Ipsum“ Geht's noch? sondern Geht’s noch? 'Einfach' sondern ‚Einfach‘.Falsch Richtig mit Beispiel "Lorem Ipsum" double quotes
code Bsp.:<span class="double-quotes">double quotes</span>
css class:double-quotes
HTML:”double quote“Geht's noch? Gehts noch?
code Bsp.:Geht<span class="single-quote"></span>s noch?
css class:single-quote
HTML: Geht’s noch?'Einfach' single quotes
code Bsp.:<span class="single-quotes">single quotes</span>
css class:single-quotes
HTML:‚single-quote‘Für technische Angaben wie beispielsweise Breite und Länge: 40° 44′ 54.3588″ N, 73° 59′ 8.3616″ W Dieses Zeichen wird in der Typografie als Prime bezeichnet. Sie können einzeln, doppelt, dreifach oder vierfach vorkommen: ′ ′′ ′′′ ′′′′
Name Code Beispiel () Minutenzeichen 40° 44 xxxx
code Bsp.:40° 44<span class="minute-quote"></span> xxxx
css class:minute-quote
HTML:″oder′() Sekundenzeichen xxxx 54.3588
code Bsp.:xxxx 54.3588<span class="second-quote"></span>
css class:second-quote
HTML:′oder″′