8 fonts you probably don’t use in css, but should

CSS has brought us many capabilities in terms of typography and the web, but we always seem to be limited to the same 4-5 typefaces over and over again. There is an inherant problem, if the font you specify isn’t on the viewers computer it won’t render in that font. So as designers and developers we end up selecting the ones that we can safely assume is available on most computers today. So most pages use Arial, Helvetica, or Georgia as their typefaces… and the world of the web remains slightly more bland.

But there are quite a few high quality typefaces that are available on most new computer systems and you can always fall back on the common ones. Of course there are options like creating images, dynamic headlines, and siFR… but all of these techniques increase load time and development time. There are plenty of good reasons to be strategic in the font choices rather than using additional technology. I am shocked at how rarely I see anyone taking advantage of these type options, so here is a quick and dirty list of fonts you should and could use in your desgns and stylesheets.

1. Palatino Linotype / Palatino

WINDOWS 97.09% / MAC 78.86%

This is a nice serif font that his pretty good support for both Mac and Windows based machines (97.09% of all windows machines have it, and 78.86% of mac’s). Yet very few people use it and instead default to georgia or times. As you can see it makes for great headlines, and I have used it with success as copy type as well. Worse case you can always default back to georgia, times, etc.

2. Tahoma

WINDOWS 96.09% / MAC 72.02%

I admit this is not one of my favorite fonts, but it does have many instances where it could be used effectively. It doesn’t seem to get used very often despite the fact that it could be an excellent copy font. Again there is always Arial or Helvetica if the machine doesn’t have Tahoma installed.

3. Impact

WINDOWS 95.85% / MAC 88.08%

Admittedly this font probably is overused in non-web related design. Since it is one of the “cooler” default fonts on most machines it tends to get a lot of use. Despite this fact there are plenty of good places to use it, and it works great for well… “impactfull” headlines.

4. Century Gothic

WINDOWS 85.44% / MAC 42.50%

This is a nice elegant font that was overused by graphic designers some time ago, but it has been locked away and shunned for some time now. It may almost be time to pull it back out of the tool chest. Not a huge percent of Mac systems come with it preinstalled, but most new ones do. Depending on your target audience this could be the perfect font to use. If you are worried about the low mac support you could always opt for Futura as well (which has very high mac support).

5. Arial Black

WINDOWS 97.73% / MAC 96.18%

Yup you don’t just have to use plain old Arial. Arial black is a nice bold font that could be perfect for headings, impacting headlines, and hell even a replacement for the Impact font mentioned above. I don’t know that I would use it for body text, but it is an option that should be realized in web typography.

6. Arial Narrow

WINDOWS 87.08% / MAC 91.01%

Arial again! We are not done yet, oh no. Much like arial black, arial narrow is a great font for headlines. Instead of the big bold in your face style of headlines you can use this typeface for more elegant subtle headlines. A nice change from the traditional arial, and can be used much like you would a condensed font.

7. Copperplate / Copperplate Gothic Light

WINDOWS 58.13% / MAC 85.85%

I will admit I hate this font, mostly because it is misused (and people will probably argue that it is not the fonts fault, but the designers). But there are times when it can be used effectively, and it has pretty good support on newer windows computers and most mac based computers. Most likely it will again be for headlines, larger headlines, as it is not terribly legible at small fonts especially when it isn’t properly aliased.

8. Gill Sans / Gill Sans MT

WINDOWS 43.09% / MAC 90.82%

No surprise I like this font. I think it works both in copy and in headlines, and it has fair support in both platforms. Anytime you use a font that has about 50% support rate you want to think about the next logical font to serve, but there are enough options specific to windows that would let you achieve the same typographic message with only subtle differences.

Top Categories

177 thoughts “8 fonts you probably don’t use in css, but should”

All eight fonts look the same for me here on Debian GNU/Linux. Please be aware that you only get more Windows true-type fonts by installing the package “msttcorefonts” which includes the following fonts, but not every Linux users knows about that.

I recently published an article listing all the fonts installed by default on Windows, Mac, and Ubuntu Linux. I find that you can usually find a reasonable alternative for a lot of fonts that works cross platform.

Thanks for the list Foo, I was aware that I was only looking at mac/windows situations even though there are a good amount of linux /unixx users. In those situations you are probably better off just picking a font you know works cross browser, assuming that the unix/linux user has downloaded the MS trupetype package, or just having a really long strong of fonts.

Are you sure about Gill Sans being installed on 90% of Macs? I didn’t think it was part of the default install and, while I see it a lot on the machines of friends who work in design, I find it hard to believe that 90% of all Mac users have installed it just for casual web surfing. I’d love to be proved wrong though, as I like the font a lot.

I use Palatino for all of my personal written correspondence and I’m just starting to use Tahoma for emails. I haven’t used it in webdesign but they are two of my favorite fonts. Everything can’t be Times New Roman or Arial!

Awesome list! I’m really impressed that you put in the percentages of machines that support this font. It will be easier now for myself (and other designers) to use these fonts more liberally in the future without having to worry about if a certain percentage of our visitors won’t get the full experience.

Other than Georgia and Verdana, there’s not too many of the fonts you’ve nominated that I’d be looking at using for on screen use, and I’d don’t think I would ever use any of them for screen text (body copy).

Whilst some [but not all] are rather lovely in terms of their ‘cut’ i.e the shape of their ascenders, descenders, counters, bowls, etc, their x heights and widths are either too small or narrow to facilitate good screen legibility. I find it interesting that the default font of the reply section would appear to be Gill Sans, but with rather excessive tracking [or letter spacing]. I wonder if this is to compensate for; a: the reasons mentioned above, and b: the rather poor contrast between the dark background and the soft grey of the type.

Depends on your agenda really – if you want something to look nice and ‘designed’ or, if you want something purely functional. You really need to assess whether the individual characteristics of each different letter shape can be translated effectively in the raster environment.

I’m not a designer, but a hundred years ago I worked in textbook publishing, where legibility is critical. Semi-serif faces often work very well. Does Korinna still exist in some form? (better for display or for short, highlighted text than for extended text) Another classic serif face with great legibility is Bookman. Personally I also like Lucida (Sans, and calligraphy)and for informal use, I like Comic Sans a LOT — easy on the eyes, doesn’t assault you. And some faces whose type is very tightly spaced work well if you add some letterspacing. Good design is worth its weight in gold. Skilled use of white space can tie related text together unobtrusively, as well as save the eye and the mind of the reader from stressful extra work & wasted time trying to find the way around the page. I found this site in a search, trying to find out what Content Management Systems are. (I told you, my work life started a hundred years ago!). I really like the site and hope to visit again.

Arial??? come on! Gill Sans??? Why not just use the default. A real designer will know you aren’t trying and don’t know anything if you use a default fault. Verdana, Arial, Myriad are all fonts you should use if you are boring and work in an office. Bad taste is contagious. Default fonts should never be used and these are nice for boring designs. Helvetica, lower case bold should be th default for everything. posters, signs, the works. It didn’t even make the list. Why not put cooper black or futura to this boring list. A good way to know good type design is looking at Swiss design, Dutch, etc… Wim Cowell good. Speikermann bad!

I am a little confused by your response. You do know that this is a list of fonts that you can use in CSS… meaning they have to be fonts that most users are going to have installed on their computer by default. Sure you can create images that use different typefaces, that is nothing new.

Thanks for the list, it’s so true that we often stick with the “safe” fonts.. though I have often used Verdana as well. It’s funny, I was talking to a friend the other day that, believe it or not, doesn’t even use CSS yet. I know I waited too long to use it, but it’s been many years now. But it’s certainly about time to increase my font repertoire as well!

“Apple Garamond” was a masterful 1980s revival of a 16th-Century font. Is the PC version of equal quality? Is it supported adequately to be useful?

Also, I was taught that (for a given font) headlines are more “impactful” if one uses a *larger size* of Caps & Lower Case rather than a smaller size in ALL CAPS (which are difficult to read, in any case).

Finally, it has always bothered me that so many web designers use sans serif fonts exclusively. Again, I was taught that sans serif headlines, along with serif body text, provide the most readable combination, by far. People think they are being “modern” using only sans serif, when they are unknowingly giving us eyestrain and headaches.

Art & design students are on their own with this, but, for the rest of us, almost any of the (short) Robin Williams books provide a good, basic education in typography.

Thanks for posting this. As a print designer turned web guy, it’s always been frustrating that we’re limited to working with a fairly narrow range of typefaces online. Having read this, I went and redesigned Put Things Off with Palatino, a slender and beautiful alternative to Georgia that I’d not considered before — cheers for the tip!

Remember, too, that there are many different type foundries and they like to steal from each other, re: helvetica/arial. Try adding “book antiqua” to your list if you like palatino, it’s got good windows coverage (it’s a cheaper copy). If you like tahoma, try verdana, as they are EXACTLY the same. You might also find alternate names of the same font, like “gill sans mt” instead of straight up, plain n’ simple gill sans. The moral: learn about type before you design, then scrounge for all possible options.

Personally, I’d rather just use images if I need any of those font types and make sure 100% of my audience sees it. None of those is a decent alternative to the already popular body copy font styles everyone defaults to.

Awesome article, thanks for the percentages so it is easier to tell who you are designing for when using certain fonts. You’re right, I dont use most of these and after reading this article, I am going to start using these fonts more often in my design.

I love Gill Sans (and not just because its designer Eric Gill used to live in my old home town of High Wycombe).

It’s a good-looking typeface, legible at most sizes, and it mixes well with other fonts. It’s in Mac and Office. The railways use it extensively on their signage. It ends up on a lot of my own websites and it’s my default font in Word.

Unfortunately it’s useless for text that mixes a lot of numbers and letters. The letters I and l and the number 1 look identical in Gill Sans, as I realised the first time I used it on a spreadsheet!

@Gustav – As much as I hate to admit it, I have read case studies that have showed increases in conversion rate by using comic sans on HTML e-mails because it is more casual in nature. As a type snob it makes me cry, as a marketer it makes me think…

I hear you Ross and I see your point.. Still, it hurts a little inside. I get shivers everytime I see that font put to use 😉 I think the ‘Ban Comic Sans’ site says it best; “These widespread abuses of [Comic Sans] threaten to erode the very foundations upon which centuries of typographic history are built.” Didn’t mean to spark a discussion about Comic Sans here, I was just surprised to read someone actually stating they love the font. As long as it’s HTML e-mails we’re talking about tho, I can probably live with that as I’ve yet to recieve one (or maybe I have, but simply repressed it from my memory ;))

I use Trebuchet a lot for headings, Verdana looks really clunky in big sizes. Trebuchet doesn’t work very well for body text though, Verdana still rules there, imho. And apparently, acoording to http://www.apaddedcell.com/web-fonts, Trebuchet is pretty common across platforms. Yay!

Nice list. I am using a number of these fonts more and more nowadays. I also think the Lucida font is great for body text and smaller titles. Lucida Grande (Mac) and Lucida Sans Unicode (Windows). Give them a try.

Tahoma & Century Gothic are both really workable fonts for the web. I like Gill Sans MT for publishing documents but not sure if I would ever use it for the web. Even though Georgia is often used I do think alot of template type websites could use this font to break out of the standard fonts used these days.

This is the kind of list I appreciate. It’s hard to always know what font scheme to go with and I usually end up defaulting to either Arial or Lucida Grande. Thanks so much for this list. Especially the percentages by platform.