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.
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
Windows developer
Feedback
https://aka.ms/ContentUserFeedback.
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Tickets als Feedbackmechanismus für Inhalte auslaufen lassen und es durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter:Einreichen und Feedback anzeigen für