Typografie in Windows-Apps

Als visuelle Darstellung von Sprache besteht die Standard Aufgabe der Typografie darin, Informationen zu kommunizieren. 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.

Schriftart

Sie sollten eine Schriftart auf der gesamten Benutzeroberfläche Ihrer App verwenden, und es wird empfohlen, die Standardschriftart für Windows-Apps, Segoe UI Variable, zu verwenden. 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 Ihre Benutzeroberfläche aus.

Mischen Sie nicht mehrere Schriftarten.

Achsen variabler Schriftarten

Die Schriftart Segoe UI Variable enthält zwei Achsen für eine präzisere Textsteuerung. Diese Schriftart hat eine Gewichtungsachse (wght) mit Gewichtungen von Dünn (100) bis Fett (700). Es hat auch eine optische Größenachse (opsz) für die optische Skalierung von 8pt bis 36pt. Wenn Sie allgemeine XAML-Steuerelemente verwenden, 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. Wenn Sie HTML verwenden, erfolgt die optische Skalierung ebenfalls automatisch, aber Sie müssen 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.

Befolgen Sie die Größe der Windows-Typrampe .

Verwenden Sie keinen Schriftgrad, der kleiner als 12 px ist.

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 der Anleitung zur Verwendung der XAML-Typrampe .

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

Behalten Sie 50 bis 60 Buchstaben pro Zeile bei, 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.

Beschnitt und Ellipsen

Wenn die Textmenge über den verfügbaren Speicherplatz hinausgeht, empfehlen wir, den Text zu beschneiden und Auslassungspunkte [...] einzufügen. Dies ist das Standardverhalten der meisten UWP-Textsteuerelemente.

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

Text ausschneiden und umbrechen, wenn mehrere Zeilen aktiviert sind.

Verwenden Sie keine Auslassungspunkte, um visuelle Unordnung 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.

Sprachen

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

Globalisierung/Lokalisierung von Schriftarten

Verwenden Sie die LanguageFont-Schriftartenersetzungs-APIs für den programmgesteuerten Zugriff auf die Empfohlenen Einstellungen für Familie, Grad, Breite und Schnitt der Schriftart für eine spezielle Sprache. Das LanguageFont-Objekt ermöglicht den Zugriff auf die richtigen Schriftartinformationen für verschiedene Inhaltskategorien: UI-Kopfzeilen, Benachrichtigungen, Textkörper und Schriftarten für den Textkörper, die vom Benutzer bearbeitet werden können. Weitere Informationen finden Sie unter Anpassen von Layout und Schriftarten zur Globalisierungsunterstützung.

Schriftarten für nicht lateinische Sprachen

Schriftfamilie	Stile	Hinweise
Ebrima	Normal, fett	Schriftart der Benutzeroberfläche für afrikanische Skripts (ADLaM, Ethiopic, N'Ko, Osmanya, Tifinagh, Vai).
Gadugi	Normal, fett	Schriftart der Benutzeroberfläche für nordamerikanische Skripts (Canadian Syllabics, Cherokee, Osage).
Leelawadee UI	Normal, Semilight, fett	Schriftart der Benutzeroberfläche für südostasiatische Skripts (Buginese, Khmer, Lao, Thai).
Malgun Gothic	Regular	Benutzeroberflächen-Schriftart für Koreanisch.
Microsoft JhengHei UI	Normal, fett, Light	Benutzeroberflächen-Schriftart für Chinesisch (traditionell).
Microsoft YaHei UI	Normal, fett, Light	Benutzeroberflächen-Schriftart für Chinesisch (vereinfacht).
Myanmar Text	Regular	Fallbackschriftart für die Myanmar-Schrift.
Nirmala UI	Normal, Semilight, fett	Schriftart der Benutzeroberfläche für südasiatische Skripts (Bangla, Chakma, Devanagari, Gujarati, Gurmukhi, Kannada, Malayalam, Meetei Mayek, Odia, Ol Chiki, Sinhala, Sora Sompeng, Tamil, Telugu).
Segoe UI	Normal, kursiv, Light kursiv, Black kursiv, fett, fett kursiv, Light, Semilight, Semibold, Black	Benutzeroberflächenschriftart für Arabisch, Armenisch, Georgisch und Hebräisch.
SimSun	Regular	Eine ältere chinesische UI-Schriftart.
Yu Gothic UI	Light, Semilight, normal, Semibold, fett	Benutzeroberflächen-Schriftart für Japanisch.

Fonts

Serifenlose Schriftarten

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

Schriftfamilie	Stile	Hinweise
Arial	Normal, kursiv, fett, fett kursiv, schwarz	Unterstützt europäische und nahöstliche Schriften (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch und Hebräisch). Die Schwarze Gewichtung unterstützt nur europäische Skripts.
Calibri	Normal, kursiv, fett, fett kursiv, dünn, dünn kursiv	Unterstützung für europäische und nahöstliche Schriften (Lateinisch, Griechisch, Kyrillisch, Arabisch und Hebräisch). Arabisch nur in gerader Schrift verfügbar.
Consolas	Normal, kursiv, fett, fett kursiv	Schriftart mit fester Breite mit Unterstützung für europäische Schriften (Lateinisch, Griechisch und Kyrillisch).
Segoe UI	Normal, kursiv, Light kursiv, Black kursiv, fett, fett kursiv, Light, Semilight, Semibold, Black	Benutzeroberflächen-Schriftart für europäische und nahöstliche Schriften (Arabisch, Armenisch, Kyrillisch, Georgisch, Griechisch, Hebräisch, Lateinisch) und auch Lisu-Schrift.
Selawik	Normal, Semilight, Light, fett, Semibold	Eine Open-Source-Schriftart, die mit der Segoe-Benutzeroberfläche metrisch kompatibel ist und für Apps auf anderen Plattformen vorgesehen ist, die keine Segoe-Benutzeroberfläche bündeln möchten. Holen Sie sich Selawik auf GitHub.

Serifenschriftarten

Mit Serifenschriftarten lassen sich größere Textmengen gut darstellen.

Schriftfamilie	Stile	Hinweise
Cambria	Regular	Serifenschriftart mit Unterstützung für europäischen Schriften (Lateinisch, Griechisch, Kyrillisch).
Courier New	Normal, kursiv, fett, fett kursiv	Serifen mit fester Breite, die europäische und nahöstliche Skripts unterstützt (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch und Hebräisch).
Georgien	Normal, kursiv, fett, fett kursiv	Unterstützung für europäische Schriften (Lateinisch, Griechisch und Kyrillisch).
Times New Roman	Normal, kursiv, fett, fett kursiv	Ältere Schriftart mit Unterstützung für europäische Schriften (Lateinisch, Griechisch, Kyrillisch, Arabisch, Armenisch, Hebräisch).

Variable Schriftarten

Variable Schriftarten eignen sich gut, um die Darstellung von Text präzise zu steuern.

Schriftfamilie	Achsen	Hinweise
Bahnschrift	Gewicht, 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

Schriftfamilie	Stile	Hinweise
Segoe MDL2-Ressourcen	Regular	Benutzeroberflächen-Schriftart für App-Symbole. Weitere Informationen finden Sie im Artikel Segoe MDL2-Ressourcen .
Segoe UI-Emoji	Regular	Schriftart der Benutzeroberfläche für Emoji.
Segoe UI Symbol	Regular	Fallbackschriftart für Symbole.

Verwandte Artikel

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