Mobile: Typografie (Schriftarten) – PAR Ordering Wissensbasis

Kontext

Der zweite Schritt bei der Festlegung des visuellen Stils einer mobilen White Label-Anwendung ist die Auswahl der richtigen Schriftarten.
Wir empfehlen, die Lizenz für die verwendete Schriftart zu kaufen, aber du kannst auch eine ähnliche kostenlose Schriftart aus kostenlosen Bibliotheken wie Google Fonts wählen.

Die Schriftfamilie sollte drei verschiedene Schriftstärken enthalten (z.B. Standard, Halbfett & Fett), damit sie in der gesamten Anwendung richtig eingesetzt werden kann.

Schriftarten decken alle Textelemente der mobilen Benutzeroberfläche ab, z.B. Titel, Call-to-Action-Schaltflächen und alle beschreibenden Texte, die von deinen Kunden verwendet werden, um durch die App zu navigieren. Um mögliche Probleme bei der Lesbarkeit zu vermeiden, solltest du sicherstellen, dass die von dir gewählten Schriftarten gut lesbar sind.

Tipps zur Auswahl der Schriftarten und Formatierung

Überschrift

Verwende diese Schriftart für große Überschriften, die typischerweise am Anfang einer Seite oder als Anfangspunkt eines Abschnitts stehen.

Wähle eine Schriftart mit der von dir bevorzugten Schriftstärke, wir empfehlen jedoch die Schriftart Fett
Schreibweise: Du kannst wählen, ob die Überschriften in Großbuchstaben oder wie ursprünglich geschrieben angezeigt werden sollen

Textkörper/ Fließtext

Am häufigsten verwendeter Stil, normalerweise für alle Texte, die kürzer sind, ganze Sätze, Titel, Links und Absätze.

Wähle eine Schriftart mit der Gewichtung Normal, Halbfett und Fett, da alle drei gebräuchlich sind.

Anforderungen der Schriftart:

Dateiformat: OTF oder TTF
Schriftart für Textkörper Fett, Halbfett und Normal
Zusätzliche Schriftart für Überschriften mit einer Schriftstärke (d.h.: Fett), falls erforderlich (optional)
Lizenz

2.Typography preview (1).jpg

Bitte beachte: Du kannst die Eigenschaften der jeweiligen Schrift wie Schriftgröße, Buchstabenabstand (Kerning), Absatzabstand und Zeilenhöhe nicht ändern.

Farben

Überschriftfarbe

Unser Rat: Sei besonders vorsichtig bei der Wahl der Textfarben. Diese Farbe sollte einen ausreichenden Kontrast zum Hintergrund haben, um lesbar zu sein und die Anforderungen der Barrierefreiheit zu erfüllen. Für die Überschriftfarben empfehlen wir dieselbe Farbe wie im Rest der App - Schwarz, aber du kannst auch eine andere wählen - denk nur daran, dass sie gut sichtbar sein muss:

Große Überschrift
Überschrift

14. Heading Text (1).jpg

Textkörperfarbe

Auch hier gilt der gleiche Ratschlag - denke daran, dass der Textkörper lesbar und für alle zugänglich sein sollte. Außerdem solltest du für den Fließtext eine sehr dunkle Farbe wählen, am besten Schwarz, denn alle anderen Textfarben werden aus dieser dunkelsten Farbe hergestellt. So beträgt der Platzhalter für das Eingabefeld zum Beispiel nur 20% der Textfarbe:

Textkörperfarbe 100%
Textkörperfarbe 80%
Textkörperfarbe 60%
Textkörperfarbe 20%

15. Body Text (1).jpg

Textfarbe der Loyalty-Karte

Bei der Wahl der Textfarbe für deine Loyalty-Karte empfehlen wir Weiß, wenn der Hintergrund dunkel ist, und eine dunklere Farbe, wenn der Hintergrund hell ist.