Typografie in Windows-Apps

Typografie muss übersichtlich sein, da sie zur visuellen Darstellung von Sprache dient, um Informationen zu vermitteln. Ihr Stil darf diesem Ziel nie im Wege stehen. In diesem Artikel erläutern wir, wie Sie die Typografie in Ihrer Windows-App formatieren, damit Benutzer Inhalte schnell und effizient verstehen.

Font

Sie sollten eine Schriftart auf der Benutzeroberfläche Ihrer App verwenden, und wir empfehlen, die Standardschriftart für Windows-Apps, Segoe UI Variable, beizubehalten. Sie wurde entwickelt, um eine optimale Lesbarkeit für Größe und Pixeldichte zu wahren, und bietet eine klare, ansprechende und offene Ästhetik, die den Inhalt des Systems ergänzt.

Weitere Informationen zum Anzeigen anderer Sprachen als Englisch oder um eine andere Schriftart für Ihre App auszuwählen finden Sie unter Sprachen und Schriftarten für unsere empfohlenen Schriftarten für Windows-Apps.

Wählen Sie eine Schriftart für die Benutzeroberfläche aus.

Kombinieren Sie nicht mehrere Schriftarten.

Variable Schriftartachsen

Die Schriftart "Segoe UI Variable " enthält zwei Achsen zur feineren Steuerung von Text. Diese Schriftart weist eine Gewichtungsachse (wght) mit Gewichtungen von Thin (100) bis Bold (700) auf. Es verfügt auch über eine optische Größenachse (opsz) für die optische Skalierung von 8 pt auf 36 Pt. Bei Verwendung gängiger XAML-Steuerelemente wird die Schriftart "Segoe UI Variable" standardmäßig für unterstützte Sprachen ausgewählt. Wenn diese Schriftart oder eine andere variable Schriftart mit einer optischen Achse verwendet wird, entspricht die optische Größe automatisch dem angeforderten Schriftgrad. Bei verwendung von HTML ist die optische Skalierung ebenfalls automatisch, Sie müssen jedoch die Schriftart "Segoe UI Variable" in CSS angeben.

Größe und Skalierung

Schriftgrade in UWP-Apps werden automatisch auf allen Geräten skaliert. Mit dem Skalierungsalgorithmus wird sichergestellt, dass der Schriftgrad 24 Pixel auf einem 3 Meter entfernten Surface Hub genauso lesbar ist wie der Schriftgrad 24 Pixel auf einem 5-Zoll-Smartphone, das nur einige Zentimeter entfernt ist.

Aufgrund der Funktionsweise der Skalierung, entwerfen Sie in effektiven Pixeln, nicht in den tatsächlichen physischen Pixeln, und Sie müssen den Schriftgrad für unterschiedliche Bildschirmgrößen und Auflösungen nicht ändern.

Folgen Sie der Windows-Typhierarchiegröße.

Verwenden Sie keinen Schriftgrad kleiner als 12 px.

Hierarchie

Benutzer folgen beim Sichten einer Seite der visuellen Hierarchie: Überschriften fassen Inhalte zusammen, Textkörper enthalten weitere Details. Um eine klare visuelle Hierarchie in Ihrer App zu erstellen, folgen Sie der Windows-Typhierarchie.

Typhierarchie

Die Windows-Typhierarchie stellt wichtige Beziehungen zwischen den Schriftschnitten auf einer Seite her, damit der Benutzer den Inhalt einfach lesen kann. Alle Größen werden in effektiven Pixeln angegeben und sind für UWP-Apps optimiert, die auf allen Geräten ausgeführt werden.

Weitere Informationen finden Sie in den Anleitungen zur Verwendung der XAML-Typhierarchie .

Ausrichtung

Standardmäßig ist das TextAlignment links. In den meisten Fällen sorgt das Konzept „links bündig, rechts mit Flatterrand“ für eine konsistente Verankerung des Inhalts und für ein einheitliches Layout. Weitere Informationen für RTL-Sprachen finden Sie unter Anpassen von Layout und Schriftarten zur Globalisierungsunterstützung.

<TextBlock TextAlignment="Left">

Zeichenanzahl

Halten Sie 50 bis 60 Buchstaben pro Zeile, um das Lesen zu erleichtern.

Verwenden Sie nicht weniger als 20 Zeichen oder mehr als 60 Zeichen pro Zeile, da dies schwer zu lesen ist.

Ausschneiden und Auslassungspunkte

Wenn sich die Textmenge über den verfügbaren Platz erstreckt, empfehlen wir, den Text zu beschneiden und auslassungspunkte [...] einzufügen, was das Standardverhalten der meisten UWP-Textsteuerelemente ist.

<TextBlock TextWrapping="WrapWholeWords" TextTrimming="Clip"/>

Schneiden Sie Text ab, und umbrechen Sie, wenn mehrere Zeilen aktiviert sind.

Verwenden Sie keine Auslassungspunkte, um visuelle Unübersichtlichkeiten zu vermeiden.

Hinweis

Bei Containern, die nicht klar definiert sind (also sich etwa nicht durch eine andere Hintergrundfarbe abheben) oder wenn ein Link zu mehr Text existiert, kann eine Ellipse verwendet werden.

Languages

Segoe UI Variable ist unsere Schriftart für Englisch, europäische Sprachen, Griechisch und Russisch. Lesen Sie die folgenden Empfehlungen für andere Sprachen.

Globalisieren/Lokalisieren von Schriftarten

Verwenden Sie die LanguageFont-Schriftartenzuordnungs-APIs für den programmgesteuerten Zugriff auf die empfohlene Schriftfamilie, Größe, Stärke und Formatvorlage für eine bestimmte Sprache. Das LanguageFont-Objekt bietet Zugriff auf die richtigen Schriftartinformationen für verschiedene Inhaltskategorien, einschließlich UI-Kopfzeilen, Benachrichtigungen, Textkörper und bearbeitbare Schriftarten für Dokumenttexte. Weitere Informationen finden Sie unter Anpassen von Layout und Schriftarten zur Unterstützung der Globalisierung.

Schriftarten für nicht lateinische Sprachen

Schriftfamilie	Stilarten	Hinweise
Ebrima	Normal, fett	Benutzeroberflächenschriftart für afrikanische Schriften (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Normal, fett	Benutzeroberflächenschriftart für Nordamerika n-Skripts (Kanadische Syllabics, Cherokee, Osage).
Leelawadee UI	Normal, Semilight, Fett	Benutzeroberflächenschriftart für südostasiatische Schriften (Buginese, Khmer, Lao, Thailändisch).
Malgun Gothic	Regulär	Benutzeroberflächenschriftart für Koreanisch.
Microsoft JhengHei UI	Normal, fett, hell	Benutzeroberflächenschriftart für traditionelles Chinesisch.
Microsoft YaHei UI	Normal, fett, hell	Benutzeroberflächenschriftart für vereinfachtes Chinesisch.
Myanmar-Text	Regulär	Fallbackschriftart für Myanmar-Skript.
Nirmala UI	Normal, Semilight, Fett	Benutzeroberflächenschriftart für südasiatische Schriften (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI	Normal, kursiv, hell kursiv, schwarz kursiv, fett, kursiv, hell, Semilight, Semibold, Schwarz	Benutzeroberflächenschriftart für Arabisch, Armenisch, Georgisch und Hebräisch.
SimSun	Regulär	Eine ältere chinesische UI-Schriftart.
Yu Gothic UI	Light, Semilight, normal, Semibold, fett	Benutzeroberflächenschriftart für Japanisch.

Schriftarten

Serifenlose Schriftarten

Serifenlose Schriftarten eignen sich hervorragend für Überschriften und UI-Elemente.

Schriftfamilie	Stilarten	Hinweise
Arial	Normal, kursiv, fett, kursiv, schwarz	Unterstützt europäische und mittlere Schriften (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch und Hebräisch). Schwarzes Gewicht unterstützt nur europäische Schriften.
Calibri	Normal, kursiv, fett, kursiv, hell, kursiv	Unterstützt europäische und mittlere Schriften (Lateinisch, Griechisch, Kyrillisch, Arabisch und Hebräisch). Arabisch nur in den Aufrechten verfügbar.
Consolas	Normal, kursiv, fett, kursiv	Schriftart mit fester Breite, die europäische Schriften unterstützt (Lateinisch, Griechisch und Kyrillisch).
Segoe UI	Normal, kursiv, hell kursiv, schwarz kursiv, fett, kursiv, hell, Semilight, Semibold, Schwarz	Benutzeroberflächenschriftart für europäische und mittlere Ostskripte (Arabisch, Armenisch, Kyrillisch, Georgisch, Griechisch, Hebräisch, Latein) und auch Lisu-Schrift.
Selawik	Normal, Semilight, Hell, Fett, Semibold	Eine Open-Source-Schriftart, die metrisch mit der Segoe UI kompatibel ist, die für Apps auf anderen Plattformen vorgesehen ist, die keine Segoe UI bündeln möchten. Laden Sie Selawik über GitHub herunter.

Serifenschriftarten

Serifenschriftarten eignen sich gut für die Darstellung großer Textmengen.

Schriftfamilie	Stilarten	Hinweise
Cambria	Regulär	Serifenschriftart, die europäische Schriften unterstützt (Lateinisch, Griechisch, Kyrillisch).
Courier New	Normal, kursiv, fett, kursiv	Serifenschriftart mit fester Breite, die europäische und mittlere Schriften unterstützt (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch und Hebräisch).
Georgien	Normal, kursiv, fett, kursiv	Unterstützt europäische Schriften (Lateinisch, Griechisch und Kyrillisch).
Times New Roman	Normal, kursiv, fett, kursiv	Ältere Schriftart, die europäische Schriften unterstützt (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch, Hebräisch).

Variable Schriftarten

Variable Schriftarten eignen sich gut für die präzise Steuerung des Erscheinungsbilds von Text.

Schriftfamilie	Achsen	Hinweise
Bahnschrift	Stärke, Breite	Variable Schriftart, die Lateinisch, Griechisch und Kyrillisch unterstützt.
Segoe UI Variable	Gewicht, optische Größe	Variable Schriftart, die Lateinisch, Griechisch und Kyrillisch unterstützt.

Symbole und Symbole

Schriftfamilie	Stilarten	Hinweise
Segoe MDL2 Assets	Regulär	Benutzeroberflächenschriftart für App-Symbole. Weitere Informationen finden Sie im Segoe MDL2-Ressourcenartikel .
Segoe UI Emoji	Regulär	Benutzeroberflächenschriftart für Emoji.
Segoe UI-Symbol	Regulär	Fallbackschriftart für Symbole.

Verwandte Artikel

• Textsteuerelemente
• XAML-Designressourcen
• XAML-Stile
• Microsoft Typografie
• Variable Schriftarten