If you’re a regular reader of Dave Shea’s mezzoblue, you probably remember his MOSe concept. The idea is simple: go ahead and use all the latest and greatest CSS tricks, enhancing the page for Mozilla/Opera/Safari users, but leave IE a way out so that your IE viewers still get a decent experience, even if it’s not the same as in a modern browser.
A recent blog entry and related comments over at Whitespace got me thinking…
I’d like to see web designers apply the same thinking to typography. Anyone who has worked on the web has felt the frustration of having only four or five core fonts to work with. Some might even say that we basically have only two really worthy screen fonts that we can count on: Verdana and Georgia. Personally, I still think that Times New Roman, Trebuchet MS, and Arial/Helvetica are decent choices, but many disagree.
I’d like to encourage designers to open their mind and consider using some of the other typefaces that are often pre-installed on computers these days. There really are some great choices that are being completly ignored. Granted, not every user is going to have them, but those who do will get an enhanced experience, and those who don’t will be just fine, so long as you specify appropriate alternates (as in MOSe).
Let us compile a list of useable typefaces that we can count on being installed at least some of the time — as well as good alternates for them that are more reliable. Here’s a few I came up with. I think you’ll notice that there are not only some great faces here, but even some that are considered classics or essentials.
Possible sequence: Futura, Impact, Helvetica, Arial, sans-serif
Possible sequence: Myriad, Helvetica, Arial, sans-serif
Possible sequence: Helvetica Neue, Helvetica, Arial, sans-serif
Possible sequence: Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif
Possible sequence: Arial Rounded MT Bold, Helvetica, Arial, sans-serif
Possible sequence: Hoefler Text, Garamond, Georgia, Times New Roman, serif
Possible sequence: Baskerville, Georgia, Garamond, Times New Roman, serif
Possible sequence: Gill Sans, Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif
Possible sequence: Marker Felt, Comic Sans ?
Possible sequence: Didot, Georgia, Garamond, Times New Roman, serif
Possible sequence: American Typewriter, Courier New, Courier, Monaco, mono
Possible sequence: Brush Script MT, Comic Sans, ?
Possible sequence: Chalkboard, Comic Sans, ?
Possible sequence:Cochin, Georgia, Garamond, Times New Roman, serif
Possible sequence: Optima, Lucida Grande, Lucida Sans Unicode, Verdana, Helvetica, Arial, sans-serif
Possible sequence: Palatino, Georgia, Garamond, Times New Roman, serif
Possible sequence: Book Antiqua, Georgia, Garamond, Times New Roman, serif
Possible sequence: Bookman Old Style, Georgia, Garamond, Times New Roman, serif
Possible sequence: Impact, Arial Black, Helvetica, Arial, sans-serif
As you see, most of the ones I’ve listed are Mac OS X pre-installed fonts. If someone could be kind enough to help me out with which of these are pre-installed on Windows, which are not, and what good fonts may be on Windows but not Mac OS, that would really help towards a comprehensive list.
Here’s a reference I found that details the percentage of computers each font is installed on, per platform:
Also, thanks to Ben, who pointed out the Visibone Font Survey, which also has detailed stats on how many web surfers have each font installed:
001 // JC // 01.23.2004 // 3:52 PM
Book antiqua’s fairly common (I like the goudy old style,garamond,book antiqua,times new roman, times, serif sequence). Copperplate as well. I think wingdings and webdings are on all windows PCs and any mac with IE preinstalled. Lucida console’s pretty common and is an excellent mono font for coding, especially if you bump it from 10pt to 11 or 12
Hmm. I can give you what’s on a default install of winnt server 4. Arial. Comic sans. courier. georgia. impact. marlett. lucida console. MS sans serif. Palatino. MS Serif. Symbol. Tahoma. Times. Trubuchet. Verdana. Webdings. Wingdings. There are also a few bitmapped fonts which may or may not be defaults: modern, roman, script.
002 // Jeff Croft // 01.23.2004 // 3:58 PM
Thanks, JC!
Book Antiuqa is a good addition. It also made me think of Bookman Old Style, which is very common on both platforms (although i’m not very fond of it). Impact, Webdings and Wingdings should definitely be added to my list, as well.
Thanks again. :)
003 // Tim Scollick // 01.24.2004 // 3:53 PM
Or you could just use Flash. It seems to me that more people would have Flash installed than a Futura font.
Just a thought…
004 // Jeff Croft // 01.24.2004 // 4:47 PM
Nothing wrong with using Flash at all. However, it’s clearly less accessible than (X)HTML and also not as easily updated and managed by content management systems.
If Flash works for you, that’s great — but it obviously won’t work in every situation…
005 // Dris // 01.26.2004 // 1:14 PM
Awesome. We’ve heard this said before, but nobody yet has bothered to compile a list of fonts with possible alternatives. Truly a useful resource.
006 // Ben // 01.26.2004 // 2 PM
Isn’t this basically what the Visibone font survey is about? Or am I confused…
007 // Jeff Croft // 01.26.2004 // 2:18 PM
Ben-
Probably so. I’d never seen or heard of this. I’ll check it out.
Thanks.
008 // Shawn // 01.26.2004 // 2:56 PM
Myriad is not included by default with OS X - it is installed by Adobe products, but in an folder that only Adobe would know to look at. Sure, you could copy out into your font folder, but I doubt my Mother would think about that.
Too bad.
Good article though!
009 // Andrew Clover // 01.26.2004 // 3:23 PM
“Myriad Pro” is another name under which the lovely Myriad may be installed. In eitehr case it’s pretty unlikely though IMO.
“Sylfaen” is another useful one, rather similar to Palatino; marginally more seriffy. It’s not listed on Visibone for some reason, but it’s installed by Windows XP.
“Franklin Gothic” also seems often to be installed on XP setups, though I’m not 100% sure where it’s coming from.
010 // Andrew Dunning // 01.27.2004 // 8:10 AM
I was wondering how long it was going to take for someone to write this article.
Yes, Myriad only comes with Illustrator, not Mac OS X. It is installed in the fonts folder, though.
There’s more on the fonts installed with Mac OS X on the Mac OS X site.
Oh, and you forgot the closing quote for American Typewriter, so it’s not displaying correctly.
011 // Jeff Croft // 01.27.2004 // 8:24 AM
Amdrew-
Thanks for the info, and thanks for pointing out my mistake! I’ve fixed it. :)
012 // Citizen K // 01.27.2004 // 8:31 AM
You may also be interested in this article by Mark Newhouse and approaching the subject from an Unix perspective: Fonts for Unix
013 // Andrew Dunning // 01.27.2004 // 8:58 AM
Perhaps it should be noted that Book Antiqua is nearly the same as Palatino. (See Monotype’s Other Arials)
Oh, and I just realized that the closing quote for Marker Felt is missing, too.
014 // Marius Ursache // 01.27.2004 // 2:08 PM
You miss an important point: most of the fonts you mention are print fonts. They don’t have proper hinting and they are less readable onscreen.
Verdana and Georgia were designed having in mind onscreen reading by Matthew Carter. Try to read small type in Verdana, then try to read the same text in the same point size in Arial, Helvetica or other… you will see the difference.
Of course, these could be used for headlines, where hinting is not such a big issue, and where Verdana looks ugly (at point sizes larger than 14).
So my advice - use Verdana and Georgia preferrably for small text and whatever suits you for larger text (such as headlines).
015 // Wilson // 01.27.2004 // 2:09 PM
Good point.
I recently added Lucida Grande to my “humanist sans” list in front of Verdana on a few sites. For some reason I’ve worked on two sites in a row where Frutiger was the identity font, and Lucida looks remarkably like Frutiger at small anti-aliased screen sizes.
I remember specifying Palatino before Georgia back in the olden days even before OS X.
016 // Jeff Croft // 01.27.2004 // 2:18 PM
Marius-
Thanks for pointing this out. I’m well aware that many of these faces don’t have the hinting for body type on the screen, but that still shouldn’t exclude them from our stylesheet. As you say, they still work well as display faces, and don’t forget that CSS can be used for print as well…
017 // Brad // 01.27.2004 // 5:40 PM
This is quite useful, if a little Mac OSX-centric. What I’d really like to see, however, is perhaps a graphical representation of each font next to the HTML-rendered version? That way we (on Windows at work) can at least see what we’re missing out on.
018 // Philippe // 01.27.2004 // 6:55 PM
Interesting list. I did something similar with OS X fonts: http://www.l-c-n.com/lab/font_test/; there is a PDF file available for those few (:-) without OS X (scroll down the page).
p
019 // Matt Brubeck // 01.27.2004 // 9:43 PM
Newer Linux and Unix systems are shipping with the Bitstream Vera Serif, Bitstream Vera Sans, and Bitstream Vera Sans Mono typefaces. These are nicely hinted screen fonts that were commissioned last year by the GNOME free software project. They are now used as default interface and web browser fonts in all recent Linux distributions. The serif font is very similar to Georgia. The sans font is more like Geneva, though it makes an excellent Verdana substitute for web text.
Adding these to your lists of text faces will make your pages look great on lots of Unix systems.
020 // Jeff Croft // 01.28.2004 // 9:16 AM
Indeed. I use the Bitstream Vera fonts in my CSS file on this site — they look great and are on most newer Linux systems (and some other Unixes, too). Great point!
021 // Jens Grochtdreis // 01.29.2004 // 2:45 AM
Your idea is correct, in my view. But it is visible, that you’re thinking from a designer’s point of view. Otherwise you wouldn’t start with a lot of fonts only available an Mac OSX. Where’s the importance of these fonts ? Nearly no one uses a Mac, only those who design for the Web. Why making me think for 2 or 3% users ? Only Windows-fonts are relevant in my eyes. Therefor you should design on a Win-Machine, not on a Mac.
So in my view the last half of your list is interesting. Sorry, but I think, that many designers and programmers oversetimate the importance of their beloved Mac or Linux. Although I’m not a Windows-Fan I must consider, that this system is because of it’s pure mass the only interesting system to design for.
022 // Raena // 01.29.2004 // 4:20 AM
Hell no, I think it’s more interesting to design for all sorts of people.
I’ll second that request for graphics. I was looking at this article at home and thinking, “Gee that looks nice!” Now I’m here at work on a Win XP box and crying. ;)
Handy hint: Gill Sans is installed on this machine and may others as “Gill Sans MT” — the sequence might be better thus: “Gill Sans”, “Gill Sans MT”, etc.
Also, Brush Script shows up on here as Brush Script MT.
023 // Jeff Croft // 01.29.2004 // 10:28 AM
Jens-
I don’t really understand your point. It takes all of 20 seconds to add “Gill Sans” in front of your existing “Verdana, Arial, sans-serif” statement. If Gill Sans is the font you want, why not take those 20 seconds to add it, even if only 3 or 4 percent of the world will see it? What does it hurt?
That’s precisley where I was going with this article — it takes almost no time and effeort to add these elegant fonts to our CSS, and no one gets hurt — even the folks who don’t have them installed.
Why not take an extra 20 seconds to bow to our “beloved Mac and Linux” users? Are we that lazy?
024 // John Y. // 01.29.2004 // 10:38 PM
Another point of note is that those market share numbers refer to the number of computers sold, not computer users - so office telemarketing farms, supermarket checkouts, etc… I’d wager that at least 10% of computer users are doing so on a Mac.
025 // Chris Beach // 02.06.2004 // 8:56 PM
The following statement is ridiculous:
“Go ahead and use all the latest and greatest CSS tricks, enhancing the page for Mozilla/Opera/Safari users, but leave IE a way out so that your IE viewers still get a decent experience, even if it’s not the same as in a modern browser.”
It makes no sense to develop for minority browsers. Like it or not, almost everyone coming to your site will be using IE. Secondly, it is in fact IE that supports more of the latest and greatest CSS tricks, with it’s versatile filter classes, allowing drop shadows, alpha blending effects etc. Also, it’s highly advanced JavaScript DOM allows HTML elements to be neatly iterated using object properties like nextSibling.
Your anti-MS sentiments are all too common amongst narrow-minded techy blogs and I think you should think carefully before designing websites favouring a minority group. That’s not quite “making the most of the internet” is it? You’re kinda missing the point of the whole exercise!
026 // Jeff Croft // 02.07.2004 // 11:38 AM
Chris-
First of all, calm yourself a bit. You’re talking this all way too seriously, my man.
Now, go back and read the comment you’re all in a hissy fit over: I was summarizing someone else’s work in that line. I didn’t even write it. Chill out, Man. This article is about fonts, not CSS tricks. Good god.
But since you brought it up:
“Like it or not, almost everyone coming to your site will be using IE.”
No true. On this site, over half the visitors come from RSS readers, and only about 30% are using IE.
“Secondly, it is in fact IE that supports more of the latest and greatest CSS tricks, with it’s versatile filter classes, allowing drop shadows, alpha blending effects etc. Also, it’s highly advanced JavaScript DOM allows HTML elements to be neatly iterated using object properties like nextSibling.”
All of which isn’t standards compliant and doesn’t appear in the CSS specs. Just what I need. More MS-only code.
“Your anti-MS sentiments are all too common amongst narrow-minded techy blogs and I think you should think carefully before designing websites favouring a minority group.”
I have yet to design a website that favors a minorty group and leaves IE users out in the cold. If you can show me an example of my doing this, I’ll be sure to take you seriously next time.
027 // nate // 02.17.2004 // 4:41 PM
Just FYI, Palatino often goes by Palatina on Windows platforms. They’re pretty much identical; at least I’ve never noticed much difference between them. List both in your font list and you cover most of your bases.
028 // Kevin Ashworth // 02.18.2004 // 11:15 PM
What I want is a good way to make a font sequence like Helvetica Neue Bold Condensed, Arial (bold). The trouble is that you don’t want to say font-weight:bold for the former if it exists. How to combine these? Telling the browser to bold Helvetica Neue Bold Condensed will look awful. Not telling the browser to bold Arial makes it look as if something has been forgotten.
029 // John Prevost // 02.22.2004 // 1:41 AM
How about:
font: “Helvetica Neue Bold Condensed”, “Arial” bold;
I believe that’s the way you’re supposed to do it according to CSS2. Also note that you might be able to do:
font: “Helvetica Neue” bold condensed;
Which would let you do at the top level:
font: “Helvetica Neue” condensed, “Arial”;
and lower just adjust the font-weight happily.
I have no idea if that will work correctly in most browsers and operating systems, though it’s in the spec. (I’m sadly lacking in font families to test it on.)
030 // Hrant // 02.26.2004 // 11:24 AM
One thing Flash can do that HTML can’t is deliver the highest possible quality text rendering - handmade grayscale pixelfonts:
http://www.ultrafonts.com
Please check out my Mana-16. A 13-pixel cut will follow shortly, followed by a 14-pixel serif design that I hope will capably tussle with Georgia!
hhp
031 // Jeff Croft // 02.26.2004 // 11:34 AM
Hrant-
Honored to have you here! I’ve respected your work for quite some time (I regularly read the forums over at Typophile).
In any case, you are absolutley correct. Flash is great when you need the absolutle highest quality possible text rendering. On the other hand, it lags behind HTML in accessibility, ease-of-updaing, etc. It’s a tradeoff, and one that each designer has to make for his/herself on each individual project. I’m not really a big Flash guy — but that’s not because I don’t respectg what it can do. I think it’s a great technology. I simply grew up coding HTML (I started in 1994) and haven’t really branched out as much as I probably should have. :)
032 // Hrant // 02.26.2004 // 11:51 AM
Glad to be here! This is a nice-looking blog. And the way you have the text sizing is exactly what I’ve been preaching for a while now. It bypasses the (hare-brained) browser sizing but still allows the user the change size.
Flash vs HTML: Don’t get me wrong, I really dislike the fact that Flash is so “closed”, unsearchable, etc. It would be so much better if OSes supported proper onscreen rendering (or robust font embedding), but they don’t. :-(
If somebody could write a “text engine” for flash that could take meta level formatting (leading, margins, etc.) and allow you to just dump in some text (and also churn out parallel HTML pages that are searchable and would point to the “real” Flash version) that would be killer.
hhp
033 // Charles Chapman // 04.23.2004 // 3:25 PM
VERY useful resource!! Thank you very much!
034 // 小灵通 // 06.09.2004 // 7:11 AM
小灵通
035 // Rezepte // 10.15.2004 // 8:56 PM
Rauchen in der schwangerschaft schadet ihrem kind edustartpage
036 // Stephen Coles // 12.15.2004 // 1:59 AM
Despite its name, American Typewriter is not a monospaced font - so your sequence might be inappropriate.
037 // Trevor Curtis // 06.19.2006 // 8:20 PM
It might be worth keeping in mind all the fonts available on a default windows 2000/xp install, as well as everything most copies of MS Office include. There’s some interesting alternates in there. http://web.tampabay.rr.com/bmerkey/examples/fonts-in-MS-products.htm I think Century Gothic has potential for headers :)
038 // Philippe Clairet // 04.25.2007 // 12:27 PM
Hi Jeff,
Phil from FOWD here. Came to check out your article after you mentioned it at the workshop. Awesome.
Cheers,
Phil
039 // Nathan // 01.23.2008 // 12:53 PM
Hey great post, I’ve actually just started doing this today and while looking for some reference as to what fonts are installed on what machines, came across your site.
In reference to the fellow above you mentioned using Flash, there is an accessible and CMS-compatible way to implement Flash titles.
Give a search for sIFR and you’ll probably find it. Though it is a lot more work to install/set up, it’s a great option.
040 // deadman // 01.28.2008 // 10:44 PM
See my new site: fishing holder gear Welcome!
041 // windraver1 // 02.20.2008 // 4:10 PM
I felt myself bad… But suddenly I found a http://viagrapurchase.co.cc, and now I “feel” better ;) In this site, you can buy a lot of pharmacy (viagra, cialis, etc) without any prescription.
042 // romeo789 // 03.25.2008 // 10:04 AM
� � � � � � � � � � � � � � � � �ALLSEXCONTACT.r� � �
043 // mastertalk // 03.29.2008 // 3:54 PM
п р о ч и т а л н а с а й т е о р е м о н т е к о м п ь ю т е р о в п р о р а с к р у т к у с а й т о в, и з в и н и т е, м о ж е т б ы т ь и н е в т е м у, н о м е т о д я н е п о н я л, х о т я т а м п о д р о б н о в р о д е р а с п и с а н о.
044 // HuNTeRZX // 03.30.2008 // 1:57 AM
SEO п р о г р а м м ы и б а з ы к н и м, а н т и в и р у с ы, д р а й в е р а, с к р и п т ы и м н о г о е д р у г о е…:) http://maxisoft.ucoz.ru
045 // artur_smolin // 03.31.2008 // 5:28 AM
� � � � � � � � �ibm lenovo � � �ibm � � � � � �/a> � � � �
046 // 2128506 // 04.08.2008 // 4:11 PM
Hello! If you are interested in art, or want to present an original gift, go on my page where are placed the most beautiful Russian Orthodox icons.
http://alvikpet.narod.ru/all_icons.htm
All of them are sold by me on eBay auction
Go to http://eBay.com and write ” Russian Orthodox Icons ” in search window “. And you will find all these icons in search list. Click by any my icon’s reference you can investigate in details the information and If you want to participate in auction click button “place bid”. But for this purpose preliminary it is necessary to be registered on http://PayPal.com and http://eBay.com I assure you - it is very simply. I hope that icons will like you, and maybe you’ll want to buy one of them on eBay. Best regards!!!
047 // 2128506 // 04.08.2008 // 4:45 PM
Hello! If you are interested in art, or want to present an original gift, go on my page where are placed the most beautiful Russian Orthodox icons.
http://alvikpet.narod.ru/all_icons.htm
All of them are sold by me on eBay auction
Go to http://eBay.com and write ” Russian Orthodox Icons ” in search window “. And you will find all these icons in search list. Click by any my icon’s reference you can investigate in details the information and If you want to participate in auction click button “place bid”. But for this purpose preliminary it is necessary to be registered on http://PayPal.com and http://eBay.com I assure you - it is very simply. I hope that icons will like you, and maybe you’ll want to buy one of them on eBay. Best regards!!!
048 // dekodboy // 04.11.2008 // 7:07 AM
decking decking
http://g-portal.isgreat.org
049 // seotavr // 04.18.2008 // 6:39 PM
Н а ш а к о м п а н и я з а н и м а е т с я п р о д а ж е й ц и ф р о в о й т е х н и к и, т а к о й к а к: С о т о в ы е т е л е ф о н ы, MP4 и MP3-п л е е р ы, Hi-Tech г а д ж е т ы, к а р т ы п а м я т и, USB-ф л е ш, а к с е с с у а р ы д л я с о т о в ы х т е л е ф о н о в и К П К, ц и ф р о в ы е ф о т о р а м к и, у с т р о й с т в а GPS-н а в и г а ц и и и т.д.
В с е н а ш и т о в а р ы и м е ю т п р е в о с х о д н о е с о о т н о ш е н и е ц е н а/к а ч е с т в о, ч т о о б е с п е ч и в а е т л у ч ш и е р о з н и ч н ы е ц е н ы н а д а н н у ю к а т е г о р и ю т о в а р о в.
Н а ш а п р о д у к ц и я о т л и ч а е т с я к а ч е с т в о м о т noname-т о в а р о в, п р о д а в а е м ы х б о л ь ш и н с т в о м и н т е р н е т-м а г а з и н о в.
П р я м ы е к о н т а к т ы с п р о и з в о д и т е л я м и, о т л а ж е н н а я с х е м а п о с т а в о к п о з в о л я ю т н а м у д е р ж и в а т ь н и з к и е ц е н ы н а р ы н к е п р о д а ж ц и ф р о в о й т е х н и к и.
М ы р а б о т а е м н е т о л ь к о с Р о с с и й с к и м р ы н к о м, н о и с о в с е м и с т р а н а м и б л и ж н е г о и д а л ь н е г о з а р у б е ж ь я.
Н а в с е т о в а р ы м ы п р е д о с т а в л я е м г а р а н т и ю 6 м е с я ц е в.
М ы у д е л я е м о с о б о е в н и м а н и е р а б о т е с п о с т о я н н ы м и к л и е н т а м и.
У н а с с у щ е с т в у е т г и б к а я с и с т е м а с к и д о к.
Н а ш и ц е н ы и с р о к и в ы п о л н е н и я р а б о т п р и я т н о у д и в я т В а с!
Д л я н а ш и х к л и е н т о в т а к ж е п р е д у с м о т р е н а п р о г р а м м н а я п о д д е р ж к а.
М ы з а б о т и м с я о н а ш и х к л и е н т а х, п о э т о м у, п р и о б р е т а я у н а с т о в а р ы, В ы п о л у ч а е т е в о з м о ж н о с т ь з а д а т ь в о п р о с ы п о н а с т р о й к е, п о д к л ю ч е н и ю и и с п о л ь з о в а н и ю а к с е с с у а р о в и д р у г и х у с т р о й с т в.
В р а з д е л е FAQ В ы м о ж е т е о з н а к о м и т ь с я с и н с т р у к ц и я м и п о у с т а н о в к е д р а й в е р о в д л я т е л е ф о н о в и д а т а-к а б е л е й, и с п о л ь з о в а н и ю п р о г р а м м, а т а к ж е и н ф о р м а ц и е й п о и с п о л ь з о в а н и ю с а й т а, д о с т а в к е и г а р а н т и я х. З д е с ь ж е В ы м о ж е т е п р о ч и т а т ь о т в е т ы н а н а и б о л е е р а с п р о с т р а н е н н ы е в о п р о с ы.
Н а ш с а й т.
Т а к ж е у н а с В ы г о д н а я п а р т н ё р с к а я п р о г р а м м а . М ы п л а т и м д о 30%. П о р о б н о с т и з д е с ь .
050 // mustafa ibn king lion326 // 04.29.2008 // 12:04 PM
� � � � �, � � � � � � � � � � � � � http://mp3hit.biz
051 // ueruwer // 05.06.2008 // 11:06 PM
absolutly free java games here you may download java games for free http://www.ue7.ru