Search

• Articles
• Discussion
• Projects
• About Us

byMegan McDermott, 10 November 2007 - 4:48pm

Web designers often feel that they are restricted to a basic set ofcore web fonts. This small set of fonts has been widely distributed and most designers stick to them, just to be on the safe side. However, when you look at the fonts available on the three most widely used operating systems, you can see that this really isn't necessary.

All three operaing systems come with a variety of fonts, manyof which can be reasonably substitued for each other without affecting the design.You can also choose fonts that have the same look and feel that you want, but may not be exact matches. This allows for much more flexibility in design while still ensuring compatibility across operating systems.

Stacking fonts in your CSS allows you to cover all your bases by specifying back-up fonts for users who don't have your preferred typeface. For example, the font stack for this site is:

font-family: "Lucida Grande","Lucida Sans Unicode","Eras Medium ITC","DejaVu Sans",Helvetica,Verdana,sans-serif

For more on creating great font stacks, readBetter CSS Font Stacks from Unit Interactive.

About these tables

• Ubuntu is used as a sample Gnu/Linux operating system.Other distributions may have different fonts installed. If you canprovide a list of pre-installed fonts on other distrospleasesend it to me and I will incorporate it into this article.
• Fonts listed in the same row are near equivalents of eachother, with the exception of the last row in each table which is usedfor other/non matching fonts. The "matching" fonts may not match exactly but in practical use can be subsituted for each other withoutproblems
• All font samples were taken from a sample page in Firefox at .9em (Linux,Mac,Windows). Keep relative sizing in mind when choosing a list of fonts to specify (i.e. you don't want big sizing variations depending on which font the user has installed).
• The "Installed with MS Programs" column lists typefaces incuded with common Microsoft applications. You can probably expect that most Windows users have some of these applications installed, and some Mac users may have Office installed as well. Non-starred entires are installed with all versions of Office 2003/2007 and many other programs. Starred (*) entries are installed primarily with Office Professional Plus 2007 but some also come with with Office 2003 Professional Edition, Publisher, and other programs. Entries with a - next to them are installed with Office 2003 and other older programs (that are still quite pervasive at this point). Details are available in theMicrosoft Typography Database.
• In the Mac OSX column, entries with a + are included with OSX 10.5 (Leopard), entries with a - are included with versions prior to 10.4 (but not in 10.4)
• Starred entries in the Ubuntu column are installed by the mscorefonts package. According to asurvey on the Ubuntu Forums, approximately 74% of Ubuntu users have mscorefonts installed.

Serif

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
	*
			*
	*
		-
		-
			*
* *	* * * * * * * * * * * * * * * *

• *Cambria and Constantia are part of the Windows Vista fontpack and are included with Windows Vista and as an upgrade toOffice 2003. These arecleartypefonts which means that they render differently than traditional fonts(anti-aliasing is used to make them appear smoother). On Windows theytend to look bad on non-Microsoft web browsers when cleartype is notenabled in the desktop preferences. Cleartypeis not enabled bydefault on Windows XP but it is included as an option when installing IE 7.
• Palatino and New York are not installed by default on OS 10.4 but are installed on previous versions

Sans Serif

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
			*
			*
		+
			*
			*
* * *	* * * * * * * *	+

• DejaVu is a modification of Bitstream Vera Sans, with additional unicode characters

Script/Handwriting

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
	*
			*
	*	+Papyrus Condensed
	* * * * * * * * * * * * * * * * *

• One way to counter the problem with script fonts in Windows(namely, that only Comic Sans is installed by default), would be tospecify a nice serif as your last option (Georgia, for example) andmake it italic. Script fonts usually don't have italic variants, sopeople with nice script fonts installed will see the font you intendedwhile others will see italic Georgia which isn't quite the same butwould still look nice. This technique would also work for decorativefonts or other categories where no suitable alternative is available onsome operating systems.

Monospace

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
			*
*	* *	+	*

Decorative

Windows	Installed with MS Programs	Mac OS 10.4	Ubuntu (Linux)
	* * * * * * * * * * * * * * * * * * * * * * * * * * * * - * * * - - * *		*

Symbol/Dingbat

(link to full character set where available)

Of course, it is probably not a good idea to use these fonts in web pages! However, they are listed here just to keep this resource complete.

Foreign Language

This list is by no means complete and is based on what I wasable to find out online about various typefaces. If you have more information thatcould help to complete this list pleasecontact me.

Notes:

• In the OSX column, fonts marked with ** are part of the Additional Fonts package (installed by default)
• In Ubuntu, many of these fonts will look the same as Deja Vu/Bitstream Vera Sans when typing latin characters. You do not have 10 versions of the same font under different names – these are foreign language variations. Foreign language support must be enabled in some cases to see the characters (I think ???).

Discussion

References:

• Mac Fonts from Apple
• List of System fonts in Mac OS X (includes fonts installed with iWork and iLife, which are usually included with OSX)
• Common fonts to all versions of Windows & Mac equivalents
• Microsoft Typography Database
• Fonts installed with Windows XP
• Fonts available in each version of Windows
• Font supplied with Window Service Pack 2
• Fonts installed with Office
• South Asian Script Fonts
• Indic font list
• Fonts that ship with Adobe Creative Suite 3

How-to's

• Better CSS Font Stacks - explains how to create a font stack and recommends some attractive stacks for both paragraphs and headings.

About the Author

Megan is co-founder and editor of A Padded Cell and lead administrator atThe Webmaster Forums. She has been designing websites since 1997 and currently works at theUniversity of Waterloo. In her spare time she likes practicing yoga and being nice to the environment. Read herweb design blog at MeganMcDermott.com.

Discussion topics

• Webmaster's Corner
• Web Design and Graphics
• HTML, CSS, and Javascript
• Web Programming and Application Development
• Web Database Development
• Web Hosting and Domain Names
• Server Management
• Promotion and Marketing
• Search Engine Challenges
• Online Business and eCommerce
• Website Critique Area
• Introductions
• Computer Help
• Market Place
• TWF Feedback and Announcements
• Off-Topic Chat

footer menu

• Contact us
• Contribute
• Advertise
• Hire us
• Login

aPaddedCell © Copyright 2006-2007InterMedia. Site and all articles (unless otherwise specified) licensed under aCreative Commons License.