Common fonts to all versions of Windows & Mac equivalents

Introduction

Here you can find the list with the standard set of fonts common to all versions of Windows and their Mac substitutes, referred sometimes as «browser safe fonts». This is the reference I use when making web pages and I expect you will find it useful too.

If you are new to web design, maybe you are thinking: «Why I have to limit to that small set of fonts? I have a large collection of nice fonts in my computer». Well, as seasoned web designers already know, browsers can use only the fonts installed in each computer, so it means that every visitor of your web page needs to have all the fonts you want to use installed in his/her computer. Of course, different people will have different fonts installed, and thus come the need of a standard set of fonts. Fortunately, CSS allows set several values for the font-family property, which eases the task a bit.

If you want to know how the fonts are displayed in other OS’s or browsers than yours, after the table you can find several screen shots of this page in different systems and browsers. Also, you can take a look to the list of the default fonts included with each version of Windows.

The list

First, a few introductory notes:

• The names in grey are the generic family of each font.
• In some cases the Mac equivalent is the same font, since Mac OS X also includes some of the fonts shipped with Windows.
• The notes at the bottom contains specific information about some of the fonts.

Windows fonts / Mac fonts / Font family

Normal style	Bold style
Arial, Arial, Helvetica , sans-serif	Arial, Arial, Helvetica , sans-serif
Arial Black, Arial Black, Gadget , sans-serif	Arial Black, Arial Black, Gadget , sans-serif
Comic Sans MS, Comic Sans MS 5 , cursive	Comic Sans MS, Comic Sans MS 5 , cursive
Courier New, Courier New , monospace	Courier New, Courier New , monospace
Georgia 1 , Georgia , serif	Georgia 1 , Georgia , serif
Impact, Impact 5 , Charcoal 6 , sans-serif	Impact, Impact 5 , Charcoal 6 , sans-serif
Lucida Console, Monaco 5 , monospace	Lucida Console, Monaco 5 , monospace
Lucida Sans Unicode, Lucida Grande , sans-serif	Lucida Sans Unicode, Lucida Grande , sans-serif
Palatino Linotype, Book Antiqua 3 , Palatino , serif	Palatino Linotype, Book Antiqua 3 , Palatino , serif
Tahoma, Geneva , sans-serif	Tahoma, Geneva , sans-serif
Times New Roman, Times New Roman, Times , serif	Times New Roman, Times New Roman, Times , serif
Trebuchet MS 1 , Trebuchet MS , sans-serif	Trebuchet MS 1 , Trebuchet MS , sans-serif
Verdana, Verdana, Geneva , sans-serif	Verdana, Verdana, Geneva , sans-serif
Symbol, Symbol (Symbol 2 , Symbol 2 )	Symbol, Symbol (Symbol 2 , Symbol 2 )
Webdings, Webdings (Webdings 2 , Webdings 2 )	Webdings, Webdings (Webdings 2 , Webdings 2 )
Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )	Wingdings, Zapf Dingbats (Wingdings 2 , Zapf Dingbats 2 )
MS Sans Serif 4 , Geneva , sans-serif	MS Sans Serif 4 , Geneva , sans-serif
MS Serif 4 , New York 6 , serif	MS Serif 4 , New York 6 , serif

1 Georgia and Trebuchet MS are bundled with Windows 2000/XP and they are also included in the IE font pack (and bundled with other MS applications), so they are quite common in Windows 98 systems.

2 Symbolic fonts are only displayed in Internet Explorer, in other browsers a font substitute is used instead (although the Symbol font does work in Opera and the Webdings works in Safari).

3 Book Antiqua is almost exactly the same font that Palatino Linotype, Palatino Linotype is included in Windows 2000/XP while Book Antiqua was bundled with Windows 98.

4 These fonts are not TrueType fonts but bitmap fonts, so they won’t look well when using some font sizes (they are designed for 8, 10, 12, 14, 18 and 24 point sizes at 96 DPI).

5 These fonts work in Safari but only when using the normal font style, and not with bold or italic styles. Comic Sans MS works in bold but not in italic. Other Mac browsers seems to emulate properly the styles not provided by the font (thanks to Christian Fecteau for the tip).

6 These fonts are present in Mac OS X only if Classic is installed (thanks to Julian Gonggrijp for the corrections).

How the fonts look in different systems and browsers

• Mac OS X 10.4.8, Firefox 2.0, font smoothing enabled (thanks to Juris Vecvanags for the screen shot)
• Mac OS X 10.4.4, Firefox 1.5, font smoothing enabled (thanks to Eric Zavesky for the screen shot)
• Mac OS X 10.4.11, Safari 3.0.4, font smoothing enabled (thanks to Nolan Gladius for the screen shot)
• Mac OS X 10.4.4, Safari 2.0.3, font smoothing enabled (thanks to Eric Zavesky for the screen shot)
• Windows Vista, Internet Explorer 7, ClearType enabled (thanks to Michiel Bijl for the screen shot)
• Windows Vista, Firefox 2.0, ClearType enabled (thanks to Michiel Bijl for the screen shot)
• Windows XP, Internet Explorer 6, ClearType enabled
• Windows XP, Firefox 1.0.7, ClearType enabled
• Windows XP, Internet Explorer 6, Basic font smoothing enabled
• Windows XP, Firefox 1.0.7, Basic font smoothing enabled
• Windows 2000, Internet Explorer 6, Basic font smoothing enabled
• Windows 2000, Firefox 1.0.7, Basic font smoothing enabled
• Linux (Ubuntu 7.04 + Gnome), Firefox 2.0 (thanks to Juris Vecvanags for the screen shot)

Note that while the ClearType smoothing is applied always, the basic font smoothing of Windows 98/2000/XP is applied only to certain font sizes. That sizes can be specified by the font designer, but usually they are in the ranges of 0-6 and 14+ points (pt).

The Mac font list was obtained from the Browser Safe Fonts PDF of webbedEnvironments and from the List of fonts in Mac OS X of the Wikipedia.

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.