{"_path":"/guidelines-internal/design-ui-text-sytels","_draft":false,"_partial":false,"_empty":false,"title":"Design: UI Text-Styles","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-text-styles"},"children":[{"type":"text","value":"Design: UI Text-Styles"}]},{"type":"element","tag":"h2","props":{"id":"allgemein"},"children":[{"type":"text","value":"Allgemein"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Textformatierungen, die in einem UI-Design angewendet werden können "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" als zentral verwaltete Text-Styles definiert und angelegt werden."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Unter einem Text-Style werden alle Eigenschaften einer Textformatierung gespeichert (u.A. Schriftart, -schnitt und Zeilenabstand)."}]}]},{"type":"element","tag":"h2","props":{"id":"schriftgrößen"},"children":[{"type":"text","value":"Schriftgrößen"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Es "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" für ein UI-Design eine globale Auswahl an Schriftgrößen, zugeordnet zu den "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/font-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tailwind"}]},{"type":"text","value":" CSS-Klassen, definiert werden"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"tiny"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"base ( = default)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"2xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"5xl"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Wenn das Design mit wenigen verschiedenen Schriftgrößen auskommt "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN NICHT"}]}]},{"type":"text","value":" alle Klassen definiert werden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Die Schriftgrößen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" bereits zu Beginn in einer Tabelle definiert werden. Spätestens bei der Reinzeichnung "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" die Tabelle angelegt werden. Bei Änderungen im Gestaltungsprozess "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" die Tabelle aktualisiert werden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nicht in der Tabelle definierte Schriftgrößen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"DÜRFEN NICHT"}]}]},{"type":"text","value":" in der Gestaltung verwendet werden"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":"\nDiese Schriftgrößen lassen sich durch die Entwickler leicht in Tailwind CSS übersetzen."}]}]},{"type":"element","tag":"h2","props":{"id":"naming"},"children":[{"type":"text","value":"Naming"}]},{"type":"element","tag":"h3","props":{"id":"prinzip"},"children":[{"type":"text","value":"Prinzip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Wie benenne ich Text-Styles?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Namen von Text-Styles setzen sich zusammen aus:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"der Hierarchie des Textes (H1-6, p und in Anlehnung an das Material Design Type system)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"der Schriftgröße (nach Tailwind Klassen)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dem Schriftschnitt"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"→ "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Hierarchie"}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Schriftgröße"}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Schriftschnitt"}]}]},{"type":"element","tag":"h3","props":{"id":"hierarchie"},"children":[{"type":"text","value":"Hierarchie"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Material Design "},{"type":"element","tag":"a","props":{"href":"https://material.io/design/typography/the-type-system.html#type-scale","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Type system"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"HTML"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline3"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline5"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"subtitle1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"subtitle2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"body1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"p"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"body2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"caption"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overline"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":"\nDamit 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."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nH1-h6 und p dürfen nur an den Stellen im Design verwendet werden, an denen tatsächlich eine Überschrift stehen soll."}]}]},{"type":"element","tag":"h3","props":{"id":"schriftgröße"},"children":[{"type":"text","value":"Schriftgröße"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/font-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tailwind"}]},{"type":"text","value":" werden folgende Font Size Klassen definiert:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"tiny"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"base ( = default)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"2xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"5xl"}]}]},{"type":"element","tag":"h3","props":{"id":"schriftschnitt"},"children":[{"type":"text","value":"Schriftschnitt"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die möglichen Schriftschnitte hängen von der jeweiligen Font ab. Das können zum Beispiel diese sein:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-thin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"thin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"semi-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"book"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"regular"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"medium"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"semi-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heavy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-heavy"}]}]},{"type":"element","tag":"h3","props":{"id":"beispiele"},"children":[{"type":"text","value":"Beispiele"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"→ Textart - Größe - Schriftschnitt"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"h1-4xl-bold"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"headline1-4xl-bold"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p-base-regular"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"body-base-regular"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"caption-sm-regular-italic"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"button-base-medium"}]}]}]}]},"public":true,"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"design-ui-text-styles"},"children":[{"type":"text","value":"Design: UI Text-Styles"}]},{"type":"element","tag":"h2","props":{"id":"allgemein"},"children":[{"type":"text","value":"Allgemein"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Alle Textformatierungen, die in einem UI-Design angewendet werden können "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN"}]}]},{"type":"text","value":" als zentral verwaltete Text-Styles definiert und angelegt werden."}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Unter einem Text-Style werden alle Eigenschaften einer Textformatierung gespeichert (u.A. Schriftart, -schnitt und Zeilenabstand)."}]}]},{"type":"element","tag":"h2","props":{"id":"schriftgrößen"},"children":[{"type":"text","value":"Schriftgrößen"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Es "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" für ein UI-Design eine globale Auswahl an Schriftgrößen, zugeordnet zu den "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/font-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tailwind"}]},{"type":"text","value":" CSS-Klassen, definiert werden"},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"tiny"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"base ( = default)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"2xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"5xl"}]}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Wenn das Design mit wenigen verschiedenen Schriftgrößen auskommt "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MÜSSEN NICHT"}]}]},{"type":"text","value":" alle Klassen definiert werden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Die Schriftgrößen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"SOLLTEN"}]}]},{"type":"text","value":" bereits zu Beginn in einer Tabelle definiert werden. Spätestens bei der Reinzeichnung "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" die Tabelle angelegt werden. Bei Änderungen im Gestaltungsprozess "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"MUSS"}]}]},{"type":"text","value":" die Tabelle aktualisiert werden"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"Nicht in der Tabelle definierte Schriftgrößen "},{"type":"element","tag":"em","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"DÜRFEN NICHT"}]}]},{"type":"text","value":" in der Gestaltung verwendet werden"}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":"\nDiese Schriftgrößen lassen sich durch die Entwickler leicht in Tailwind CSS übersetzen."}]}]},{"type":"element","tag":"h2","props":{"id":"naming"},"children":[{"type":"text","value":"Naming"}]},{"type":"element","tag":"h3","props":{"id":"prinzip"},"children":[{"type":"text","value":"Prinzip"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Wie benenne ich Text-Styles?"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die Namen von Text-Styles setzen sich zusammen aus:"}]},{"type":"element","tag":"ol","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"der Hierarchie des Textes (H1-6, p und in Anlehnung an das Material Design Type system)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"der Schriftgröße (nach Tailwind Klassen)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"dem Schriftschnitt"}]}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"→ "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Hierarchie"}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Schriftgröße"}]},{"type":"text","value":" - "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"Schriftschnitt"}]}]},{"type":"element","tag":"h3","props":{"id":"hierarchie"},"children":[{"type":"text","value":"Hierarchie"}]},{"type":"element","tag":"table","props":{},"children":[{"type":"element","tag":"thead","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"Material Design "},{"type":"element","tag":"a","props":{"href":"https://material.io/design/typography/the-type-system.html#type-scale","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Type system"}]}]},{"type":"element","tag":"th","props":{"align":null},"children":[{"type":"text","value":"HTML"}]}]}]},{"type":"element","tag":"tbody","props":{},"children":[{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h1"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h2"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline3"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h3"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline4"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h4"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline5"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h5"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"headline6"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"h6"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"subtitle1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"subtitle2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"body1"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"p"}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"body2"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"button"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"caption"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]},{"type":"element","tag":"tr","props":{},"children":[{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":"overline"}]},{"type":"element","tag":"td","props":{"align":null},"children":[{"type":"text","value":" "}]}]}]}]},{"type":"element","tag":"blockquote","props":{},"children":[{"type":"element","tag":"p","props":{},"children":[{"type":"element","tag":"strong","props":{},"children":[{"type":"text","value":"Hinweis:"}]},{"type":"text","value":"\nDamit 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."},{"type":"element","tag":"br","props":{},"children":[]},{"type":"text","value":"\nH1-h6 und p dürfen nur an den Stellen im Design verwendet werden, an denen tatsächlich eine Überschrift stehen soll."}]}]},{"type":"element","tag":"h3","props":{"id":"schriftgröße"},"children":[{"type":"text","value":"Schriftgröße"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"In "},{"type":"element","tag":"a","props":{"href":"https://tailwindcss.com/docs/font-size","rel":["nofollow","noopener","noreferrer"],"target":"_blank"},"children":[{"type":"text","value":"Tailwind"}]},{"type":"text","value":" werden folgende Font Size Klassen definiert:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xs"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"sm"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"tiny"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"base ( = default)"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"lg"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"2xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"3xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"4xl"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"5xl"}]}]},{"type":"element","tag":"h3","props":{"id":"schriftschnitt"},"children":[{"type":"text","value":"Schriftschnitt"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"Die möglichen Schriftschnitte hängen von der jeweiligen Font ab. Das können zum Beispiel diese sein:"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-thin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"thin"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"semi-light"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"book"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"regular"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"medium"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"semi-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"heavy"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-bold"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"extra-black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-black"}]},{"type":"element","tag":"li","props":{},"children":[{"type":"text","value":"ultra-heavy"}]}]},{"type":"element","tag":"h3","props":{"id":"beispiele"},"children":[{"type":"text","value":"Beispiele"}]},{"type":"element","tag":"p","props":{},"children":[{"type":"text","value":"→ Textart - Größe - Schriftschnitt"}]},{"type":"element","tag":"ul","props":{},"children":[{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"h1-4xl-bold"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"headline1-4xl-bold"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"p-base-regular"}]},{"type":"text","value":" und "},{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"body-base-regular"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"caption-sm-regular-italic"}]}]},{"type":"element","tag":"li","props":{},"children":[{"type":"element","tag":"code-inline","props":{},"children":[{"type":"text","value":"button-base-medium"}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[{"id":"allgemein","depth":2,"text":"Allgemein"},{"id":"schriftgrößen","depth":2,"text":"Schriftgrößen"},{"id":"naming","depth":2,"text":"Naming","children":[{"id":"prinzip","depth":3,"text":"Prinzip"},{"id":"hierarchie","depth":3,"text":"Hierarchie"},{"id":"schriftgröße","depth":3,"text":"Schriftgröße"},{"id":"schriftschnitt","depth":3,"text":"Schriftschnitt"},{"id":"beispiele","depth":3,"text":"Beispiele"}]}]}},"_type":"markdown","_id":"content:06.guidelines-internal:design-ui-text-sytels.md","_source":"content","_file":"06.guidelines-internal/design-ui-text-sytels.md","_extension":"md"}