Richtlinien für Schriftarten (Windows Store-Apps)

Die richtige Verwendung von Schriftgraden, -breiten, -farben, Laufweite und Zeichenabstand kann Ihrer Windows Store-App ein klares und übersichtliches Erscheinungsbild verleihen und dadurch ihre Verwendung erleichtern.

Richtlinien für die Benutzeroberfläche

Einfachheit und Klarheit erfordern ein hohes Maß an Aufmerksamkeit für typografische Details. Es wird empfohlen beim Entwickeln der Benutzeroberfläche Ihrer App folgende Regeln einzuhalten:

  • Verwenden Sie die empfohlenen Schriftarten.
  • Verwenden Sie für Windows Store-Apps mit JavaScript die Stylesheets aus der Windows-Bibliothek für JavaScript. Die WinJS-Stylesheets vereinfachen die Einhaltung dieser typografischen Richtlinien, da sie die empfohlenen Werte für Farbe, Breite und Laufweite verwenden. Informationen zur Implementierung der Stylesheets finden Sie unter Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen.
  • Befolgen Sie die Layoutrichtlinien für Windows Store-Apps. Weitere Informationen finden Sie unter Gestalten einer App-Seite.
  • Verwenden Sie die Laufweitenwerte aus den WinJS-Stylesheets.
  • Mithilfe der Kontrasteinstellungen (für Breite, Größe und Position) können Sie die einzelnen Seitenelemente voneinander differenzieren.

Welche Schriftarten soll ich verwenden?

Verwenden Sie die folgenden Schriftarten in Ihrer Windows Store-App:

  • Verwenden Sie Segoe UI (primäre Windows-Schriftart) für Elemente der Benutzeroberfläche wie Schaltflächen und die Datumsauswahl. Segoe UI unterstützt das lateinische, kyrillische, griechische, arabische, hebräische, armenische und georgische Alphabet.
  • Verwenden Sie Calibri für Texte, die vom Benutzer geschrieben und gelesen werden, beispielsweise in E-Mail-Nachrichten oder in einem Chat. Calibri unterstützt das lateinische, griechische und kyrillische Alphabet.
  • Verwenden Sie Cambria für größere Textblöcke wie in einem Magazin oder für RSS-Leser. Cambria unterstützt das lateinische, griechische und kyrillische Alphabet.

Andere Sprachen und Schreibsysteme verwenden unterschiedliche Schriftarten und benötigen möglicherweise andere Größen und Laufweiten, die Auswahl basiert jedoch auf den Empfehlungen in diesem Dokument. Verwenden Sie beim Lokalisieren Ihrer App die Windows.Globalization.Fonts-APIs zum Bestimmen der richtigen Benutzeroberflächen- und Dokumentschriftarten für eine Sprache, falls Sie Standardschriftarten verwenden.

Elemente der Benutzeroberfläche: Segoe UI

Segoe UI ist die charakteristischste Systemschriftart und am engsten mit der neuen Windows-Benutzeroberfläche verbunden. Verwenden Sie Segoe UI für alle Benutzeroberflächenelemente.

Die Stylesheets der Windows Store-App stellen fünf verschiedene Versionen von Segoe UI zur Verfügung, jede mit einer anderen Breite:

  • Segoe UI Light

    Segoe UI mit einer Breite von 200

  • Segoe UI Semilight

    Segoe UI mit einer Breite von 300

  • Segoe UI

    Segoe UI mit Standardbreite von 400

  • Segoe UI Semibold

    Segoe UI mit einer Breite von 600

  • Segoe UI Bold

    Segoe UI mit einer Breite von 700

Zur Verwendung dieser vordefinierten Breiten legen Sie die Cascading Style Sheets (CSS) font-family-Eigenschaft auf einen der Segoe UI-Schriftartnamen fest. In diesem Beispiel wird Segoe UI Semibold verwendet:


<p style="font-family: 'Segoe UI Semibold'">Semibold text</p>

Verwenden Sie einen der folgenden vier Schriftgrade:

  • Verwenden Sie 11 Pt Segoe UI Semilight für die meisten Texte.
  • Verwenden Sie 9 Pt Segoe UI, den kleinsten Schriftgrad, für kurze Textelemente, wie Schaltflächenbeschriftungen.
  • Verwenden Sie 20 Pt Segoe UI Light für Textelemente, die klar sichtbar sein und die Aufmerksamkeit der Benutzer auf sich ziehen sollen. Sie sollten jedoch kurz sein und auf eine Zeile passen.
  • Verwenden Sie 42 Pt Segoe UI Light für vordergründige Benutzeroberflächenelemente, die aus einem oder zwei Wörtern auf einer Zeile bestehen.

Wenn Text mit 20 Punkten zu groß ist, verwenden Sie stattdessen eine Segoe UI Semilight-Schriftart mit 16 Punkten. Wenn Sie beispielsweise eine volle Liste mit vielen Elementen haben, wird diese Liste mit einer Schriftart mit 16 Punkten übersichtlicher. Mischen Sie keine Schriftarten mit 16 und 20 Punkten auf derselben Seite, sondern immer nur die eine oder die andere Größe.

Verwenden Sie keine kursiven Schriftartstile.

Dieser Typenverlauf zeigt an, welche Schriftgrade, -breiten und -farben für verschiedene Bereiche der Benutzeroberfläche verwendet werden sollen. Für jeden Teil der UI wird gezeigt, welche Farben bei Verwendung des dunklen Stylesheets und welche beim hellen Stylesheet zu verwenden sind.

  • Primärer Text hat eine Deckkraft von 100 %. Sekundärer Text hat eine Deckkraft von 60%.
  • Text, im Zustand "Zeigen" hat eine Deckkraft von 80 %.
  • Schwarzer und weißer Text im Zustand "Gedrückt" hat eine Deckkraft von 40%. Text in anderen Farben hat eine Deckkraft von 60 %.
  • Verwenden Sie zum Angeben des Tastaturfokus abwechselnd schwarze und weiße Quadrate mit zwei Pixeln.

    Header auf dunklem Hintergrund mit TastaturfokusHeader auf hellem Hintergrund mit Tastaturfokus
  • Wenn eine Seitenüberschrift oder Unterüberschrift zum Anzeigen zu lang ist, verwenden Sie nicht drei Punkte, sondern eine Ellipse (U+2026). Setzen Sie kein Leerzeichen zwischen das Ende des Überschriftstexts und die Ellipse.

    Langer Header mit Auslassungspunkten

(Der "Abbildungsschlüssel" in den einzelnen Einträgen gibt den Textstil in der Abbildung an, der dieser Tabelle entspricht.)

StandardansichtRuhezustandZustand "Zeigen" (Deckkraft 80 %)Zustand "Gedrückt" (Deckkraft 40 %)
Kopfzeile
  • Nicht verwenden, wenn die App-Breite 500 Pixel oder weniger ist
  • Schriftfamilie: Segoe UI Light
  • Schriftgrad: 42 Pt
  • Abbildungsschlüssel: A

Kopfzeilentext mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Kopfzeilentext im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Kopfzeilentext im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Kopfzeilentext mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Kopfzeilentext im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Kopfzeilentext im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Seitenunterüberschrift
  • Schriftfamilie: Segoe UI Light
  • Schriftgrad: 20 Pt
  • Abbildungsschlüssel: B

Eine Unterüberschrift mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Eine Unterüberschrift im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Eine Unterüberschrift im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Eine Unterüberschrift mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Eine Unterüberschrift im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Eine Seitenunterüberschrift im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Interaktive Unterüberschrift
  • Schriftfamilie: Segoe UI Light
  • Schriftgrad: 20 Pt
  • Glyphe: Segoe UI Symbol U+E26B
  • Abstand zwischen Text und Glyphe: 10 Pixel
Eine interaktive Unterüberschrift mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Eine interaktive Unterüberschrift mit dunklem Stylesheet und Zustand "Darauf zeigen"

rgba(255, 255, 255, 0.8)

Eine interaktive Unterüberschrift mit dunklem Stylesheet und Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Eine interaktive Unterüberschrift mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Eine interaktive Unterüberschrift mit hellem Stylesheet und Zustand "Darauf zeigen"

rgba(0, 0, 0, 0.8)

Eine interaktive Unterüberschrift mit hellem Stylesheet und Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Elementtitel/Kopfzeile
  • Kleine Unterüberschrift
  • Schriftfamilie: Segoe UI Semibold
  • Schriftgrad: 11 Pt
  • Abbildungsschlüssel: C

Ein Elementtitel mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Ein Elementtitel im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Ein Elementtitel im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Ein Elementtitel mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Ein Elementtitel im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Ein Elementtitel im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Elementtitel/Kopfzeile, sekundär
  • Schriftfamilie: Segoe UI Semibold
  • Schriftgrad: 11 Pt
  • Abbildungsschlüssel: D

Ein Elementtitel mit dunklem Stylesheet

rgba(255, 255, 255, 0.6)

Ein Elementtitel im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Ein Elementtitel im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Ein Elementtitel mit hellem Stylesheet

rgba(0, 0, 0, 0.6)

Ein Elementtitel im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Ein Elementtitel im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Navigation
  • Elementtitel/Kopfzeile, Navigation
  • Schriftfamilie: Segoe UI
  • Schriftgrad: 11 Pt

Ein Navigationselement mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Ein Navigationselement im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Ein Navigationselement im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Ein Navigationselement mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Ein Navigationselement im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Ein Navigationselement im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Textkörper
  • Schriftfamilie: Segoe UI Semilight
  • Schriftgrad: 11 Pt
  • Abbildungsschlüssel: E

Textkörper mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

n/v

n/v

Textkörper mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

n/v

n/v

Links
  • Schriftfamilie: Segoe UI Semilight
  • Schriftgrad: 11 pt
  • Abbildungsschlüssel: F

Ein Link mit dunklem Stylesheet

rgba(148, 102, 255, 1.0)

Ein Link im Zustand "Zeigen"

rgba(148, 102, 255, 0.8)

Ein Link im Zustand "Gedrückt"

rgba(148, 102, 255, 0.6)

Ein Link mit hellem Stylesheet

rgba(79,26,203, 1.0)

Ein Link im Zustand "Zeigen"

rgba(79,26,203, 0.8)

Ein Link im Zustand "Gedrückt"

rgba(79,26,203, 0.6)

Tertiäre Info
  • Schriftfamilie: Segoe UI
  • Schriftgrad: 9 Pt
  • Abbildungsschlüssel: G

Tertiäre Info mit dunklem Stylesheet

rgba(255, 255, 255, 1.0)

Tertiäre Info im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Tertiäre Info im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Tertiäre Info mit hellem Stylesheet

rgba(0, 0, 0, 1.0)

Tertiäre Info im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Tertiäre Info im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

Tertiäre Info, sekundär
  • Schriftfamilie: Segoe UI
  • Schriftgrad: 9 Pt
  • Abbildungsschlüssel: H

Tertiäre Info mit dunklem Stylesheet

rgba(255, 255, 255, 0.6)

Tertiäre Info im Zustand "Zeigen"

rgba(255, 255, 255, 0.8)

Tertiäre Info im Zustand "Gedrückt"

rgba(255, 255, 255, 0.4)

Tertiäre Info mit hellem Stylesheet

rgba(0, 0, 0, 0.6)

Tertiäre Info im Zustand "Zeigen"

rgba(0, 0, 0, 0.8)

Tertiäre Info im Zustand "Gedrückt"

rgba(0, 0, 0, 0.4)

 

In der folgenden Abbildung sehen Sie, wie das Layout und die Typographie von Windows Store-Apps auf einen einfachen Blogartikel angewendet werden:

Ein Beispiel für die Verwendung empfohlener Typographiestile.

Hinweis  Die Windows-Typhierarchie ist für hellen Text auf dunklem Hintergrund optimiert und verwendet bewusst Schriftarten mit geringerer Breite. Falls in Ihrer App überwiegend dunkler Text auf einem hellen Hintergrund angezeigt wird, sollten Sie dieser Hierarchie ggf. nicht folgen, da sich Schriftarten wie Segoe UI Light oder Semilight nicht gut für kleine Schriftgrade eignen (dunkelgrauer Text auf hellgrauem Hintergrund). Breitere Schriftarten wie Regular oder Semibold eignen sich besser für dunklen Text auf hellem Hintergrund.

Falls Sie sich dafür entscheiden, von der Windows 8-Typhierarchie abzuweichen, sollten Sie die Schriftgrade und -schnitte auf ein Minimum beschränken.

Segoe UI-Laufweite (Zeichenabstand)

Die Laufweite (globaler Zeichenabstand) ist für die allgemeine Lesbarkeit der Texte in der Benutzeroberfläche wichtig. Dies gilt insbesondere für Text auf dunklen und komplexen Hintergründen.

Die Anpassung der Laufweite fällt i. d. R. sehr gering aus und ist kaum wahrnehmbar, es sei denn, es handelt sich um sehr große Buchstaben. Diese minimalen Anpassungen können für die Lesbarkeit eines Absatzes oder einer Seite jedoch von großer Bedeutung sein.

Die Laufweite wird in proportionalen und nicht in festen Einheiten wie Pixel oder Millimeter angegeben. Die proportionale Einheit, ein Geviert, entspricht der Schriftgröße in Punkten. Beispielsweise entspricht die Geviertbreite für eine Schriftart in 11 Pt elf Punkten. Legen Sie zum Einstellen der Laufweite die letter-spacing-CSS-Eigenschaft fest.

Basierend auf Schriftgrad und -breite empfehlen wir die folgenden Laufweitenwerte für Segoe UI:

GrößeBreiteLaufweitenwert (Zeichenabstand)
42 PtLight0,00 em
20 PtRegular0,01 em
Alle anderenAlle0,02 em

 

Wenn Sie die WinJS-Stylesheets verwenden, werden diese Laufweitenwerte automatisch festgelegt.

Es wird empfohlen, die Standardlaufweite der Cambria- oder Calibri-Schriftarten zu verwenden.

Segoe UI-Stil-Sets

Windows 8 verwendet eine neue Version von Segoe UI, die über eine Reihe neu gestalteter Standardzeichen, neue Breiten, neue Microsoft OpenType-Alternativen und erweiterte Sprachunterstützung verfügt. Die neu gestalteten Zeichen passen zu anderen Windows 8-Implementierungen besser, bei fetten und normalen Stilen ist die Zeichenbreite jedoch unverändert. Das heißt, dass bestehende Dialogfelder, Inhalte und Websites nicht neu angepasst werden müssen, wenn Sie die neue Version von Segoe UI verwenden.

In der Abbildung sind die Änderungen an den Zeichen dargestellt.

Segoe UI in Windows 7Segoe in Windows 7
Segoe UI in Windows 8Segoe in Windows 8

 

Sie können die Windows 7-Zeichen benutzen, indem Sie das OpenType-Stil-Set SS01 verwenden. Zur Verwendung dieses Sets legen Sie die -ms-font-feature-settings-Eigenschaft wie im folgenden Beispiel dargestellt auf 'ss01' 1 fest:


<p style="font-family: 'Segoe UI'; -ms-font-feature-settings: 'ss01' 1;">
    Windows 7 Segoe UI
</p>

Sie können auch das SS20-Stil-Set verwenden, das hinsichtlich des Entwurfs und des Zeichenabstands zu bevorzugen ist. In der Abbildung sind die Unterschiede zwischen der Windows 8-Standardversion von Segoe UI und den SS01- und SS20-Versionen hervorgehoben

Windows 8-StandardDie standardmäßige Segoe UI-Schriftart
SS01 (kompatibel mit Segoe UI von Windows 7)Die Segoe UI-Schriftart von Windows 7
SS20 (bevorzugter Entwurf und Zeichenabstand)Die SS20-Segoe UI-Schriftart

 

Wenn Sie sich nicht um Abwärtskompatibilität kümmern müssen, sollten Sie das SS20-Stil-Set verwenden.

Segoe UI Symbol

Hinweise zur Verwendung der Schriftart "Segoe UI Symbol" finden Sie in der Symbolliste für Segoe UI Symbol.

Lesen: Cambria

Die meisten Druckmedien verwenden serif-Schriftarten, sodass Benutzer beim Lesen eines Buchs oder einer Zeitung immer eine serif-Schriftart erwarten. Cambria ist eine serif-Schriftart, die speziell für langes Lesen auf dem Bildschirm entwickelt wurde. Verwenden Sie Cambria, wenn Sie große Mengen Text anzeigen, wie z. B. Buch- oder Magazininhalte.

Hinweis   Auch wenn Cambria die Standardschriftart für nicht formatierte eBook-Inhalte ist, können Lese-Apps dem Leser jedoch das Ändern der Schriftart ermöglichen. Es ist außerdem davon auszugehen, dass für eBook-Inhalte verstärkt individuelle eingebettete Schriftarten verwendet werden.

Beachten Sie die folgenden Richtlinien für Lese-Apps:

  • Verwenden Sie ausreichend schmale Textspalten, um zu verhindern, dass die Textzeilen zu lang werden und dann nicht mehr gut lesbar sind. Entsprechende Spezifikationen können Sie dem typographischen Raster entnehmen.
  • Unterteilen Sie lange Texte in einzelne Kapitel oder Abschnitte.
  • Unterstützen Sie die Möglichkeit, das Lesen an der letzten bekannten Stelle fortzusetzen.

Verwenden Sie die folgenden Schriftgrade, wenn Sie die Cambria-Schriftart verwenden: 9 Pt, 11 Pt und 20 Pt. Sie können normale und fette Schriftbreiten verwenden. Es wird empfohlen, die Standardlaufweite beizubehalten.

Im Gegensatz zur Segoe UI-Schriftart stehen mit WinJS keine unterschiedlichen Versionen von Cambria für verschiedene Schriftbreiten zur Verfügung. Legen Sie die Schriftbreite stattdessen mit der font-weight-CSS-Eigenschaft auf normale oder fette Zeichen fest. Im Folgenden finden Sie ein Beispiel für die empfohlenen Cambria-Schriftgrade und -Schriftbreiten.

Standardbreiten und -grade für die Cambria-Schriftart

Lesen und Schreiben: Calibri

Calibri ist eine sans-serif-Schriftfamilie, die für das Lesen langer Texte am Bildschirm entworfen wurde. Verwenden Sie Calibri für Text, der vom Benutzer geschrieben oder bearbeitet wird, wie Text in einer E-Mail oder einem Chatprogramm. Es ist die Standardschriftart in Microsoft Outlook, Microsoft Word und Microsoft PowerPoint.

Wenn Sie Calibri verwenden, legen Sie den Schriftgrad auf 13 Pt und die Schriftbreite auf "normal" fest. Es wird empfohlen, die Standardlaufweite in Calibri beizubehalten.

Im Folgenden finden Sie ein Beispiel für die Calibri-Schriftart:

Die Calibri-Schriftart mit einem Schriftgrad von 13 Pt und der Schriftbreite "normal"

Hinweis  Calibri 13 Pt hat die gleiche Mittellänge wie Segoe UI 11 Pt, sodass beide Schriftarten bei Verwendung in der gleichen Zeile gleich groß erscheinen.

Verwandte Themen

Symbolliste für Segoe UI Symbol
Schnellstart: Hinzufügen von WinJS-Steuerelementen und -Stilen
Windows 8-Silhouette
Richtlinien für Typografie
Richtlinien für Segoe UI Symbol-Symbole

 

 

Anzeigen:
© 2014 Microsoft. Alle Rechte vorbehalten.