Web Design & Web Strategy

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

  • Sharebar

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.

The Six Layers of Design New Book, Coming Late 2011

Forget your previous notions of design. Your abilities as a designer are 30% technical and 70% mental. Sign up to be notified of the upcoming "Six Layers of Design" book to learn more and get first crack to free design resources and tools to be published along with the book.

«
»

Share This Post


About This BLOG

Since inception, this blog has covered a plethora of topics. Excited by all things design, I spent six years with out a focus. A year ago I discovered my true passion... designing with psychology (primarily as it related to the web). Many thanks to my Web Design Agency, 3.7 DESIGNS that gifts me time to publish my findings.

The Latest Buzz

You should follow us on twitter here.

We recommend

Basecamp
hosting by media temple
Web Design Sketchbook

Google Analytics Alternative