Monospace Font Stacks

Fixing Monospace Sizing (Eric Meyer)

• Courier, “Courier New”, “Nimbus Mono L”, “DejaVu Sans Mono”, ”Lucida Console”, monospace; (ars-infomatica)
• Monaco,”Bitstream Vera Sans Mono”, “Lucida Console”,Terminal,monospace; (codestyle)
• Consolas, “Andale Mono WT”, “Andale Mono”, “Lucida Console”, “Lucida Sans Typewriter”, “DejaVu Sans Mono”, “Bitstream Vera Sans Mono”, “Liberation Mono”, “Nimbus Mono L”, Monaco, “Courier New”, Courier, monospace; (site point)

Serif Font Stacks

• “Palatino Linotype”, Georgia, “URW Palladio L”, “Century Schoolbook L”, serif; (ars-infomatica)
  • “Palatino Linotype”, Palatino, Palladio, “URW Palladio L”, “Book Antiqua”, Baskerville, “Bookman Old Style”, “Bitstream Charter”, “Nimbus Roman No9 L”, Garamond, “Apple Garamond”, “ITC Garamond Narrow”, “New Century Schoolbook”, “Century Schoolbook”, “Century Schoolbook L”, Georgia, serif; (site point)
• “Times New Roman”, “Bitstream Charter”, Sylfaen, Times, Georgia, serif; (ars-infomatica)
  • Georgia,”New Century Schoolbook”, “Nimbus Roman No9 L”,serif; (codestyle)
  • Constantia, “Lucida Bright”, Lucidabright, “Lucida Serif”, Lucida, “DejaVu Serif,” “Bitstream Vera Serif”, “Liberation Serif”, Georgia, serif; (site point)
  • Cambria, “Hoefler Text”, Utopia, “Liberation Serif”, “Nimbus Roman No9 L Regular”, Times, “Times New Roman”, serif; (site point)
• Frutiger, “Frutiger Linotype”, Univers, Calibri, “Gill Sans”, “Gill Sans MT”, “Myriad Pro”, Myriad, “DejaVu Sans Condensed”, “Liberation Sans”, “Nimbus Sans L”, Tahoma, Geneva, “Helvetica Neue”, Helvetica, Arial, sans-serif; (site point)

Sans-Serif Font Stacks

• Arial, “Microsoft Sans Serif”, Tahoma, “Nimbus Sans L”, Helvetica, sans-serif; (ars-infomatica)
• Verdana, “Lucida Grande”, “Lucida Sans Unicode”, Geneva, ”URW Gothic L”, sans-serif; (ars-infomatica)
• Corbel, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Liberation Sans”, Verdana, “Verdana Ref”, sans-serif; (site point)
• “Segoe UI”, Candara, “Bitstream Vera Sans”, “DejaVu Sans”, “Bitstream Vera Sans”, “Trebuchet MS”, Verdana, “Verdana Ref”, sans-serif; (site point)

Impact Font Stacks

• Impact, “Arial Black”, sans-serif; (ars-infomatica)
• Impact, Haettenschweiler, “Franklin Gothic Bold”, Charcoal, “Helvetica Inserat”, “Bitstream Vera Sans Bold”, “Arial Black”, sans-serif; (site point)

It seems that with IE7 coming that we might actually be able to count IE7 as a modern browser…. What did I just say? I said that we might be able to count IE7 as a “modern” browser. This is very welcome and strongly desired by the web developer community. Does IE7 mean the end of CSS hacks? No! Does it mean that we will have to hack for IE7? If IE7 has truly joined the ranks of modern browsers then we will not have to. This is a wonderful prospect. However, the need to hack for legacy browsers: IE5, IE6, and older versions of Netscape and Opera, and others will still remain depending on the users of your site. If all of your IE users instantly convert to IE7 as soon as it is publicly available count yourself lucky, but I do not think that this is going to be the rule for what happens, especially in the Enterprise sector, until it has been out for a while and the side effects are known and it has been well tested with their web based applications

IE7 does not mean the end of CSS hacks as we know it, but may be a harbinger that in the future years when most everyone has have upgraded their PCs to get rid of old versions of legacy browsers and most everyone is using IE7 and updated versions of Firefox or Opera then hacks may be a thing of the past. I look forward to the day but it is not going to be any time in the very, very near future.

Font Sizes

This odd 100.01% value for the font size compensates for several browser bugs. First, setting a default body font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. The current “best” suggestion is to use the 100.01% value for this property.

• Community MX
• css-discuss: BrowserBugs

Font Type

• Scott Connect: Accessible Web Typography
• Building Accessible Websites by Joe Clarke

It is not common to have problems with this. I have only had confusion regaurding sepcificity for a given style once or twice, so it is something that is nice to be aware of incase you encounter it.