Schriftarten

Hinweis

Dieses Entwurfshandbuch wurde für Windows 7 erstellt und wurde nicht für neuere Versionen von Windows aktualisiert. Ein Großteil der Anleitungen gilt weiterhin im Prinzip, aber die Präsentation und die Beispiele entsprechen nicht unseren aktuellen Entwurfsleitfäden.

Benutzer interagieren mehr mit Text als mit jedem 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 eine zugängliche, offene und freundliche Schriftart und hat daher eine bessere Lesbarkeit als Tahoma, Microsoft Sans Serif und Arial. Es hat die Merkmale einer humanistischen serifenlosen Serifen: die unterschiedlichen Breiten seiner Großbuchstaben (schmales E und S, für instance, im Vergleich zu Helvetica, wo die Breiten gleich, ziemlich breit sind); die Betonung und Buchstabenform seiner Kleinbuchstaben; und seine wahre Kursivschrift (anstelle eines "oblique" oder schrägen Romans, wie viele industrielle Serifen). Die Schriftart soll den gleichen visuellen Effekt auf dem Bildschirm und im Druck haben. Es wurde entworfen, um eine humanistische serif ohne starken Charakter oder ablenkende Eigenart zu sein.

Segoe UI ist für ClearType optimiert, das in Windows standardmäßig aktiviert ist. Wenn ClearType aktiviert ist, ist Segoe UI eine elegante, lesbare Schriftart. Ohne aktiviertes ClearType ist die Segoe-Benutzeroberfläche nur geringfügig akzeptabel. Dieser Faktor bestimmt, wann Sie Segoe UI verwenden sollten.

Die Benutzeroberfläche von Segoe enthält lateinische, griechische, kyrillische und arabische Zeichen. Es gibt neue Schriftarten, die auch für ClearType optimiert sind und für andere Zeichensätze und Verwendungen erstellt wurden. 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 Thailändisch sowie die ClearType Collection-Schriftarten, die für die Dokumentverwendung entwickelt wurden.

Meiryo enthält lateinische Zeichen, die auf Verdana basieren. Malgun Gothic, Microsoft JhengHei und Microsoft YaHei verwenden eine benutzerdefinierte Segoe-Benutzeroberfläche. Die Verwendung kursiver 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 kursive Zeichen durch Schrägung der aufrechten Stile synthetisiert werden. Obwohl Meiryo eine kursive und fett formatierte Kursivschrift enthält, gelten diese Stile nur für die lateinischen Zeichen, die japanischen Zeichen bleiben aufrecht, wenn kursiv formatiert wird.

Eine Variante von Meiryo, die meiryo UI genannt wird, wird in der Benutzeroberfläche des Menübandbefehls bevorzugt.

Zur Unterstützung von Gebietsschemas, die diese Zeichensätze verwenden, wird Segoe UI durch die richtigen Schriftarten ersetzt, je nach Gebietsschema während des Lokalisierungsprozesses .

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

Hinweis: Richtlinien in Bezug auf Stil und Ton sowie Text der Benutzeroberfläche werden in separaten Artikeln vorgestellt.

Entwurfskonzepte

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. Punktgröße bezieht sich auf die Größe der Schriftart, gemessen vom oberen Rand der Aufsteigenden bis zum unteren Rand der Nachfolger, abzüglich des internen Abstands (als führend bezeichnet). Ein Punkt ist ungefähr 1/72 Zoll. Schließlich kann eine Schriftart Fett- oder Kursivattribute aufweisen.

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

Serifen und serifensig

Schriftarten sind entweder serif oder ohne Serifen. Serifen bezieht sich auf kleine Wendungen, die häufig die Buchstabenstriche in einer Schriftart abschließen. Eine serifenlose Schriftart hat keine Serifen.

Leser bevorzugen im Allgemeinen Serifenschriftarten, die als Textkörper innerhalb eines Dokuments verwendet werden. Die Serifen verleihen einem Dokument ein Gefühl von Formalität und Eleganz. Für BENUTZEROBERFLÄCHEN-Text machen die Notwendigkeit einer sauber Darstellung und der niedrigeren Auflösung von Computermonitoren die bessere Wahl für schreiblose Serifen.

Vergleichen Sie

Text ist am einfachsten zu lesen, wenn es einen großen Unterschied zwischen der Leuchtdichte des Texts und dem Hintergrund gibt. Schwarzer Text auf weißem 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 dunklem Hintergrund bietet einen guten Kontrast, aber nicht so gut wie dunkler Text auf hellem Hintergrund. Diese Kombination eignet sich gut für sekundäre Ui-Oberflächen, z. B. Explorer Aufgabenbereiche, die Sie im Vergleich zu den primären Ui-Oberflächen deaktivieren möchten.

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

Affordances

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 Nach-links-Zeiger ("normale Auswahl") angibt, dass Der Text nicht ist.
• Einfügemarke. Wenn Text den Eingabefokus hat, ist das Caretzeichen die blinkende vertikale Leiste, die den Einfüge-/Auswahlpunkt im auswählbaren oder bearbeitbaren Text angibt.
• Box. Ein Feld um Text, das angibt, dass er bearbeitbar ist. Um die Gewichtung der Präsentation zu verringern, kann das Feld nur dynamisch angezeigt werden, wenn der bearbeitbare Text ausgewählt ist.
• Vordergrundfarbe. Hellgrau gibt an, dass Text deaktiviert ist. Nicht graue Farben, insbesondere Blau und Lila, zeigen an, 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 haben.

Diese Angebote werden für die folgenden Bedeutungen kombiniert:

• Bearbeitbar. Text, der in einem Feld angezeigt wird, mit einem Textauswahlzeiger, einem Caretzeichen (beim Eingabefokus) und in der Regel auf weißem Hintergrund.
• Schreibgeschützt, auswählbar. Text mit einem Auswahlzeiger und einem Caretzeichen (beim Eingabefokus).
• Schreibgeschützt, nicht auswählbar. Text mit einem Pfeilzeiger.
• Deaktiviert. Hellgrauer Text mit Pfeilzeiger, manchmal auf grauem Hintergrund.

Schreibgeschützter Text hat traditionell einen grauen Hintergrund, aber ein grauer Hintergrund ist nicht erforderlich. In der Tat kann ein grauer Hintergrund unerwünscht sein, insbesondere bei großen Textblöcken, da er darauf hindeutet, dass der Text deaktiviert ist und das Lesen verhindert.

Barrierefreiheit und die Schriftart, Größen und Farben des Systems

Die Richtlinien zum Zugänglichmachen von Text für Benutzer mit Behinderungen oder Beeinträchtigungen können auf eine einfache Regel beschränkt werden: Achten Sie die Einstellungen des Benutzers, indem Sie immer die Schriftart, die Größen und die Farben des Systems verwenden.

Wenn Sie nur eine Sache tun...

Berücksichtigen Sie die Einstellungen des Benutzers, indem Sie immer die Schriftart, die Größen und die Farben des Systems verwenden.

Entwickler: Anhand des Codes können Sie die Eigenschaften der Systemschriftart (einschließlich ihrer Größe) mithilfe der GetThemeFont-API-Funktion ermitteln. Sie können die Systemfarben mithilfe der GetThemeSysColor-API-Funktion ermitteln.

Da Sie keine Annahmen über die Systemdesigneinstellungen der Benutzer treffen können, sollten Sie:

• Basieren Sie ihre Schriftfarben und -hintergründe immer auf Systemdesignfarben. Erstellen Sie niemals eigene Farben basierend auf festen RGB-Werten (Rot, Grün, Blau).
• Passen Sie Systemtextfarben immer den entsprechenden Hintergrundfarben an. Wenn Sie beispielsweise 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 proportionaler Größe der Systemschriftart. Angesichts der Systemschriftartenmetriken können Sie fett formatierte, kursive, größere und kleinere Variationen erstellen.

Eine einfache Möglichkeit, sicherzustellen, dass Ihr Programm die Benutzereinstellungen respektiert, ist das Testen mit einem anderen Schriftgrad und einem Farbschema mit hohem Kontrast. Die Größe des gesamten Texts sollte im ausgewählten Farbschema geändert und ordnungsgemäß angezeigt werden.

Verwendungsmuster

Text weist mehrere Verwendungsmuster auf:

Verwendung	BESCHREIBUNG
Titelleistentext Text auf der Titelleiste, der das Fenster identifiziert.
Hauptanweisungen Text, in dem erläutert wird, was auf einer Seite, einem Fenster oder einem Dialogfeld zu tun ist.
Sekundäre Anweisungen Zusätzlicher Text, in dem erläutert wird, was auf einer Seite, einem Fenster oder einem Dialogfeld zu tun ist.
Normaler Text Gewöhnlicher (schreibgeschützter) Text, der in einer Benutzeroberfläche angezeigt wird.
Hervorgehobener Text Fett formatierter Text wird verwendet, um den Text leichter zu analysieren und auf Text aufmerksam zu machen, den Benutzer lesen müssen. Kursivtext wird verwendet, um wörtlich 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.
Text deaktiviert Text, der nicht auf den aktuellen Kontext angewendet wird, z. B. Bezeichnungen für deaktivierte Steuerelemente. deaktivierter Text gibt an, dass Benutzer (normalerweise) nicht die Mühe haben sollten, den Text zu lesen.
Links Text, der verwendet wird, um zu einer anderen Seite, einem fenster oder einem anderen Hilfethema zu navigieren oder einen Befehl zu initiieren.
Gruppenheader Text, der zum Gruppieren von Elementen in einer Listenansicht verwendet wird.
Dateiname Dateinametext (nur in der Inhaltsansicht).
Dokumenttext Text, der in Dokumenten verwendet wird (im Gegensatz zu Benutzeroberflächentext).
Dokumentüberschriften Text, der als Überschrift in einem Dokument verwendet wird.

Richtlinien

Schriftarten und Farben

• Die folgenden Schriftarten und Farben sind Standardeinstellungen 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
	Disabled	9 Pt. dunkelgrau (#323232) Segoe UI
	HyperLinkText	9 Pt. blau (#0066CC) Segoe UI
	Hot	9 Pt. hellblau (#3399FF) Segoe UI
		11 Pt. blau (#003399) Segoe UI
		11 Pt. schwarz (#000000) Segoe UI
	(none)	9 Pt. schwarz (#000000) Calibri
	(none)	17 Pt. schwarz (#000000) Calibri

• Wählen Sie Schriftarten aus, und optimieren Sie Fensterlayouts basierend auf der Ui-Technologie und der Zielversion von Windows:

Ui-Technologie	Windows-Zielversion	Zu verwendende und zu optimierende Schriftarten
Windows Presentation Foundation	Alle	Verwenden Sie WPF-Designteile.
Win32 oder WinForms	Windows Vista oder höher	Verwenden Sie die entsprechende Schriftart der Segoe-Benutzeroberfläche.
	Erweiterbare Komponenten oder vor Windows Vista	Verwenden Sie zum Ziel Windows XP und Windows 2000 die Pseudoschriftart MS Shell Dlg 2 mit 8 Punkten, die Tahoma zugeordnet ist. Verwenden Sie für frühere Versionen von Windows die Pseudoschriftart MS Shell Dlg mit 8 Punkten, die Tahoma unter Windows 2000 und Windows XP und MS Sans Serif unter Windows 95, Windows 98, Windows Millennium Edition und Windows NT 4.0 zugeordnet ist.

• Entwickler:
  • Für Elemente, die ein festes Layout verwenden (z. B. Windows-Dialogvorlagen und WinForms), programmieren Sie die entsprechende Schriftart aus der vorherigen Tabelle hart.
  • Verwenden Sie für Elemente, die ein dynamisches Layout verwenden (z. B. Windows Presentation Foundation), 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-Benutzeroberfläche einen Schriftgrad von mindestens 9 Punkten. Die Schriftart der Segoe-Benutzeroberfläche ist für diese Größen optimiert. Vermeiden Sie daher die Verwendung kleinerer Größen.
• Passen Sie Systemtextfarben immer mit den entsprechenden Hintergrundfarben ab. Wenn Sie beispielsweise 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 proportionaler Größe der Systemschriftart. Anhand der Systemschriftartenmetriken können Sie fett formatierte, kursive, größere und kleinere Variationen erstellen.
• Zeigen Sie große schreibgeschützte 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 es wird vom Lesen abgeraten.
• Erwägen Sie eine maximale Zeilenlänge von 65 Zeichen , um den Text leicht lesbar zu machen. (Zeichen umfassen Buchstaben, Satzzeichen und Leerzeichen.)

Attribute

• Der meiste Benutzeroberflächentext sollte ohne Attribute einfach sein. Attribute können wie folgt verwendet werden:
  • Fettdruck Verwenden Sie in Steuerelementbezeichnungen, um die Analyse des Texts zu erleichtern. Verwenden Sie sparsam, um auf Text aufmerksam zu machen, den Benutzer lesen müssen. Die Verwendung von zu viel Fett verringert seine Wirkung.
  • Italic. Verwenden Sie, um wörtlich auf Text anstelle von Anführungszeichen zu verweisen. Verwenden Sie sparsam, um bestimmte Wörter hervorzuheben. Verwenden Sie für Eingabeaufforderungen in Textfeldern und bearbeitbare Dropdownlisten.
  • Fett kursiv. Nicht verwenden.
  • Unterstreichen. Verwenden Sie außer Links nicht. Verwenden Sie stattdessen Kursiv für die Hervorhebung.
• Nicht alle Schriftarten unterstützen fett und kursiv, sodass sie nie entscheidend für das Verständnis des Texts sein sollten.