Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more
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
This is a sans serif typeface with 40 styles. It is also available in Adobe Typekit for sync and web use. This font includes Greek and Cyrillic glyphs, as well as adding old style figures. It is popular for both text and display composition ever since 1992.
Myriad
.myriad {
font-family: Myriad Pro, Trebuchet MS, Arial, Sans-Serif;
}
Garamond
Garamond is a group of many old-style serif typefaces. It has 6 styles, and as Myriad Pro, it is available in Adobe Typekit. Its design is based on the typeface first created by the famed French printer Claude Garamond in the sixteenth century.
Garamond
.garamond {
font-family: Garamond, Times New Roman, Serif;
}
Palatino
This is another popular typeface, based on the Hermann Zapf’s own elegant calligraphy. This font family is included with modern versions of Microsoft software. The font was named after Giambattista Palatino – master of calligraphy. This font was designed over 50 years ago but it still remains beautiful and frequently used by designers!
Palatino
.palatino {
font-family: Palatino, Palatino Linotype, Serif;
}
Impact
This is a sans-serif typeface designed by Geoffrey Lee in 1965. It looks really good for big, bold headers, in both print and web projects.
Impact
.impact {
font-family: Impact, Haettenschweiler, Sans-Serif;
}
Tahoma
This is a free font for Windows and Mac. It is a humanist sans-serif typeface designed by Matthew Carter designed for Microsoft Corporation. It consists of two Windows TrueType fonts (regular and bold).
Tahoma
.tahoma {
font-family: Tahoma, Geneva, Sans-Serif;
}
Century Gothic
Century Gothic is a sans-serif typeface in the geometric style. It was released by Monotype Imaging in 1991. Its design was influenced by the font Futura. This font is also based on Monotype 20th Century, which was drawn by Sol Hess.
Century Gothic
.century {
font-family: Century Gothic, Arial, Sans-Serif;
}
Gill Sans
This is another humanistic sans serif family with a British tone and concept. It was designed by Eric Gill and released by the British branch of Monotype. This toolkit family includes a different styles such as Light and a Regular.
Gill Sans
.gill {
font-family: Gill Sans, Arial, Sans-Serif;
}
Lucida
This is an extended font family designed by Charles Bigelow. The Lucida fonts have a large height and wide spaces between letters. Its design was based on traditional Roman letterform shapes.
Lucida
.lucida {
font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}
Futura
This is a sans serif typeface with 22 styles. This geometric sans-serif typeface was designed by Paul Renner.
Futura
.futura {
font-family: Futura, Verdana, Sans-Serif;
}
Baskerville
Baskerville is a serif typeface designed by John Baskerville, an accomplished writing master, and printer from Birmingham, in the 1750s.
Baskerville
.baskerville {
font-family: Baskerville, Times New Roman, Serif;
}
Hoefler Text
This is a family of typefaces with a more digital design. It is free for Windows and Mac. This is an old-style serif font by Jonathan Hoefler and released by Apple in 1991.
Hoefler
.hoefler {
font-family: Hoefler Text, Georgia, Serif;
}
Cooper
This is a font designed by Oswald Bruce Cooper with a heavily weighted, display serif design. It was influenced by Art Nouveau, Art Deco, and the Machine Age.
Cooper Black
.cooper {
font-family: Cooper Black, Arial Black, Sans-Serif;
}
Rockwell
The Rockwell font family is a slab serif typeface influenced by the old Litho Antique font. This geometric slab serif design has a strong display face for headlines and posters.
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.
Nice article :) i like gill sans and lucida, great fonts. Now i love mostly sans serif fonts like Vegur: https://fonts2u.com/vegur-light.font
Myriad is my friend. Thank you.
Very good article and fine information about css of designing.
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.
Hi Chris,
I see that you are a designer. Could you please critique on my site?
Your site is also too good.
Semi Web Safe font doesn’t mean full :) Arial is still most beautiful font :) But I really love Myriad Pro font
Semi Web Safe font doesn’t mean full :) Arial is still most beautiful font :) But I really love Myriad Pro font
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;}
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?
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?
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?
I really like that Rockwell one.
Safer than you think. Garamond, Tahoma, Impact, Century Gothic, Palatino Linotype and others are quite likely to be on Windows machines.
Thanks! Useful post for my CSS people
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.
Lot’s of fun, even the fallback Courier font looks kinda cool. I really like Palitino as a serif font.
Very useful list,chris.thank you
But i also agree with Dzinepress.
Really great fonts, Its useful in some creative designs…
heh. Windows Vista’s only got Impact, Tahoma and Lucida Sans.
Nice job, thanks.
Very useful! I love Century and Futura fonts..Also add Calibri, another clean nice looking font..
Nice work chris, Thanks
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!
Awesome post! Some of these I wouldn’t have guessed to be at “semi-web-safe” status and will definitely use in future designs.
I absolutely LOVE Century Gothic; I use it all the time. Futura is also a close second. Nice roundup. :D
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.
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.
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!
I’m a big fan of Gil Sans & Futura. Thanks for putting this together
useful! thank ya! :)
Interesting one! Thanks: )
Nice one Chris!
very useful ..thanks.
Using Gill Sans on a new project, loving it, just a shame its not fully web safe!
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)
Actually, Myriad is an Adobe font.
Although, Apple uses it A LOT.
ps. I do agree though, Rockwell’s a great font.
Actually, it-s Myriad, but Apple uses a different version, a modified one.
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