Design: UI Text-Styles

Allgemein

• Alle Textformatierungen, die in einem UI-Design angewendet werden können MÜSSEN als zentral verwaltete Text-Styles definiert und angelegt werden.
• Unter einem Text-Style werden alle Eigenschaften einer Textformatierung gespeichert (u.A. Schriftart, -schnitt und Zeilenabstand).

Schriftgrößen

• Es MUSS für ein UI-Design eine globale Auswahl an Schriftgrößen, zugeordnet zu den Tailwind CSS-Klassen, definiert werden
  • xs
  • sm
  • tiny
  • base ( = default)
  • lg
  • xl
  • 2xl
  • 3xl
  • 4xl
  • 5xl
• Wenn das Design mit wenigen verschiedenen Schriftgrößen auskommt MÜSSEN NICHT alle Klassen definiert werden
• Die Schriftgrößen SOLLTEN bereits zu Beginn in einer Tabelle definiert werden. Spätestens bei der Reinzeichnung MUSS die Tabelle angelegt werden. Bei Änderungen im Gestaltungsprozess MUSS die Tabelle aktualisiert werden
• Nicht in der Tabelle definierte Schriftgrößen DÜRFEN NICHT in der Gestaltung verwendet werden

Hinweis: Diese Schriftgrößen lassen sich durch die Entwickler leicht in Tailwind CSS übersetzen.

Naming

Prinzip

Wie benenne ich Text-Styles?

Die Namen von Text-Styles setzen sich zusammen aus:

1. der Hierarchie des Textes (H1-6, p und in Anlehnung an das Material Design Type system)
2. der Schriftgröße (nach Tailwind Klassen)
3. dem Schriftschnitt

→ Hierarchie - Schriftgröße - Schriftschnitt

Hierarchie

Hinweis: Damit die Entwickler erkennen, an welcher Stelle Überschriften und Paragraphen eingesetzt werden sollen, sollen teilweise zwei identische Text-Styles mit unterschiedlichen Namen erstellt werden. Dabei handelt es sich um h1-h6 und p. Diese werden in ihrem Erscheinungsbild definiert und parallel unter dem Namen headline1-headline6 und body gespeichert. Ändert sich einer der beiden Text-Styles, muss der andere ebenfalls entsprechend geändert werden.
H1-h6 und p dürfen nur an den Stellen im Design verwendet werden, an denen tatsächlich eine Überschrift stehen soll.

Schriftgröße

In Tailwind werden folgende Font Size Klassen definiert:

• xs
• sm
• tiny
• base ( = default)
• lg
• xl
• 2xl
• 3xl
• 4xl
• 5xl

Schriftschnitt

Die möglichen Schriftschnitte hängen von der jeweiligen Font ab. Das können zum Beispiel diese sein:

• ultra-thin
• thin
• ultra-light
• extra-light
• light
• semi-light
• book
• regular
• medium
• semi-bold
• bold
• extra-bold
• heavy
• ultra-bold
• black
• extra-black
• ultra-black
• ultra-heavy

Beispiele

→ Textart - Größe - Schriftschnitt

• h1-4xl-bold und headline1-4xl-bold
• p-base-regular und body-base-regular
• caption-sm-regular-italic
• button-base-medium