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 the same 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.

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.

¹ 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.

² 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).

³ 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.

⁴ 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).

⁵ 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).

⁶ These fonts are present in Mac OS X only if Classic is installed.

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.

*Web Site Design...*
Needs analysis To start, a brief discovery phase identifies the website's marketing goals, technical requirements, branding strategy and measurements of success. Careful attention is paid to market competitors, customer feedback (when available), and input from client team members. WILSOL design then works with the client to identify a delivery date and implementation timeline, after which an extranet site for the project is established to make project deliverables available to the client.	Architecture Existing and proposed content, functional/navigational elements, and inter-site promotions are all factored into the site's information architecture. Ideally, the sitemap maintains a balance between breadth and depth, requiring as few clicks as possible to any given piece of content, while not overwhelming the user with too many choices at once. Content that may be featured on the site's home page is identified, as is lead-generating "premium content" and any related forms.	Design Once an information architecture has been finalized, the site's page layout, look and feel, and branding are designed through a series of Photoshop screen mockups. Typically, three or four mockups are produced for a given design, including the site's home page and two or three prominent content pages. Feedback is solicited from the client, after which one or more rounds of iteration are made to the design. Depending on the project's scope and timetable, multiple design directions may be produced.	Production With a final design in hand, cascading style sheets are written to define text formatting, screen layout, and navigation elements. Content pages are authored in HTML/PHP, and images are optimized for efficient download times. Throughout production, SEO best practices are followed to ensure the site's code is optimized for search engines. WILSOL design will work with the client to identify opportunities within the site where search keywords can be applied and optimized.
*QA & launch* The website is tested and debugged on the latest general-release version of Internet Explorer, Firefox, Chrome and Safari, along with any additional browsers and versions identified by the client during the needs analysis phase. Once all revisions, additions, and testing are completed, the site is uploaded to the client's production server for public deployment. WILSOL design will then work with the client to ensure a clean site launch, identifying and correcting any issues that may arise.
*Options such as an interactive database & much more...*
*Needs analysis* Discussions are held with the client's project managers to identify the goals, technical requirements, and measurements of success for the application's user interface. A usage model is mapped out, existing user feedback (when available) is reviewed, and navigation alternatives are considered. WILSOL design then works with the client to identify a delivery date and implementation timeline, after which an extranet site for the project is established, though which project deliverables available to the client.	Specification The application's features and functionality are mapped to an information architecture, defining the navigation pathways throughout the user interface. Ideally, the architecture strikes a balance between breadth and depth, minimizing clicks to commonly-used features, without bombarding the user with too many options at once. Where possible, redundant means of accessing commonly used features are built into the information archicture, accounting for differences in usage patterns among users.	Design Once an information architecture is finalized, the application's screen layout, look and feel, and navigation are designed through a series of Photoshop screen mockups. Typically, 3-4 mockups are initially produced, focusing on unique screen types or high-value functionality. Feedback is solicited from the project team, after which one or more rounds of iteration are made to the design. Depending on the project's scope and timetable, additional screens may be mocked up prior to prototyping.	Prototyping With a final design in hand, a clickable model of the application's user interface is prototyped. CSS is written to define text formatting, screen layout, and navigation elements such as menus and dialogs. Key screens are authored in HTML/PHP, while custom icons are designed for inclusion in the user interface. If desired, end-user testing is conducted to validate navigation and usability. Depending on the scope of the web application, all or some of its features and functionality may be prototyped, at the discretion of the client.
*Integration* The application prototype is tested and debugged on the latest general-release version of Internet Explorer, Firefox, Chrome and Safari, along with any additional browser versions identified by the client during the needs analysis phase. As application modules and discreet UI components are finalized, prototype code is delivered to the client's production engineers for integration. WILSOL design will then work with the client to ensure the UI is grafted onto the application framework, identifying and correcting any issues that may arise.

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⁵, cursive	Comic Sans MS, Comic Sans MS⁵, cursive
Courier New, Courier New, Courier⁶, monospace	Courier New, Courier New, Courier⁶, monospace
Georgia¹, Georgia, serif	Georgia¹, Georgia, serif
Impact, Impact⁵, Charcoal⁶, sans-serif	Impact, Impact⁵, Charcoal⁶, sans-serif
Lucida Console, Monaco⁵, monospace	Lucida Console, Monaco⁵, monospace
Lucida Sans Unicode, Lucida Grande, sans-serif	Lucida Sans Unicode, Lucida Grande, sans-serif
Palatino Linotype, Book Antiqua³, Palatino⁶, serif	Palatino Linotype, Book Antiqua³, Palatino⁶, serif
Tahoma, Geneva, sans-serif	Tahoma, Geneva, sans-serif
Times New Roman, Times, serif	Times New Roman, Times, serif
Trebuchet MS¹, Helvetica, sans-serif	Trebuchet MS¹, Helvetica, sans-serif
Verdana, Verdana, Geneva, sans-serif	Verdana, Verdana, Geneva, sans-serif
Symbol, Symbol (Symbol², Symbol²)	Symbol, Symbol (Symbol², Symbol²)
Webdings, Webdings (Webdings², Webdings²)	Webdings, Webdings (Webdings², Webdings²)
Wingdings, Zapf Dingbats (Wingdings², Zapf Dingbats²)	Wingdings, Zapf Dingbats (Wingdings², Zapf Dingbats²)
MS Sans Serif⁴, Geneva, sans-serif	MS Sans Serif⁴, Geneva, sans-serif
MS Serif⁴, New York⁶, serif	MS Serif⁴, New York⁶, serif