Typografie in Windows
Typografie muss übersichtlich sein, da sie zur visuellen Darstellung von Sprache dient, um Informationen zu vermitteln. Mit dem Windows-Typsystem können Sie Struktur und Hierarchie in Ihren Inhalten erstellen, um die Lesbarkeit und Lesbarkeit der Benutzeroberfläche zu maximieren.
Segoe UI Variable ist die neue Systemschriftart für Windows. Es ist eine aktualisierte Übernahme des klassischen Segoe und verwendet variable Schriftarttechnologie, um dynamisch eine hervorragende Lesbarkeit in sehr kleinen Größen und verbesserte Konturen bei Anzeigegrößen bereitzustellen.
Tipp
In diesem Artikel wird beschrieben, wie die Fluent Design-Sprache auf Windows-Apps angewendet wird. Weitere Informationen finden Sie unter Fluent Design – Typografie.
Verwenden der Segoe Fluent-Variable
Segoe UI Variable unterstützt zwei Achsen zur feineren Kontrolle von Text: Gewicht und optische Größe.
- Die Gewichtsachse (
wght) ist inkrementell mit Gewichtungen von Thin (100) bis Bold (700). - Die optische Größenachse (
opsz) ist automatisch und standardmäßig aktiviert. Sie steuert die Form und Größe der Zähler in der Schriftart, um die Lesbarkeit bei den kleinen Größen und der Persönlichkeit bei großen Größen zu priorisieren (für die optische Skalierung von 8pt bis 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.
Weights
| Gewichtungsname | Größenachsenwert | Visuelles Element |
|---|---|---|
| Hell | 300 |  |
| Semilight | 350 |  |
| Regulär | 400 |  |
| Halbfett | 600 |  |
| Fett | 700 |  |
Optische Achse
Bewährte Methoden für Typografie in Windows 11
Windows 11 verwendet Segoe UI Variable mit den folgenden Attributen basierend auf dem Kontext, in dem der Text angezeigt wird.
| attribute | Wert | Hinweise |
|---|---|---|
| Weight | Normal, Semibold | Verwenden Sie die normale Gewichtung für den meisten Text, verwenden Sie "Semibold" für Titel. |
| Ausrichtung | Links, Mitte | Standardmäßig linksbündig ausrichten, zentriert nur in seltenen Fällen wie Text unterhalb von Symbolen |
| Mindestwerte | 14px Semibold, 12px Regular | Text kleiner als diese Größen und Gewichtungen sind in einigen Sprachen unlesbar. |
| Gehäuse | Groß-/Kleinschreibung im Satz | Verwenden der Groß-/Kleinschreibung von Sätzen für den gesamten UI-Text, einschließlich Titeln |
| Abschneiden | Auslassungspunkte und Clipping | Verwenden Sie in den meisten Fällen Auslassungspunkte; Clipping wird nur in seltenen Fällen verwendet. |
Beispiele
Die WinUI 3-Katalog-App umfasst interaktive Beispiele für die meisten WinUI 3-Steuerelemente, -Features und -Funktionen. Laden Sie die App aus dem Microsoft Store herunter, oder rufen Sie den Quellcode auf GitHub ab
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.
Schriftart
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.
Größe und Skalierung
Schriftgrade in XAML-Apps werden automatisch auf allen Geräten skaliert. Der Skalierungsalgorithmus stellt sicher, dass eine Schrift von 24 Px auf einem großen Bildschirm von 10 Fuß genauso lesbar ist wie eine 24 Px-Schriftart auf einem kleinen Bildschirm, der ein paar Zoll 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.
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 sind in effektiven Pixeln und für Windows-Apps optimiert, die auf allen Bildschirmgrößen ausgeführt werden.
Windows 11 verwendet die folgenden Werte für verschiedene Texttypen in der Benutzeroberfläche.
| Beispiel | Weight | Größe/Linienhöhe |
|---|---|---|
 |
Klein | 12/16 epx |
 |
Text | 14/20 epx |
 |
Text semibold | 14/20 epx |
 |
Text | 18/24 epx |
 |
Semibold anzeigen | 20/28 epx |
 |
Semibold anzeigen | 28/36 epx |
 |
Semibold anzeigen | 40/52 epx |
 |
Semibold anzeigen | 68/92 epx |
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 Artikel zur Schriftart "Segoe Fluent Icons" . |
| Segoe UI Emoji | Regulär | Benutzeroberflächenschriftart für Emoji. |
| Segoe UI-Symbol | Regulär | Fallbackschriftart für Symbole. |
Verwandte Artikel
Windows developer