In the early days of the web you could only rely on Arial, Verdana, Georgia and all the other “web safe” font. The first type-replacements (e.g. sIFR) weren’t really that good. As soon as I learned about @font-face, web typography changed permanently for me.
Thanks to @font-face (read an earlier article about this ‘technique’ and how to implement it: Hallo @font-face, .. nice to have met you!) a whole world of possibilities opened up, however, just because a font is @font-face compatible doesn’t mean it’s necessarily good for the purpose you want to use it.
In recent web design trends you’ll see that there is very much variety in chosing great typefaces for your headings (
<h1>, etc). You could consider using @font-face also for your body-text (see lower section of this article), but in the first section of this article I’ll focus on my personal favourites typefaces/fonts for ‘titles’:
The Museo family
A family of well-designed typefaces made by Jos Buivenga. The use of Museo and Museo Slab has exploded in popularity, and with good reason – it’s a unique & usable typeface with character. Museo & Museo Slab are overused on the web at the moment, the Museo Sans (2 weights) version though is still a great option to use for your headings.
Chunk (Five) is an ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines. Used mainly for display, the fat block lettering is unreserved yet refined for contemporary use. Chunk is bold & confident, set this type at larger sizes to maximize potential, ..
League Gothic is a revival of an old classic, a condensed sans serif display font. It was originally designed by Morris Fuller Benton for the American Type Founders Company (ATF) in 1903. The company went bankrupt in 1993. And since the original typeface was created before 1923, the typeface is in the public domain. Balanced & structured, this font is gainly popularity quickly with good reason.
League Ghotic Extended “Italic”
This italic version of the above League Gothic is made by Dannci, a 27 year old Font and WordPress designer based in Slovakia.
Franchise is a powerful new display typeface meant to communicate your message quickly and with power. The characters were meticulously drawn to achieve a unifomity without compromising style. This typeface is kerned properly so you won’t be spending all day fixing the space between A’s and Y’s.
This strong, angular typeface is ideal for headings. It features 96 of the most commonly used glyphs (characters). This font is pretty much suitable for anything, it has thick block lettering and looks great.
Bebas is a very nice all-caps news gothic style bold sans face from Ryoichi Tsunekawa at Flat-It foundry in Japan.
Typefaces that come in different Styles & Weights
All the above fonts come mostly in 1 style or weight, but if you want some variation in all your headings (<h1>, <h2>, .. <h6>) you can chose some of these free typefaces.
Not only can you use these fonts for your headings, but they are also very suitable to use as body-text. Legibility, good design, and a variety of weights & styles are the reasons these fonts were chosen.
This OpenType font family comes in regular, italic, bold and small caps and has some nice OpenType features. Besides ligatures, contextual alternatives, fractions, oldstyle/tabular numerals, Anivers also has a ‘case’ feature for case sensative forms and tabular numerals … so Anivers can crunch numbers with ease.
Droid Serif (4 styles) is a font family created by Ascender Corporation for use by the Open Handset Alliance platform, Android. Masculine & classy, Droid Serif is a great choice. Lots of styles available, great legibility and styling.
The DejaVu fonts are a font family (8 styles!) based on the Bitstream Vera Fonts (http://gnome.org/fonts/). Its purpose is to provide a wider range of characters while maintaining the original look and feel. A bit more condensed than some of the others here, it has some unique qualities and lots of styles.
Also designed by Jos Buivenga, Fontin Sans has a nice classical appearance. Fontin Sans is a sans-serif that has its own style – you can pick it out a mile away. A great choice for people who want something different but still legible and usable. I have used this font for the headings of my dribbble-beg-site (after 23 Hrs I got my dribbble-invitation in my mailbox)
Eau Sans is designed by Yamaoka Yasuhiro 1992. Out from the idea of perfectly faceless typeface, Eau; the font has the name of “water” in French. The plan was to design 2 variations of sans serif and a roman serif style, but only Eau Sans was completed. The Eau family isn’t a ground-breaking typeface, but they provide you with a wealth of styles (6 styles) to choose from.
A very legible, beautiful academic typeface that perfectly fits to every corporate identity design, magazines and headlines of corporate web-sites. The typeface is available in various weights: text version, title version, extra-black version and full-version (6 styles).
Gentium is a typeface family designed to enable the diverse ethnic groups around the world who use the Latin and Greek scripts to produce readable, high-quality publications. It supports a wide range of Latin-based alphabets and includes glyphs that correspond to all the Latin ranges of Unicode.
And last but not least, the font Communist (Serif and Sans Serif), designed by shamrock in 1993. Communist comes in 4 weights, this is the font that I use in the gonzoblog .. so take a good look around to get the feel of this type!
More Typefaces for @Font-Face
In this article there is some overlap with several typefaces from an earlier article: The Best Free Typefaces (‘fontfamilies’), where you can find some more background info about these types. In the article: Hallo @font-face, .. nice to have met you!, you can read how to write the CSS for e.g. Titillium.
You want more typefaces that you can use? Thank God there is Font Squirrel. A site with an enormous list/collection of typefaces you can use free for commercial use in one of your web-projects, this list is non-stop updated with nice and new fonts. If you have the .OTF file you can use the Font Squirrel Generator which will create the .SVG, .WOFF and .EOT formats for you to use.
So while its now technically easy to link to any typeface, copy protection issues still play a crucial role overall—an obvious ‘no-go’ for any commercial types you’d hoped to use. The main issue with @font-face still remains the ownership of the typeface. Make sure you are legally allowed to upload and share a type before using @font-face!
– § –
Do you have a favourite @font-face type? The above mentioned fonts are my favourites, I’ld love to hear what your favourite is .. The comment-section is all yours ..