Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Richtlinien für Typografie

Beschreibung

Die Typografie ist der Dreh- und Angelpunkt der Microsoft-Entwurfssprache. Jedes der Microsoft-Entwurfsprinzipien unterstreicht die Bedeutung der Typografie. Erstmals steht App-Entwicklern eine Gruppe von Frameworks zur Verfügung, die erweiterte typografische Features unterstützen.

Empfohlene und nicht empfohlene Vorgehensweisen

  • Verwenden Sie ein typografisches Raster für das Layout Ihrer Texte.
  • Verwenden Sie Unicode, um Ihre Texte zu verbessern.
  • Wenden Sie Microsoft OpenType-Funktionen global an.
  • Schreiben Sie den ersten Buchstaben im Satz groß.
  • Verwenden Sie in Zahlenbereichen einen Gedankenstrich anstelle eines Bindestrichs.
  • Wenden Sie keine bedingten Ligaturen an, wenn Sie nicht die empfohlenen Schriftarten verwenden.
  • Verwenden Sie keinen ausgerichteten Text.

Weitere Hinweise zur Verwendung

Segoe UI

Die unverkennbare Benutzeroberflächenschriftart Segoe UI wurde in Windows Vista/Office 2007 eingeführt. Diese Schriftart ist ein serifenloses Design in der Tradition von Beschilderungs- und Wegweiserschriften. Seit ihrer Einführung hat Segoe UI die Persönlichkeit aller Microsoft-Angebote geprägt und nicht nur das Erscheinungsbild von Betriebssystemen, Apps und Geräten beeinflusst, sondern auch das von Logos, Branding, Werbung und Verpackung. Diese Schriftart ist die typografische Stimme von Microsoft.

In Windows 8 haben wir bedeutende Aktualisierungen an der Schriftartfamilie Segoe UI vorgenommen. Die wichtigsten Änderungen sind:

  • Segoe UI Light und Segoe UI Semibold wurden optimiert, um die Qualität ihrer Bildschirmdarstellung zu verbessern.
  • Wir haben das Design der Standardziffern sowie das "Q" und das "I" entsprechend der Windows Phone-Version von Segoe angepasst. Sie können weiterhin die Originalzeichen von Windows Vista benutzen, indem Sie ein OpenType-Stil-Set (SS01) verwenden.
  • In Segoe UI Light, Semilight und Semibold wurde für die Anordnung der Zahlen standardmäßig ein proportionaler Ansatz gewählt. Sie können auf die herkömmlichen Zahlen mit fester Zeichenbreite in Windows Store-Apps mit C#/VB/C++ und XAML zugreifen, indem Sie die angefügte Typography.NumeralAlignment-Eigenschaft auf "Tabular" festlegen. Wenn Sie JavaScript und HTML verwenden, legen Sie die font-feature-settings property-Eigenschaft auf "TNUM" fest, um das OpenType-Feature für tabellarische Zahlenabstände (mit fester Zeichenbreite) anzuwenden.
  • Da Entwickler Segoe UI Light oft mit kleineren Schriftgraden als 20 pt verwenden (d. h. kleiner als bei der Entwicklung für die Schriftart vorgesehen), haben wir Segoe UI Semilight hinzugefügt: eine schmale Segoe UI-Version, die bei kleineren Schriftgraden – bis zu 11 pt – sehr gut aussieht. Wir empfehlen diese Schriftart, wenn Text in kleineren Schriftgraden "schlanker" wirken soll.
  • In Windows Vista und Windows 7 wurde Segoe UI für lateinische, griechische, kyrillische und arabische (nur Regular und Bold) Sprachen unterstützt. In Windows 8 haben wir Segoe UI um Unterstützung für Hebräisch, Armenisch und Georgisch erweitert und für Arabisch aktualisiert. Segoe UI umfasst nun Zeichensätze für alle wichtigen europäischen und nahöstlichen Sprachen.
  • Obwohl in der Windows-Benutzeroberfläche keine Kursivformatierung eingesetzt wird, haben wir kursive Varianten für alle fünf Segoe UI-Schriftbreiten hinzugefügt, die in Apps verwendet werden können.
  • Wir haben den Schriftarten für alle Breiten OpenType-Varianten hinzugefügt, einschließlich Kapitälchen, Ligaturen und zahlreicher Schriftschnitte.

In Windows 8.1 haben wir Segoe UI Black und Segoe UI Black Italic mit europaweiter Sprachabdeckung hinzugefügt und so das Angebot an verfügbaren Schriftarten noch mehr erweitert.

Schriftarten für andere Sprachen

Windows 8 enthält auch auf Segoe UI abgestimmte Schriftarten für die meisten anderen Sprachen. Diese Schriftarten sind in zwei Breiten verfügbar: Regular und Bold. Für Japanisch ist keine auf Segoe UI abgestimmte Schriftart verfügbar. Unsere japanische UI-Schriftart (Meiryo UI) beinhaltet aber lateinische Zeichen im Segoe UI-Stil als OpenType-Stil-Set (ss20).

Hier finden Sie eine Liste empfohlener Schriftarten für die folgenden gängigen Sprache und Skripts:

SkriptSchriftart
Latein, Griechisch, KyrillischSegoe UI
ArabischSegoe UI
HebräischSegoe UI
Armenisch und GeorgischSegoe UI
Chinesisch (vereinfacht)Microsoft YaHei UI
Chinesisch (traditionell)Microsoft JhengHei UI
KoreanischMalgun Gothic
ThailändischLeelawadee UI
KhmerLeelawadee UI
LaoLeelawadee UI
Indigene Sprachen Amerikas, darunter Cherokee Gadugi
Afrikanische SprachenEbrima
Indische SprachenNirmala UI
JapanischMeiryo UI

 

Beachten Sie, dass Windows 8.1 darüber hinaus die folgenden Schriftarten bietet:

  • Microsoft YaHei UI Light (verfügbar zur Nutzung bei 20 pt und mehr)
  • Microsoft JhengHei UI Light (verfügbar zur Nutzung bei 20 pt und mehr)
  • Leelawadee UI Semilight (verfügbar zur Nutzung bei 11 pt und mehr)
  • Nirmala UI Semilight (verfügbar zur Nutzung bei 11 pt und mehr)

Falls Sie Standardschriftarten verwenden, können Sie die empfohlenen Benutzeroberflächen- und Dokumentschriftarten für ein Schriftsystem beim Lokalisieren Ihrer App mithilfe der Windows.Globalization.Fonts-APIs bestimmen.

Verwenden alternativer Schriftarten

Die Assoziation von Segoe UI mit Windows 8 und Microsoft hat sowohl Vor- als auch Nachteile. Einerseits können Sie durch die korrekte Verwendung der Schriftart schlagartig die Glaubwürdigkeit Ihrer App erhöhen. Andererseits kann es durch die Schriftart aber schwer werden, Ihre eigene Persönlichkeit oder Marke in die App einzubringen.

Glücklicherweise enthält Windows 8 eine Vielzahl hochklassiger Alternativen zu Segoe UI. Eine Serifenschriftart wie Cambria unterstützt viele Sprache und wirkt traditionell. Calibri, unsere standardmäßige Dokumenterstellungsschriftart, bietet den Vorteil, dass sie Benutzern in der Regel vertraut ist. In Windows 8 wurde Calibri eine Light-Version hinzugefügt, die sich gut als serifenlose Alternative zu Segoe UI eignet. Wie Segoe UI beinhalten Cambria und Calibri erweiterte OpenType-Features. In Windows 8.1 haben wir eine neue Familie von Schriftarten namens Sitka eingeführt, die in verschiedenen Größen verfügbar sind.

Wenn Sie eine Standardschriftart verwenden, sollten Sie sie auf einem PC mit einer Neuinstallation von Windows 8 testen, um sicherzustellen, dass die Schriftart verfügbar ist und keine Installation von Microsoft Office oder einer anderen App erfordert. Windows 8 und Windows 8.1 verfügen unabhängig von der Lokalisierung oder Edition immer über den exakt gleichen Schriftartensatz.

Falls die grundlegenden Windows-Schriftarten nicht Ihren Anforderungen entsprechen, können Sie alternative Schriftarten in Ihrer App einbetten. Bedenken Sie aber, dass dies Rendering- und Lizenzierungsprobleme mit sich bringen kann, z. B.:

  • Die meisten Drittanbieterschriftarten sind weniger optimiert als viele der Windows-Standardschriftarten. Sie müssen daher gründlich in den gewünschten Schriftgraden getestet werden.
  • Die meisten Schriftartlizenzen lassen zwar irgendeine Form der Dokumentschriftarteinbettung zu, aber keine Weiterverteilung oder Einbettung der Schriftart in einer App oder einem Spiel. Lesen Sie die Lizenz vor dem Einbetten einer Schriftart sorgfältig durch, und wenden Sie sich an den Urheber, falls Sie nicht sicher sind, ob Sie sie einbetten dürfen.

Auswählen der richten Schriftgrade und -breiten

Seit den Anfängen des Desktoppublishings gibt es eine Fülle von Schriftgraden und -breiten. Die ersten Desktoppublisher verwendeten oft viele unterschiedliche Schriftgrade und -breiten im selben Dokument – das Markenzeichen der Amateurtypografie. Bei zu vielen Schriftgraden und -breiten ist es schwer, eine effektive Informationshierarchie zu schaffen. Aus diesem Grund wird in der Windows 8-Benutzeroberfläche nur eine Handvoll von Schriftgraden und -breiten verwendet:

  • Segoe UI Light 42 pt für Titel
  • Segoe UI Light 20 pt für Titel
  • Segoe UI Semilight 11 pt für Textkörper
  • Segoe UI Regular 9 pt für Untertitel

Die vollständige Typhierarchie finden Sie unter Richtlinien für Schriftarten.

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.

Gestalten der App-Seite

Da der freie Platz um den Text genauso wichtig ist wie der Schriftgrad, empfehlen wir, ein typografisches Raster für die Gestaltung des Textes zu verwenden. Weitere Informationen zur Verwendung des Windows-Rasters finden Sie unter Gestalten einer App-Seite. Zusätzlich zur Verwendung des Rasters sollten Sie besonders auf Ränder und Abstände um Bilder und Abbildungen achten. Ein gutes Layout kann ruiniert werden, wenn der Text schlecht um ein Bild umgebrochen wird oder die Ränder von Seitenelementen nicht einheitlich sind.

8 Tipps für eine gute Typografie

Für eine gute Typografie reicht es nicht aus, die richtigen Schriftarten und -grade in einem geeigneten Abstand zu verwenden. Obwohl es viele Handbücher zur Typografie (siehe Empfohlene Lektüre) gibt, möchten wir Ihnen an dieser Stelle einige Tipps für eine professionelle Typografie geben.

1. Wenden Sie OpenType-Features global an

Falls Sie eine der empfohlenen UI-Schriftarten verwenden, sollten Sie diese OpenType-Features auf den gesamten Text in Ihrer App anwenden: Kerning (kern), bedingte Ligaturen (dlig) und Stil-Set 20 (ss20).

  • Kerning verbessert den Zeichenabstand des Textes und ist bei größeren Schriftgraden am augenfälligsten (ein Beispiel hierfür ist das "To" in den folgenden Vorher- und Nachher-Abbildungen).
  • Ligaturen sind wichtige Elemente einer hochklassigen Typografie. Um zu verhindern, dass Dialogfelder in alten Inhalten dynamisch umgebrochen werden, haben wir die Standardligaturen aber als bedingte Ligaturen in Segoe UI codiert, sodass sie aktiviert werden müssen, wenn Sie sie verwenden möchten.
  • Das OpenType Stil-Set 20 bietet Ihnen Zugriff auf bevorzugte Zeichenformen und -abstände. (Dieses Stil-Set ist besonders für Zahlen nützlich.) Ein weiterer Vorteil dieses Stil-Sets ist, dass es bei allen Segoe UI-Schriftbreiten und -Schriftschnitten eine konsistente Textdarstellung sicherstellt.

Falls Sie die empfohlenen UI-Schriftarten nicht verwenden, empfiehlt es sich, nur Kerning (kern) und Standardligaturen (liga) anzuwenden. Wenden Sie keine bedingten Ligaturen an, wenn Sie nicht die empfohlenen Schriftarten verwenden.


<p class='note'>
    6/16/2012<br />
    To: Simon Daniels<br />
    Please find enclosed five flashing baffles.
</p>



.note {
    font-family: 'Segoe UI';
    -ms-font-feature-settings: 'kern' 1, 'dlig' 1, 'ss20' 1, 'lig' 1
}


Die folgenden Abbildungen zeigen den Text vor und nach dem Anwenden von OpenType-Features.

VorherNachher
Text vor dem Anwenden von OpenType-FeaturesText nach dem Anwenden von OpenType-Features

 

2. Nutzen Sie die Möglichkeiten von Unicode

Die beste Möglichkeit, um Ihren Text professioneller wirken zu lassen, besteht darin, reinen ASCII-Text durch die Verwendung der korrekten Zeichen zu vermeiden:

  • Vermeiden Sie gerade Anführungszeichen und Apostrophe.
  • Verwenden Sie das Multiplikationssymbol anstelle des klein geschriebenen "x".
  • Verwenden Sie als Trennzeichen für Uhrzeiten ggf. das Verhältnissymbol anstelle eines Doppelpunkts.
  • Verwenden Sie korrekte Gedankenstriche anstelle von Bindestrichen oder dem Minuszeichen.

Am häufigsten wird der Bindestrich fälschlicherweise in Zahlenbereichen verwendet. Verwenden Sie stattdessen einen Gedankenstrich. Fügen Sie als zusätzliche typografische Feinheit ein schmales Leerzeichen vor und nach dem Gedankenstrich hinzu. Setzen Sie schlussendlich den Gedankenstrich außerdem bei Zahlen ohne Ober-/Unterlängen oder Text in Großbuchstaben etwas hoch, sodass er sich in der Mitte des Zeichens befindet.

Wenn in der App Inhalte angezeigt werden, die nicht von Ihnen gesteuert werden, z. B. Newsfeeds, können Sie diese Inhalte schnell automatisch korrigieren lassen, indem Sie die grundlegenden Verfahren zum Suchen und Ersetzen für Zeichenfolgen verwenden.

Im Folgenden sehen Sie einige Beispiele dafür, wie Sie Ihren Text mit Unicode verbessern können.

Ohne Unicode-SymboleMit Unicode-SymbolenZu verwendende Unicode-Codepunkte
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+201C, U+201D
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+2019
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+2236
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+00D7
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+00BD
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+2026
Text ohne Unicode-SymboleText mit Unicode-SymbolenU+2013, U+200A (winziger Zwischenraum)

 

Unicode enthält auch Tausende von Symbolen, darunter 722 Emoticons, die dem Standard hinzugefügt wurden. Sie können viele dieser Symbole in Ihrer App anstelle von Text und Bitmaps verwenden. Eine Liste aller verfügbaren Symbole finden Sie unter Symbolliste für Segoe UI Symbol.

3. Schreiben Sie den ersten Buchstaben im Satz groß

Bei der Textkommunikation ist die weltweit angewandte Herangehensweise den ersten Buchstaben im Satz groß zu schreiben. Das Verwenden von ausschließlich Großbuchstaben oder Kleinbuchstaben als Stilmittel ist in internationalen Schreibsystemen, bei denen nur Groß- bzw. Kleinschreibung verwendet wird, nicht anwendbar. Indem Sie den ersten Buchstaben im Satz groß schreiben, machen Sie die App einem breiteren Publikum zugänglich.

4. Verwenden Sie OpenType-Features selektiv

Wenn Sie den ersten drei Regeln folgen, sieht Ihr Text bereits recht gut aus. Eine noch professionellere Optik können Sie erzielen, indem Sie OpenType-Features auf bestimmte Teile des Textes anwenden. Verwenden Sie z. B. das OpenType-Feature Kapitälchen für Akronyme. Dieses Feature verwendet echte Kapitälchen (keine skalierten Großbuchstaben). Falls Ihr Inhalt Zahlen enthält, können Sie das Feature für Zahlen im alten Format auf den Text anwenden. Dieses Feature verwendet Zahlen im alten Format (auch als klein geschriebene Zahlen bezeichnet), die im Inhalt möglicherweise besser aussehen.

Hier ist ein Beispiel:


<p style="font-family: ’Segoe UI’;" >
   In <span style="font-feature-settings: ’onum’ 1;">2012</span> <span style="font-feature-
   settings: ’c2sc’ 1;">NASA</span> sent <span style="font-feature-settings: ’onum’ 1;">5</span> 
   astronauts to the <span style="font-feature-settings: ’c2sc’ 1;">ISS</span>
</p>

Vor dem Anwenden des Features für Zahlen im alten Format:

Text vor dem Anwenden des Features für Zahlen im alten Format

Nachher:

Text nach dem Anwenden des Features für Zahlen im alten Format

5. Bearbeiten Sie Text

Die Bearbeitung von Text ist ein Aspekt der Typografie, der häufig übersehen wird. Viele Entwickler vergessen, dass der Text selbst geändert werden kann. Wenn der Text aber nicht gut geschrieben und verständlich ist, spielt es auch keine Rolle, wie er aussieht.

6. Nutzen Sie Kerning, Laufweite, Silbentrennung und Ausrichtung effektiv

Jeder Schriftartentwickler wird Ihnen sagen, dass der Abstand zwischen Zeichen genauso wichtig ist wie die Form der Zeichen. Kerning (siehe erste Regel) passt den Abstand zwischen bestimmten Buchstabenpaaren an, um den Zeichenabstand zu verbessern. Wir empfehlen, Kerning für alle Inhalte zu verwenden.

Durch die Laufweite werden dagegen gleichmäßige Abstände zwischen allen Buchstaben in einer Zeichenfolge hinzugefügt (oder entfernt). Da der standardmäßige Zeichenabstand einer Schriftart oft für die Lesbarkeit bei einem bestimmten Schriftgrad optimiert ist, gibt es Fälle, in denen es sinnvoll ist, den Abstand etwas zu vergrößern. Laufweitenwerte von 0,01 em oder 0,02 em können u. U. hilfreich sein.

Bei vollständig ausgerichtetem Text sind gute Abstände schwierig. Wenn der Text durch Ausrichtung an einen Container angepasst wird, leidet der Zeichenabstand immer. Bei ausgerichtetem Text ziehen sich in der Regel schlangenartige weiße Lücken (große Lücken zwischen Wörtern) durch den Inhalt. Vermeiden Sie komplett ausgerichteten Text. Beschränken Sie sich nach Möglichkeit auf linksbündige Ausrichtung, und verwenden Sie die Silbentrennung, damit der rechte Rand des Textes nicht zu zerklüftet aussieht.

7. Verwenden Sie schriftartbasierte Steuerelemente

Eines der bestgehüteten Geheimnisse der Windows-Typographie ist, dass viele der Schaltflächen, Symbole und Steuerelemente in der Benutzeroberfläche schriftartbasiert sind. Es handelt sich bei ihnen nicht um Bitmaps oder SVGs (Scalable Vector Graphics), sondern um Glyphen, die dem benutzerdefinierten Unicode-Bereich der Schriftart Segoe UI Symbol zugeordnet sind. Viele Spitzen-Apps verwenden den gleichen Ansatz für ihre Symbole und Steuerelemente.

Schriftartbasierte Symbole und Steuerelemente werden wie normale Schriftartzeichen skaliert, sie können in einer Linie neben anderen Textelementen angeordnet und mittels Schichtung farbig angezeigt werden. Windows 8.1 unterstützt vollständig farbige Schriftarten und erweitert so die Möglichkeiten der schriftartenbasierten Steuerung.

8. Lassen Sie den Leser die Leseoberfläche anpassen

Fügen Sie Einstellungen hinzu, mit denen Benutzer die Größe des Textkörpers ändern können, ohne dass sich dies auf systemweite Einstellungen auswirkt. Wir empfehlen folgende Werte: klein (11 pt), mittel (14 pt) und groß (18 pt). Außerdem könnte die App Benutzern auch die Möglichkeit bieten, zwischen dunklem Text auf hellem Hintergrund (beste Lesbarkeit) und dunklem Text auf farbigem Hintergrund oder hellem Text auf dunklem Hintergrund zu wählen, was in bestimmten Umgebungen die Ermüdung der Augen reduzieren kann. Die Möglichkeit, zwischen unterschiedlichen Schriftartoptionen für den Textkörper wählen zu können, wird bei Benutzern Anklang finden, die diese Funktion von bestimmten E-Readern gewöhnt sind. Beschränken Sie die Auswahlmöglichkeiten auf eine übersichtliche Anzahl geeigneter Schriftarten für die jeweilige Sprache.

Ziehen Sie beim Erstellen einer Lese-App das Hinzufügen eines Flyouts in der unteren App-Leiste in Erwägung, das den Benutzern das Wechseln zwischen Textgrößen ermöglicht. Mithilfe des Schriftgrads Segoe UI Symbol können Sie ein konsistentes, vorhersagbares Benutzererlebnis erstellen. Eine Übersicht über die Standardsymbole finden Sie unter Symbolliste für Segoe UI Symbol.

Das Bild unten zeigt eine Nachrichten-App mit einem Flyout zum Ändern der Textgröße, das sich in der App-Leiste befindet.Screenshot der Nachrichten-App mit einem erweiterten Textgrößen-Flyout

Empfohlene Lektüre

Mit den hier beschriebenen Empfehlungen können Sie Ihre App typografisch ansprechend gestalten. Wir haben hier allerdings nur an der Oberfläche dessen gekratzt, was mit modernen Schriftarten und OpenType alles möglich ist. Falls Ihr Interesse geweckt ist, empfehlen wir Ihnen folgende Bücher:

  • The Elements of Typographic Style von Robert Bringhurst
  • Inside Paragraphs: Typographic Fundamentals von Cyrus Highsmith
  • Detail in Typography von Jost Hochuli
  • Thinking with Type von Ellen Lupton
  • Stop Stealing Sheep von Erik Spiekermann und E.M. Ginger

Der IEBlog-Artikel Using the whole font bietet eine gute Einführung in die Verwendung von Cascading Stylesheets (CSS) OpenType-Features, und in den verknüpften Demos von Monotype, FontShop und Font Bureau wird gezeigt, welche Möglichkeiten die Technologie bietet.

Verwandte Themen

Für Designer
Richtlinien für Schriftarten
Beschriftung (oder Textblock)
Richtlinien für Segoe UI Symbol-Symbole
Gestalten einer App-Seite
Richtlinien für Flyouts (Windows Store-Apps)
Für Entwickler (HTML)
font-feature-settings property
Für Entwickler (XAML)
Windows.Globalization.Fonts
Angefügte Eigenschaft „Typography.NumeralAlignment“

 

 

Anzeigen:
© 2017 Microsoft