Schriftarten

Anmerkung

Dieses Designhandbuch wurde für Windows 7 erstellt und wurde für neuere Versionen von Windows nicht aktualisiert. Ein Großteil der Anleitungen gilt weiterhin im Prinzip, aber die Präsentation und Beispiele spiegeln nicht unsere aktuelle Designleitfadenwider.

Benutzer interagieren mit Text mehr als mit einem anderen Element in Microsoft Windows. Segoe UI (ausgesprochen "SEE-go") ist die Windows-Systemschriftart. Der Standardschriftgrad wurde auf 9 Punkt erhöht.

Die Schriftart "Segoe UI".

Segoe UI und Segoe sind nicht die gleiche Schriftart. Segoe UI ist die Windows-Schriftart, die für Textzeichenfolgen der Benutzeroberfläche vorgesehen ist. Segoe ist eine Brandingschriftart, die von Microsoft und Partnern verwendet wird, um Material für Druck und Werbung zu produzieren.

Segoe UI ist ein zugängliches, offenes und freundliches Schriftzeichen und hat daher eine bessere Lesbarkeit als Tahoma, Microsoft Sans Serif und Arial. Es hat die Merkmale eines humanistischen serifenlosen: die unterschiedlichen Breiten seiner Großbuchstaben (z. B. schmalE E und S, zum Beispiel im Vergleich zu Helvetica, wo die Breiten gleichermaßen, relativ breit sind); die Beton- und Buchstabenform seiner Kleinbuchstabe; und seine wahre Kursiv (anstelle einer "schrägen" oder schrägen Roman, wie viele industriell aussehende serifenlose Serifen). Die Schriftart soll den gleichen visuellen Effekt auf dem Bildschirm und im Druck haben. Es wurde entwickelt, ein humanistisches serifenloses Wesen ohne starken Charakter oder ablenkende Eigenheit zu sein.

Segoe UI ist für ClearType optimiert, das standardmäßig in Windows aktiviert ist. Mit aktivierter ClearType-Funktion ist Segoe UI eine elegante, lesbare Schriftart. Ohne ClearType aktiviert ist Segoe UI nur marginal akzeptabel. Dieser Faktor bestimmt, wann Sie Segoe UI verwenden sollten.

Segoe UI umfasst lateinische, griechische, kyrillische und arabische Zeichen. Es gibt neue Schriftarten, die auch für ClearType optimiert sind, die für andere Zeichensätze erstellt und verwendet werden. Dazu gehören Meiryo für Japanisch, Malgun Gothic für Koreanisch, Microsoft JhengHei für Chinesisch (traditionell), Microsoft YaHei für Chinesisch (vereinfacht), Gisha für Hebräisch und Leelawadee für Thai und die ClearType Collection-Schriftarten für die Dokumentverwendung.

Meiryo enthält lateinische Zeichen, die auf Verdana basieren. Malgun Gothic, Microsoft JhengHei und Microsoft YaHei verwenden eine angepasste Segoe UI. Die Verwendung kursiv formatierter Versionen dieser Schriftarten wird nicht empfohlen. Malgun Gothic, Microsoft JhengHei und Microsoft YaHei werden nur in regulären und fetten Stilen bereitgestellt, was bedeutet, dass kursiv formatierte Zeichen durch Schrägung der aufrechten Stile synthetisiert werden. Obwohl Meiryo echte kursiv und fett kursiv formatierte Formatvorlagen enthält, gelten diese Stile nur für die lateinischen Zeichen, die japanischen Zeichen aufrecht bleiben, wenn kursiv formatiert wird.

Eine Variante von Meiryo, der als Meiryo UI bezeichnet wird, wird in den Menübändern Befehlsbenutzeroberfläche bevorzugt.

Um Gebietsschemas mithilfe dieser Zeichensätze zu unterstützen, wird die Segoe UI je nach Gebietsschema während der Lokalisierung Prozesses durch die richtigen Schriftarten ersetzt.

Um Segoe UI und andere Microsoft-Schriftarten für die Verteilung mit einem Windows-basierten Programm zu lizenzieren, wenden Sie sich an Monotype.

Hinweis: Richtlinien für Stil und Ton und Text der Benutzeroberfläche werden in separaten Artikeln vorgestellt.

Designkonzepte

Schriftarten, Schriftarten, Punktgrößen und Attribute

In der herkömmlichen Typografie beschreibt eine Schriftart eine Kombination aus Schriftart, Punktgröße und Attributen. Eine Schriftart ist das Aussehen der Schriftart. Segoe UI, Tahoma, Verdana und Arial sind alle Schriftarten. Die Punktgröße bezieht sich auf den Schriftgrad, gemessen vom oberen Rand der Aufsteigenden bis zum unteren Rand der Absteigenden, abzüglich des internen Abstands (als vorangestellter Wert bezeichnet). Ein Punkt beträgt ungefähr 1/72 Zoll. Schließlich kann eine Schriftart Attribute fett oder kursiv aufweisen.

Informell verwenden Personen häufig Schriftart anstelle von Schriftart wie in diesem Artikel, aber technisch gesehen ist Segoe UI eine Schriftart, keine Schriftart. Jede Kombination von Attributen ist eine eindeutige Schriftart (z. B. 9 Punkt Segoe UI normal, 10 Punkt Segoe UI fett usw.).

Serifen und serifenlose Serifen

Schriftarten sind entweder Serifen oder serifenlose. Serif bezieht sich auf kleine Wendungen, die oft die Striche von Buchstaben in einer Schriftart fertig stellen. Eine serifenlose Schriftart hat keine Serifen.

Leser bevorzugen in der Regel Serifenschriftarten, die als Textkörper in einem Dokument verwendet werden. Die Serifen bieten ein Gefühl von Formalität und Eleganz für ein Dokument. Für UI-Text ist die Notwendigkeit einer sauberen Darstellung und der geringeren Auflösung von Computermonitoren die bessere Wahl.

Kontrast

Text ist am einfachsten zu lesen, wenn ein großer Unterschied zwischen der Leuchtdichte des Texts und dem Hintergrund besteht. Schwarzer Text auf einem weißen Hintergrund bietet den höchsten Kontrast dunklen Text auf einem sehr hellen Hintergrund kann auch hohen Kontrast bieten. Diese Kombination eignet sich am besten für primäre UI-Oberflächen.

Heller Text auf einem dunklen Hintergrund bietet einen guten Kontrast, aber nicht so gut wie dunkler Text auf einem hellen Hintergrund. Diese Kombination eignet sich gut für sekundäre UI-Oberflächen, z. B. Explorer-Aufgabenbereiche, die Sie relativ zu den primären UI-Oberflächen hervorheben möchten.

Wenn Sie sicherstellen möchten, dass Benutzer Ihren Text lesen, verwenden Sie dunklen Text auf einem hellen Hintergrund.

Angebote

Text kann die folgenden Angebote verwenden, um anzugeben, wie er verwendet wird:

• Zeiger. Der Zeiger der I-Leiste ("Textauswahl") gibt an, dass der Text auswählbar ist, während der Mauszeiger auf der linken Seite ("normale Auswahl") darauf hinweist, dass der Text nicht vorhanden ist.
• Einschaltungszeichen. Wenn Text den Eingabefokus hat, ist das Caret die blinkende vertikale Leiste, die den Einfüge-/Auswahlpunkt in auswählbaren oder bearbeitbaren Text angibt.
• Schachtel. Ein Feld um Text, das angibt, dass es bearbeitbar ist. Um die Gewichtung der Präsentation zu verringern, wird das Feld möglicherweise nur dynamisch angezeigt, wenn der bearbeitbare Text ausgewählt ist.
• Vordergrundfarbe. Hellgrau weist darauf hin, dass Text deaktiviert ist. Nichtgraue Farben, insbesondere Blau und Lila, deuten darauf hin, dass Text ein Link ist.
• Hintergrundfarbe. Ein hellgrauer Hintergrund deutet schwach darauf hin, dass Text schreibgeschützt ist, aber in der Praxis kann schreibgeschützter Text einen beliebigen Farbhintergrund aufweisen.

Diese Angebote werden für die folgenden Bedeutungen kombiniert:

• Editierbar. Text, der in einem Feld angezeigt wird, mit einem Textauswahlzeiger, einem Caret (im Eingabefokus) und in der Regel auf einem weißen Hintergrund.
• Schreibgeschützt, auswählbar. Text mit einem Auswahlzeiger und einem Caret (im Eingabefokus).
• Schreibgeschützt, nicht auswählbar. Text mit einem Pfeilzeiger.
• Arbeitsunfähig. Hellgrauer Text mit einem Pfeilzeiger, manchmal auf grauem Hintergrund.

Schreibgeschützter Text weist traditionell einen grauen Hintergrund auf, aber ein grauer Hintergrund ist nicht erforderlich. Tatsächlich kann ein grauer Hintergrund unerwünscht sein, insbesondere für große Textblöcke, da er darauf hinweist, dass der Text deaktiviert ist und das Lesen verhindert.

Barrierefreiheit und die Systemschriftart, -größen und -farben

Die Richtlinien für die Barrierefreiheit von Text für Benutzer mit Behinderungen oder Beeinträchtigungen können auf eine einfache Regel reduziert werden: Beachten Sie die Einstellungen des Benutzers, indem Sie immer die Systemschriftart, -größen und -farben verwenden.

Wenn Sie nur eine Sache tun...

Respektieren Sie die Einstellungen des Benutzers, indem Sie immer die Systemschriftart, -größen und -farben verwenden.

Entwickler: Aus Code können Sie die Eigenschaften der Systemschriftart (einschließlich der Größe) mithilfe der GetThemeFont-API-Funktion bestimmen. Sie können die Systemfarben mithilfe der GetThemeSysColor-API-Funktion ermitteln.

Da Sie keine Annahmen über die Systemdesigneinstellungen von Benutzern machen können, sollten Sie:

• Verwenden Sie immer Die Schriftfarben und Hintergründe von Systemdesignfarben. Erstellen Sie niemals eigene Farben basierend auf festen RGB-Werten (Rot, Grün, Blau).
• Stimmen Sie immer systemtextfarben mit ihren entsprechenden Hintergrundfarben überein. Wenn Sie z. B. COLOR_STATICTEXT für die Textfarbe auswählen, müssen Sie auch COLOR_STATIC für die Hintergrundfarbe auswählen.
• Erstellen Sie immer neue Schriftarten basierend auf Variationen der Systemschriftart in proportionaler Größe. Angesichts der Systemschriftartmetriken können Sie fett, kursiv, größer und kleinere Variationen erstellen.

Eine einfache Möglichkeit, um sicherzustellen, dass Ihr Programm die Einstellungen der Benutzer berücksichtigt, besteht darin, die Verwendung eines anderen Schriftgrads und eines Farbschemas mit hohem Kontrast zu testen. Der gesamte Text sollte die Größe und Anzeige im ausgewählten Farbschema ordnungsgemäß ändern.

Verwendungsmuster

Text weist mehrere Verwendungsmuster auf:

Verwendung	Beschreibung
Titelleistentext Text auf der Titelleiste, der das Fenster identifiziert.
Hauptanweisungen Text, der erläutert, was auf einer Seite, einem Fenster oder einem Dialogfeld zu tun ist.
sekundäre Anweisungen Ergänzender Text, der erläutert, was auf einer Seite, einem Fenster oder einem Dialogfeld zu tun ist.
Normaltext Gewöhnlicher (schreibgeschützter) Text, der auf einer Benutzeroberfläche angezeigt wird.
Hervorgehobener Text Fett formatierter Text wird verwendet, um die Analyse des Texts zu vereinfachen und die Aufmerksamkeit auf Text zu lenken, die Benutzer lesen müssen. Kursiv formatierter Text wird verwendet, um buchstäblich auf Text (anstelle von Anführungszeichen) zu verweisen und bestimmte Wörter hervorzuheben.
bearbeitbarer Text Text, den Benutzer bearbeiten können, wird in einem Feld angezeigt. um die Gewichtung der Präsentation zu verringern, wird das Feld möglicherweise nur angezeigt, wenn der bearbeitbare Text ausgewählt ist.
Deaktivierter Text Text, der nicht für den aktuellen Kontext gilt, z. B. Bezeichnungen für deaktivierte Steuerelemente. Deaktivierter Text gibt an, dass Benutzer (normalerweise) den Text nicht stören sollten.
Links Text, der verwendet wird, um zu einer anderen Seite, einem Fenster oder hilfethema zu navigieren oder einen Befehl zu initiieren.
Gruppenkopf Text, der zum Gruppieren von Elementen in einer Listenansicht verwendet wird.
Dateinamen Dateinametext (nur in der Inhaltsansicht).
Dokumenttext Text, der in Dokumenten verwendet wird (im Gegensatz zu Ui-Text).
Dokumentüberschriften Text, der als Überschrift in einem Dokument verwendet wird.

Leitlinien

Schriftarten und Farben

• Die folgenden Schriftarten und Farben sind Standardwerte für Windows Vista und Windows 7.

Muster	Designsymbol	Schriftart, Farbe
	CaptionFont	9 Pt. Schwarz (#000000) Segoe UI
	MainInstruction	12 Pt. Blau (#003399) Segoe UI
	Anweisung	9 Pt. Schwarz (#000000) Segoe UI
	BodyText	9 Pt. Schwarz (#000000) Segoe UI
	BodyText	9 Pt. Schwarz (#000000) Segoe UI, fett oder kursiv
	BodyText	9 pt. schwarz (#000000) Segoe UI, in einem Feld
	Arbeitsunfähig	9 Pt. Dunkelgrau (#323232) Segoe UI
	HyperLinkText	9 Pt. Blau (#0066CC) Segoe UI
	Heiß	9 Pt. Hellblau (#3399FF) Segoe UI
		11 Pt. Blau (#003399) Segoe UI
		11 Pt. Schwarz (#000000) Segoe UI
	(keine)	9 Pt. Schwarz (#000000) Calibri
	(keine)	17 Pt. Schwarz (#000000) Calibri

• Schriftarten auswählen und Fensterlayouts basierend auf der UI-Technologie und der Zielversion von Windows optimieren:

UI-Technologie	Windows-Zielversion	Zu verwendende und optimierende Schriftarten
Windows Presentation Foundation	Alle	Verwenden Sie WPF-Designteile.
Win32 oder WinForms	Windows Vista oder höher	Verwenden Sie die entsprechende Segoe UI-Schriftart.
	Erweiterbare Komponenten oder vor Windows Vista	Um Windows XP und Windows 2000 als Ziel zu verwenden, verwenden Sie die Pseudoschriftart MS Shell Dlg 2, die Tahoma zugeordnet ist. Um auf frühere Versionen von Windows zu abzielen, verwenden Sie die Pseudoschriftart MS Shell Dlg, die Tahoma unter Windows 2000 und Windows XP sowie MS Sans Serif unter Windows 95, Windows 98, Windows Millennium Edition und Windows NT 4.0 zugeordnet ist.

• Entwickler:
  • Für Elemente, die festes Layout verwenden (z. B. Windows-Dialogfeldvorlagen und WinForms), codiert die entsprechende Schriftart aus der vorherigen Tabelle hart.
  • Verwenden Sie für Elemente, die dynamisches Layout (z. B. Windows Presentation Foundation) verwenden, die Designschriftarten. Verwenden Sie Design-APIs wie DrawThemeText, um Text basierend auf dem Designsymbol zu zeichnen. Stellen Sie sicher, dass Sie eine Alternative basierend auf Systemmetriken haben, falls der Designdienst nicht ausgeführt wird.
• Verwenden Sie für die Segoe UI einen Schriftgrad von 9 Punkt oder größer. Die Schriftart "Segoe UI" ist für diese Größen optimiert. Vermeiden Sie daher die Verwendung kleinerer Größen.
• Stimmen Sie immer systemtextfarben mit ihren entsprechenden Hintergrundfarben überein. Wenn Sie z. B. COLOR_STATICTEXT für die Textfarbe auswählen, müssen Sie auch COLOR_STATIC für die Hintergrundfarbe auswählen.
• Erstellen Sie immer neue Schriftarten basierend auf Variationen der Systemschriftart in proportionaler Größe. Angesichts der Systemschriftartmetriken können Sie fett, kursiv, größer und kleinere Variationen erstellen.
• Zeigen Sie große Textblöcke (z. B. Lizenzbedingungen) vor einem hellen Hintergrund anstelle eines grauen Hintergrunds an. Graue Hintergründe deuten darauf hin, dass der Text deaktiviert ist und das Lesen davon abhält.
• Betrachten Sie eine maximale Zeilenlänge von 65 Zeichen, damit der Text leicht lesbar ist. (Zeichen umfassen Buchstaben, Satzzeichen und Leerzeichen.)

Attribute

• Die meisten UI-Text sollten ohne Attribute einfach sein. Attribute können wie folgt verwendet werden:
  • Kühn. Verwenden Sie die Steuerelementbeschriftungen, um den Text einfacher zu analysieren. Verwenden Sie sparsam, um die Aufmerksamkeit auf Textbenutzer zu lenken, die gelesen werden müssen. Die Verwendung zu viel Fett verringert ihre Wirkung.
  • Kursiv. Wird verwendet, um buchstäblich auf Text anstelle von Anführungszeichen zu verweisen. Verwenden Sie sparsam, um bestimmte Wörter hervorzuheben. Wird für Aufforderungen in Textfeldern und bearbeitbaren Dropdownlisten.
  • Fett kursiv. Verwenden Sie sie nicht.
  • Unterstreichen. Verwenden Sie mit Ausnahme von Links nicht. Verwenden Sie stattdessen Kursiv, um hervorhebungen zu können.
• Nicht alle Schriftarten unterstützen fett und kursiv, daher sollten sie niemals entscheidend sein, um den Text zu verstehen.