Typografie

Überblick

Die Typografie trägt zum allgemeinen Verständnis der Organisation und des Zwecks von Produkterfahrungen bei. Sie leistet einen Beitrag zur hierarchischen Struktur und zu den ästhetischen Werten, die für verständliche und benutzerfreundliche Benutzeroberflächen notwendig sind.

Diese grundlegenden typografischen Prinzipien werden in Anwendungen unter Verwendung der Jutro-Typografie-Komponente umgesetzt. In der Typografie-Komponente wird eine variant-Eigenschaft verwendet, um den visuellen Stil zu steuern (z. B. heading-1 und body-medium), und eine tag-Eigenschaft, um korrektes semantisches HTML sicherzustellen (z. B. h1 und p).

Diese Leitlinien beschreiben die wichtigsten Attribute der Typografie von Jutro, einschließlich Schriftskala und Schriftstil.

Schriftskala

Jutro bietet zwei unterschiedliche typografische Skalen für unterschiedliche Produktanforderungen: Enterprise und Consumer.

• Enterprise: Verwenden Sie diese typografische Skala für die für Unternehmenszielgruppen konzipierten Anwendungen, die datenintensiv sind und eine hohe Informationsdichte erfordern.
• Consumer: Verwenden Sie diese typografische Skala für digitale Produkte, die sich an eine allgemeine externe Kundenzielgruppe richten.

Grundlage für diese Skalen ist das 8-Punkt-Rastersystem. Die Jutro-Schriftskala basiert auf 4er-Intervallen, wie folgt: 12, (14), 16, 20, 24, 28, 32, 36 und 40. Die Größe 14px ist eine Ausnahme und wird für zusätzliche Flexibilität als nützlicher Zwischenschritt zwischen 12 und 16 bereitgestellt. Darüber hinaus enthält die Consumer-Skala eine 56px-Option für Kopfzeilen.

Enterprise-Version

Die Standard-Basisgröße beträgt 14 Pixel.

rem	Pixel
0.75rem	Jutro 12
0.875rem	Jutro 14
1rem	Jutro 16
1.25rem	Jutro 20
1.5rem	Jutro 24
2rem	Jutro 32
2.5rem	Jutro 40

Consumer-Version

Die Standard-Basisgröße beträgt 16 Pixel.

rem	Pixel
0.75rem	Jutro 12
0.875rem	Jutro 14
1rem	Jutro 16
1.25rem	Jutro 20
1.5rem	Jutro 24
2rem	Jutro 32
2.5rem	Jutro 40
3.5rem	Jutro 56

Zeilenhöhe

Jutro bietet zwei Optionen für die Zeilenhöhe: eine zur Verwendung in der Enterprise-Version und eine zur Verwendung in der Consumer-Version. Die Zeilenhöhe der Enterprise-Version ist komprimierter und unterstützt die für Enterprise-Benutzeroberflächen typischen Bildschirmlayouts mit höherer Dichte.

Open-Source-Schrift

Jutro verwendet die Open-Source-Schriftart Source Sans Pro als primäre Schriftart. Source Sans Pro entspricht den Barrierefreiheitsrichtlinien für Webinhalte und passt sich den benutzerdefinierten Schriftarteinstellungen des Browsers an.

Schriftarten

Eine Schriftart kann Variationen in Schnitt und Stärke enthalten, z. B. fett, normal und kursiv. Diese Variationen werden verwendet, um Benutzern Struktur und Bedeutung zu vermitteln. Beispielsweise werden durch fette Schriftarten Überschriften vom Absatztext (Haupttext) unterschieden. Fette Schriftarten können auch innerhalb von Absätzen verwendet werden, um Schlüsselwörter oder Phrasen hervorzuheben. In ähnlicher Weise werden kursive Schriftarten in erster Linie verwendet, um Titel und Namen bestimmter Wörter oder Objekte zu kennzeichnen, sodass sie sich vom umgebenden Satz abheben.

Jutro bietet die folgenden Schriftarten für die allgemeine Verwendung an.

Source Sans Pro Regular

Source Sans Pro Italic

Source Sans Pro Bold

Source Sans Pro Semibold

Source Sans Pro Semibold Italic

Implementierung mit Design-Token

Die Jutro-Typografie basiert auf Design-Token. Diese Token, die Schriftgrößen, Schriftbreiten und Zeilenhöhen definieren, werden in der Typografie-Komponente verwendet, um Konsistenz sicherzustellen. Dieser Ansatz ermöglicht die Anpassung von Themes und typografischen Stilen entsprechend spezifischen Branding-Anforderungen.

Erfahren Sie mehr über das Theming mit Design-Token

Beispiel für einen typografischen Leitfaden

Die folgenden Layoutbeispiele dienen zum Referenzieren der Jutro-Typografie in Anwendungen (Desktop und Mobilgerät):

Desktop

Mobiltelefon

Best Practices

• Behalten Sie eine zweckmäßige und einheitliche typografische Hierarchie bei, die auf der Struktur des Inhalts basiert, einschließlich Elementen wie Überschriften, Zwischenüberschriften, Standardtext (Primärtext) und Beschriftungstext.
• Verwenden Sie eine minimale Anzahl von Schriftgrößen, Schriftbreiten und Farben. In vielen Fällen ist eine einfache Größenhierarchie ausreichend. Dies kann beispielsweise eine Kopfzeilenschriftgröße, eine Standardschriftgröße (primäre Schriftgröße), eine sekundäre Schriftgröße für weniger wichtigen Text und eine tertiäre oder Beschriftungsgröße umfassen.
• Für eine optimale Lesbarkeit sollten Sie eine Zeilenlänge von 60 bis 80 Zeichen verwenden. Die endgültige Zeilenlänge wird durch mehrere Faktoren wie Schriftart, Schriftgröße und Randbreite bestimmt.
• Um die Lesbarkeit und Barrierefreiheit zu gewährleisten, sollten Sie für den primären Haupttext sowie für Texteingaben eine Mindestgröße von 16 Pixel verwenden. Dies sorgt für eine gute Lesbarkeit auf Mobilgeräten und verhindert, dass Eingabefelder im Browser zwangsvergrößert werden.
• Sekundärer Text, der für Elemente wie kleinere Beschriftungen und Bildunterschriften verwendet wird, sollte zwei Größen kleiner sein als primärer Text.
• Passen Sie Schriftgrößen basierend auf der Hauptfunktion der Seite an:
  • Verwenden Sie für textlastige Seiten größere Schriftgrößen, um die Lesbarkeit für Benutzer zu verbessern, die viel Zeit mit dem Lesen verbringen.
  • Für Seiten mit vielen Interaktionen können kleinere Schriftgrößen ausreichend sein und dazu beitragen, Fenster mit vielen Daten optisch zu komprimieren.
• Verwenden Sie größere Schriftgrößen für alles, was auf den ersten Blick erkennbar sein muss.
• Vermeiden Sie die Verwendung von Text in Großbuchstaben oder verwenden Sie ihn sparsam, da dies zu Problemen mit der Lesbarkeit führt.
• Betrachten Sie Designs immer auf einem tatsächlichen Gerät, das von Benutzern vorzugsweise verwendet wird.
• Markieren Sie Schriftgrößen, die auf einem Mobiltelefon zu klein sind, bereits frühzeitig im Designprozess.
• Gestalten Sie die Typografie so, dass sie auch unter suboptimalen Bedingungen lesbar ist.

Text und Ikonografie

Text und Symbole werden häufig kombiniert, um die Übersichtlichkeit zu verbessern und visuellen Kontext zu bieten. Häufige Beispiele für diese Kombination sind:

Aktionen und Navigation

• Links mit Symbolen
• Schaltflächen mit Symbolen
• Seitennavigationselemente (Symbol und Name)
• App-Schnellzugriff (App-Symbol und App-Name)
• Avatar mit Profilnamen

Formularelemente und Datenanzeige

• Beschriftungen für Eingabefelder mit Info-Symbolen
• Tags
• Menüelemente in Dropdown-Menüs mit Mehrfachauswahl
• Suchergebnisse mit Kategoriesymbolen

Status und Feedback

• Inline-Validierungsmeldungen mit Statussymbolen
• Inline-Loader mit Textmeldungen
• Benachrichtigung und Popupmeldungen
• Benachrichtigungs-Badges (Symbol mit Zahl)
• QuickInfos, die an Symbole angefügt sind

Reaktionsfähigkeit und Anpassungsfähigkeit

Die Jutro-Typografie ist anpassungsfähig und bietet eine Vielzahl von Größen, um die Anforderungen von Unternehmens- und Verbraucheranwendungen auf allen Geräten zu erfüllen. Unternehmensanwendungen erfordern beispielsweise eine höhere Datendichte und weisen eine kleinere Typografie auf, die mehr Bildschirmfläche bietet.

Barrierefreiheit

Validiert in Übereinstimmung mit den Barrierefreiheitsrichtlinien WCAG 2.1 AA, die für diese spezielle Komponente gelten. Das bedeutet, dass die Jutro-Typografie:

• ohne eine Maus verwendet werden kann (nur Tastatur)
• mit assistiven Technologien wie Screenreadern, Bildschirmvergrößerungssoftware und Braillezeilen verwendet werden kann.
• verwendet werden kann, ohne sich auf Ton, Farbe, Animation oder Timing zu verlassen.

Best Practices für Barrierefreiheit

• Vermeiden Sie die Änderung von Inhalten, wenn ein Element den Fokus erhält.
• Achten Sie auf eine logische Tastaturnavigationsreihenfolge für alle Textelemente.
• Verwenden Sie formatierten Text nicht als Ersatz für einen Link oder umgekehrt. Screenreader behandeln diese Elemente unterschiedlich, was irreführend sein kann.

Spezifische Richtlinien zur Erstellung barrierefreier Webinhalte finden Sie im Leitfaden zur Verwendung der Typografie-Komponente.