Line25

Semi Web Safe Fonts to Spice Up Your Web Designs

Read the full post

We all know of the usual web safe fonts, you know, Arial, Verdana, Georgia, Times New Roman etc? They’ve been around for years and have become the standard for web typography, but there’s a bunch of fonts out there that are just waiting to be put to use in web design.

Semi web safe fonts is a term I’m using to refer to those fonts that aren’t usually found on multiple operating systems as standard, but are often bundled with common software applications such as Office or the Adobe Creative Suite. How many people do you know who have Microsoft Office on their PC? Quite a few I’d imagine. The same goes if you’re creating a design related site, the users will all probably have the Adobe Creative Suite.

This means there’s a bunch of fonts on their system that can be targeted with CSS, if the font is present it can spice up your website design a treat. If the font isn’t installed, simply specify secondary options so the font reverts back to the popular font stacks. Remember each font has different dimensions, so use them wisely to avoid too much line wrapping, particularly on titles. Let’s take a look at some of the common semi web safe fonts:

Myriad Pro

Myriad Pro

Myriad

.myriad {
	font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}

Garamond

Garamond

Garamond

.garamond {
	font-family: Garamond, Times New Roman, Serif;
}

Palatino

Palatino

Palatino

.palatino {
	font-family: Palatino, Palatino Linotype, Serif;
}

Impact

Impact

Impact

.impact {
	font-family: Impact, Haettenschweiler, Sans-Serif;
}

Tahoma

Tahoma

Tahoma

.tahoma {
	font-family: Tahoma, Geneva, Sans-Serif;
}

Century Gothic

Century Gothic

Century Gothic

.century {
	font-family: Century Gothic, Arial, Sans-Serif;
}

Gill Sans

Gill Sans

Gill Sans

.gill {
	font-family: Gill Sans, Arial, Sans-Serif;
}

Lucida

Lucida

Lucida

.lucida {
	font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}

Futura

Futura

Futura

.futura {
	font-family: Futura, Verdana, Sans-Serif;
}

Baskerville

Baskerville

Baskerville

.baskerville {
	font-family: Baskerville, Times New Roman, Serif;
}

Hoefler Text

Hoefler

Hoefler

.hoefler {
	font-family: Hoefler Text, Georgia, Serif;
}

Cooper

Cooper

Cooper Black

.cooper {
	font-family: Cooper Black, Arial Black, Sans-Serif;
}

Rockwell

Rockwell

Rockwell

.rockwell {
	font-family: Rockwell, Georgia, Serif;
}

Check over the examples to see if each font is installed on your system. No doubt there will be some discrepancies depending operating systems and software installed, but these semi web safe fonts are definitely worth considering for your next web design project.

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

44 Comments

  1. Dzinepress says:

    you saying right but some time we follow as per client request, these of all working as system fonts so that’s why we mostly prefer all of listed fonts. thanks

  2. squareart says:

    Interesting one! Thanks: )

  3. Nice collection, Chris!
    I’ve recently fallen in love with Rockwell – It’s ridiculously addictive, don’t you find?
    I think that is a good shout using fonts like myriad, targeted for designers…
    The apple-mac themed websites will be happy with this idea now (myriad is apple’s font)

  4. Tom Sinclair says:

    Using Gill Sans on a new project, loving it, just a shame its not fully web safe!

  5. choen says:

    very useful ..thanks.

  6. Jacob Rask says:

    Hm, in your CSS you don’t have the same font stacks as in the blog post, so the fallback is Courier for everything.

    Other than that, useful post!

    • The fallback on this blog post is set to Courier to make it pretty obvious if you don’t have the primary font installed for each example.

      • David M says:

        Ah. You might want to mention that in the Blog post. I thought maybe I had some of those fonts but they were corrupted or something.

        Thanks for the post, though. I’ve actually used Myriad Pro. Another one that’s semi web safe is Calibri. I like to use it on headers and things just to have a slightly different look.

        As long as you have web safe fallback fonts defined you can use just about anything.

      • Michael says:

        I don’t have Lucida on my mac, and didn’t think I was missing it because Lucida has a sibling called Lucida Console right?

        Might want to clarify that.

        Thanks!

  7. BenDesign says:

    useful! thank ya! :)

  8. Tim Wright says:

    I’m a big fan of Gil Sans & Futura. Thanks for putting this together

  9. I absolutely LOVE Century Gothic; I use it all the time. Futura is also a close second. Nice roundup. :D

  10. Awesome post! Some of these I wouldn’t have guessed to be at “semi-web-safe” status and will definitely use in future designs.

  11. Wow, nice list Chris! :) Made me realise how many cool mac fonts I don’t have by being on a pc.. hehe

    Myriad is one of my favourites. Trebuchet is also a sweet font – especially in italic form, some really nice ligatures and letterforms! :)

    Thanks again man!

  12. ajay says:

    Nice work chris, Thanks

  13. LuK says:

    Check also this one…very useful list =)

    http://www.visibone.com/font/FontResults.html

  14. sandman6665 says:

    Very useful! I love Century and Futura fonts..Also add Calibri, another clean nice looking font..

  15. Max Chan says:

    Nice job, thanks.

  16. Pedro says:

    heh. Windows Vista’s only got Impact, Tahoma and Lucida Sans.

  17. Really great fonts, Its useful in some creative designs…

  18. Simran says:

    Very useful list,chris.thank you
    But i also agree with Dzinepress.

  19. 9swords says:

    Lot’s of fun, even the fallback Courier font looks kinda cool. I really like Palitino as a serif font.

  20. I use Gill Sans as my paragraph typeface and follow it with “Gill Sans MT” to catch a few more Windows users, before falling back on web-safe typefaces.

    However your mention of Baskerville has The Toy Detective thinking. Not to mention those proportional typefaces reminiscent of a typewriter’s output.

  21. Phil Shaw says:

    Safer than you think. Garamond, Tahoma, Impact, Century Gothic, Palatino Linotype and others are quite likely to be on Windows machines.

  22. Thanks! Useful post for my CSS people

  23. Lucas Tadeu says:

    I really like that Rockwell one.

  24. Cokeramirez says:

    I would love to know in what context those fonts are presents, who are the ones to have rockwell? Mac, Pc, Office or Adobe users?

  25. stk says:

    Why limit yourself to “semi-safe”, when it’s now possible (using the CSS3 @font-face directive) to embed fancy fonts in a cross-browser way?

    Here’s How

    Cheers,
    -stk

  26. Neil says:

    Thanks for the post, Chris. Of course, it’s one thing to encourage people to push the envelope – do you know if there’s any place with stats to back up your recommendation?

  27. Keith says:

    Book Antiqua is another Palatino equivalent found on many systems and can be added to the stack:

    p {font-family: palatino, “palatino linotype”, “book antiqua”, serif;}

  28. Semi Web Safe font doesn’t mean full :) Arial is still most beautiful font :) But I really love Myriad Pro font

  29. amit says:

    Semi Web Safe font doesn’t mean full :) Arial is still most beautiful font :) But I really love Myriad Pro font

  30. Boston says:

    Hi Chris,
    I see that you are a designer. Could you please critique on my site?

  31. Raief says:

    I like the fonts that you have chosen. They all seem to work well in a web format.
    Some of the sites that I post to (articles) only allow Times New Roman, and I find myself using it by habit and I think that it is an ugly font, and overused.

  32. mbateam says:

    Very good article and fine information about css of designing.

  33. Myriad is my friend. Thank you.

  34. If you need to be 100% sure: http://www.typetester.org/ .

    If you want to rely on newest technology (E-Service): http://typekit.com/

    Current/Coming stuff is the ‘Web Open Font Format': http://hacks.mozilla.org/2009/10/woff/

  35. PK says:

    Nice article :) i like gill sans and lucida, great fonts. Now i love mostly sans serif fonts like Vegur http://www.fonts2u.com/vegur-light.font

Sorry, comments are now closed