Fonts

This design guide was created for Windows 7 and has not been updated for newer versions of Windows. Much of the guidance still applies in principle, but the presentation and examples do not reflect our current design guidance.

Users interact with text more than with any other element in Microsoft Windows. Segoe UI (pronounced «SEE-go») is the Windows system font. The standard font size has been increased to 9 point.

The Segoe UI font.

Segoe UI and Segoe are not the same font. Segoe UI is the Windows font intended for user interface text strings. Segoe is a branding font used by Microsoft and partners to produce material for print and advertising.

Segoe UI is an approachable, open, and friendly typeface, and as a result has better readability than Tahoma, Microsoft Sans Serif, and Arial. It has the characteristics of a humanist sans serif: the varying widths of its capitals (narrow E and S, for instance, compared with Helvetica, where the widths are more alike, fairly wide); the stress and letterforms of its lowercase; and its true italic (rather than an «oblique» or slanted roman, like many industrial-looking sans serifs). The typeface is meant to give the same visual effect on screen and in print. It was designed to be a humanist sans serif with no strong character or distracting quirkiness.

Segoe UI is optimized for ClearType, which is on by default in Windows. With ClearType enabled, Segoe UI is an elegant, readable font. Without ClearType enabled, Segoe UI is only marginally acceptable. This factor determines when you should use Segoe UI.

Segoe UI includes Latin, Greek, Cyrillic, and Arabic characters. There are new fonts, also optimized for ClearType, created for other character sets and uses. These include Meiryo for Japanese, Malgun Gothic for Korean, Microsoft JhengHei for Chinese (Traditional), Microsoft YaHei for Chinese (Simplified), Gisha for Hebrew, and Leelawadee for Thai, and the ClearType Collection fonts designed for document use.

Meiryo includes Latin characters based on Verdana. Malgun Gothic, Microsoft JhengHei, and Microsoft YaHei use a customized Segoe UI. Use of italic versions of these fonts is not recommended. Malgun Gothic, Microsoft JhengHei, and Microsoft YaHei are supplied in regular and bold styles only, meaning italic characters are synthesized by slanting the upright styles. Although Meiryo includes true italic and bold italics, these styles only apply to the Latin characters the Japanese characters remain upright when italic styling is applied.

A variation of Meiryo, called Meiryo UI, is preferred in the ribbons command user interface.

To support locales using these character sets, Segoe UI is replaced with the correct fonts depending on each locale during the localization process.

To license Segoe UI and other Microsoft fonts for distribution with a Windows-based program, contact Monotype.

Note: Guidelines related to style and tone and user interface text are presented in separate articles.

Design concepts

Fonts, typefaces, point sizes, and attributes

In traditional typography, a font describes a combination of a typeface, a point size, and attributes. A typeface is the look of the font. Segoe UI, Tahoma, Verdana, and Arial are all typefaces. Point size refers to the size of the font, measured from the top of the ascenders to the bottom of the descenders, minus the internal spacing (called leading). A point is roughly 1/72 inch. Finally, a font can have attributes of bold or italic.

Informally, people often use font in place of typeface as done in this article but technically, Segoe UI is a typeface, not a font. Each combination of attributes is a unique font (for example, 9 point Segoe UI regular, 10 point Segoe UI bold, and so on).

Serif and sans serif

Typefaces are either serif or sans serif. Serif refers to small turns that often finish the strokes of letters in a font. A sans serif typeface doesn’t have serifs.

Readers generally prefer serif fonts used as body text within a document. The serifs provide a feeling of formality and elegance to a document. For UI text, the need for a clean appearance and the lower resolution of computer monitors makes sans serif typefaces the better choice.

Contrast

Text is easiest to read when there is a large difference between the luminance of the text and the background. Black text on a white background gives the highest contrast dark text on a very light background can provide high contrast as well. This combination is best for primary UI surfaces.

Light text on a dark background offers good contrast, but not as good as dark text on a light background. This combination works well for secondary UI surfaces, such as Explorer task panes, that you want to de-emphasize relative to the primary UI surfaces.

If you want to make sure users read your text, use dark text on a light background.

Affordances

Text can use the following affordances to indicate how it is used:

• Pointer. The I-bar («text select») pointer indicates that the text is selectable, whereas the left-pointing arrow («normal select») pointer indicates that text isn’t.
• Caret. When text has input focus, the caret is the flashing vertical bar that indicates the insertion/selection point in selectable or editable text.
• Box. A box around text that indicates that it’s editable. To reduce the weight of the presentation, the box may be displayed dynamically only when the editable text is selected.
• Foreground color. Light gray indicates that text is disabled. Non-gray colors, especially blue and purple, indicate that text is a link.
• Background color. A light gray background weakly suggests that text is read-only, but in practice read-only text can have any color background.

These affordances are combined for the following meanings:

• Editable. Text displayed in a box, with a text select pointer, a caret (on input focus), and usually on a white background.
• Read-only, selectable. Text with a select pointer and a caret (on input focus).
• Read-only, non-selectable. Text with an arrow pointer.
• Disabled. Light gray text with an arrow pointer, sometimes on a gray background.

Read-only text traditionally has a gray background, but a gray background isn’t necessary. In fact, a gray background can be undesirable, especially for large blocks of text, because it suggests that the text is disabled and discourages reading.

Accessibility and the system font, sizes, and colors

The guidelines for making text accessible to users with disabilities or impairments can be boiled down to one simple rule: Respect the user’s settings by always using the system font, sizes, and colors.

If you do only one thing.

Respect the user’s settings by always using the system font, sizes, and colors.

Developers: From code, you can determine the system font properties (including its size) using the GetThemeFont API function. You can determine the system colors using the GetThemeSysColor API function.

Because you can’t make any assumptions about users’ system theme settings, you should:

• Always base your font colors and backgrounds off system theme colors. Never make your own colors based on fixed RGB (red, green, blue) values.
• Always match system text colors with their corresponding background colors. For example, if you choose COLOR_STATICTEXT for the text color, you must also choose COLOR_STATIC for the background color.
• Always create new fonts based on proportional-sized variations of the system font. Given the system font metrics, you can create bold, italic, larger, and smaller variations.

A simple way to ensure that your program respects users’ settings is to test using a different font size and a high contrast color scheme. All text should resize and display correctly in the chosen color scheme.

Using color fonts for beautiful text and icons

In this post, we’ll introduce you to a text technology called color fonts. We’ll discuss what color fonts are, when they can be useful and how to use them in your Windows 10 apps.

What are color fonts?

Color fonts, also referred to as “multicolor fonts” or “chromatic fonts,” are a relatively new font technology that allows font designers to use multiple colors within each glyph of the font. Color fonts allow apps and websites to draw multicolored text with less code and more robust operating system support than ad-hoc techniques implemented above the text stack.

Most fonts for reading and writing—the fonts you are probably most familiar with—are not color fonts. These fonts define only the shape of the glyphs they contain, either with vector outlines or monochromatic bitmaps. At draw time, a text renderer fills the glyph shape using a single color (the “font color”) specified by the app or document being rendered.

Color fonts, on the other hand, contain color information in addition to shape information. Some approaches even allow fonts to include multiple color palettes, giving the font artistic flexibility. Color fonts typically include fallback information for platforms that do not support color fonts or for scenarios in which color functionality has been disabled. In those situations, color fonts are rendered as normal monochromatic fonts.

One color font you may be familiar with is Segoe UI Emoji—the default font used in Windows to display emoji. Below, you can see an example of a glyph from Segoe UI Emoji rendered in monochrome (left) and in color (right).

Why use color fonts?

Now that you know what color fonts are, let’s talk about how they can be useful.

Color fonts were originally designed to enable multicolored emoji in text communication scenarios. They excel at that task, but they are useful for other scenarios as well. Color fonts offer a way to implement rich text effects with the simplicity and functionality of regular fonts. To apps and the operating system, text rendered in a color font is the same as any other text: It can be copied and pasted, parsed by accessibility tools and so on.

Color fonts are a better alternative to raster graphics for rich text scenarios like website headers or document section titles. Although raster graphics are commonly used in these scenarios, they do not scale well to all display sizes, nor do they provide the same accessibility features as real text. If you find yourself frequently generating raster images of text from multicolored artwork, consider using a color font instead.

Color fonts can also be used for your app’s iconography. Some app developers prefer using icon fonts to standalone image files, due to the convenience and layout functionality offered by fonts. With color fonts, you can pack rich, scalable, full-color icons into a single icon font.

(Note: Starting in Windows 10 Creators Update, you can also achieve scalable vector iconography by using standalone SVG images directly in your XAML app. For more information, see Vector iconography: Using SVG images in your app.)

What kinds of color fonts does Windows support?

The OpenType specification defines several ways to embed color information in a font. Starting in Windows 10 Anniversary Update, Windows supports all of these approaches. The different approaches are summarized below.

Vector-based color fonts define glyph shapes using mathematical curves and lines. They may use the traditional font outline syntax coupled with color palettes (via OpenType’s ‘COLR’ and ‘CPAL’ tables), or they may use embedded SVG assets (via OpenType’s ‘SVG ’ table). These formats excel at representing most iconography compactly, and as vectors, they offer infinite scalability.

Bitmap-based color fonts define glyph shapes using embedded raster graphics, such as PNG images. They may use OpenType’s ‘CBDT’ and ‘CBLC’ tables, or they may use OpenType’s ‘sbix’ table. This approach makes it straightforward to control every pixel of a glyph’s shape and provide photorealistic content, but designers must provide multiple image sizes to ensure high-quality visual scaling.

Using color fonts

From both the developer’s perspective and the user’s perspective, color fonts are “just fonts.” They can be installed and uninstalled from the system in the same way as monochromatic fonts, they can be included in your app package as a local asset, or they can be used as a web font by your website.

In the XAML and Microsoft Edge frameworks, you can style just about any text with a color font in the same way as a regular font, and by default, your text will be rendered in color. However, if your app operates at a lower level and calls Direct2D APIs (or Win2D APIs) to render its text, then it must explicitly request color font rendering.

Using color fonts in XAML

The XAML platform’s text elements (like TextBlock, TextBox, RichEditBox, and FontIcon) support color fonts by default. Simply style your text with a color font, and the styled text will be rendered in color. The following code example shows how to style a TextBlock with a color font that has been packaged with your app assets. (The same technique applies to regular fonts.)

Here is some text.

Applying a color font to a XAML TextBlock

The FontFamily property points to the relative location of a font file that has been added to the app package. Since a single font file may include multiple font families, you also need to specify the desired font family using the hash syntax illustrated above.

If you never want your XAML text element to render multicolor text, set its IsColorFontEnabled property to false. For example, you may choose to have your app render monochromatic text when accessibility features are enabled.

Using color fonts in Microsoft Edge

As with XAML, Edge supports rendering color fonts by default in websites and web apps, including the XAML WebView control. Simply use HTML and CSS to style your text with a color font, and the styled text will be rendered in color.

Using color fonts in Direct2D

In contrast to the UI frameworks, the lower-level graphics APIs, such as Direct2D and DirectWrite, do not render color glyphs by default. This is to avoid unexpected behavior changes in text-rendering apps that were designed prior to color font support.

If your app renders text with Direct2D’s DrawText and DrawTextLayout APIs, you must “opt in” to color glyph rendering. To do so, pass the D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT flag to the relevant drawing method. The following code example shows how to call Direct2D’s DrawText method to render a string in a color font:

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_defaultFillBrush.
m_deviceContext->DrawText(
m_string->Data(),
m_string->Length(),
m_textFormat.Get(),
m_layoutRect,
m_defaultFillBrush.Get(),
D2D1_DRAW_TEXT_OPTIONS_ENABLE_COLOR_FONT
);

Drawing multicolored text with Direct2D’s DrawText method

Using color fonts in Win2D

Like Direct2D, Win2D’s text drawing APIs do not render color glyphs by default.

To opt in to color glyph rendering with Win2D, set the EnableColorFont options flag in the text format object your app passes to the text drawing method. The following code example shows how to render a string in a color font using Win2D:

// The text format that will be used to draw the text. (Declared elsewhere
// and initialized elsewhere by the app to point to a color font.)
CanvasTextFormat m_textFormat;

// Set the EnableColorFont option.
m_textFormat.Options = CanvasDrawTextOptions.EnableColorFont;

// If m_textFormat points to a font with color glyphs, then the following
// call will render m_string using the color glyphs available in that font.
// Any monochromatic glyphs will be filled with m_color.
drawingSession.DrawText(
m_string,
m_point,
m_color,
m_textFormat
);

Drawing multicolored text with Win2D’s DrawText method

Building OpenType SVG color fonts

Color fonts are a relatively recent development in font technology, so support among font-building tools is still in its early stages. Not all types of color font are supported by all font tools, but support continues to improve as color fonts gain popularity.

Building a font from scratch is a complex process, and it’s more than we can cover in this blog post. But color fonts aren’t just for professional type designers—if you’re an app or web designer with a monochromatic icon font, and you’d like to upgrade it to a color font, we’ve developed a small tool to help make the process easier: the OpenType SVG Font Editor.

This app lets you take an existing font and add color by embedding your own SVG artwork for each glyph using a simple drag-and-drop interface. SVG is a popular vector art format supported by tools like Adobe Illustrator and Inkscape. On platforms that support OpenType SVG fonts (like Windows apps, Edge and Firefox), the color glyphs are rendered. Other platforms will automatically fall back to the monochromatic glyphs. For more information, please see the OpenType SVG Font Editor’s GitHub page.

The tool was developed by a group of Microsoft interns on the Windows graphics team. We found the tool useful, so we’ve made it available as an open-source project for others to use and improve.

Conclusion

Color fonts are an exciting new technology that unlocks richer text scenarios than were previously possible without sacrificing platform support for accessibility, fallback, scalability, printing and complex font capabilities. For more information, please see the following resources: