.. Your Daily Design Dosis

Best Fonts for Web Typography with Font-Face

| 20 Comments

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.

Museo Download

Museo Slab Download

Museo Sans Download

Chunk (Five)

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, ..

Download

League Gothic

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.

Download

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.

Download

Franchise Bold

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.

Download

Nevis

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.

Download

Bebas

Bebas is a very nice all-caps news gothic style bold sans face from Ryoichi Tsunekawa at Flat-It foundry in Japan.

Download

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.

Anivers

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.

Download

Droid Serif

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.

Download

Dejavu Sans

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.

Download

Fontin Sans

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)

Download

Eau Sans

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.

Download

Titillium

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).

Download

Gentium

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.

Download

Communist

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!

Download

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 ..

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

20 comments

on this article: “Best Fonts for Web Typography with Font-Face”
  1. Hi Brett,

    Mate, thanks for your comment!

    If you are a typelover like myself, the fonts from the free font series can de used too on the internet (if not @font-face than Cúfon!)

    Cheers & Ciao ..

  2. This is a really cool font collection. My favorite is Titillium.

  3. Hi Brian,

    Cheers for your remark, you really just made my day ;-P

    Hope to see you back, Cheers & Ciao ..

  4. Hi JPop,

    you’re welcome, man! Thanks for your kind words about my sites – love it ;-P

    @font-face DOES work on the big5 (IE, FF, Chrome, Opera and Safari), at least on the latest versions.

    I don’t like Cúfon and Sifr, cause it’s done with Javascript (and even a bit of Flash), so your text can’t be indexed by search engines. Also these (JS) type-replacements are only for your headings, not for your body-text (has to do with the upload-time).

    Thanks for your comment, Cheers & Ciao ..

  5. Thanks a lot for your answer and your advices Jan, I do love Chunk & Georgia combination! :D I really like your websites, nice work dude!! Yeah it’s a shame @font-face doesn’t work on every browsers, but there is also good alternatives to this with Cufon or SiFR ;) I enjoy to read all your articles, hope to read you pretty soon :)
    .-= JPop´s last blog ..Hitomi Shimatani – Shirou muno no You ni =-.

  6. Hi JPop,

    These are my fav’s, so I really like them all! But watch out, altough these fonts are amongst the best-designed free fonts (kerning, amount of characters, etc), Museo and Droid are already overused on the web.

    So if you want to be original, you could use other fonts. I love DejaVu Condensed (Sans & Serif combination – see: http://www.gonzographic.com) and also Communist – see the headers of my blog -, and of course ChunkFive (see: http://www.gonzodesign.nl).

    Another combination I want to make in the near future is Fontin Sans with Fontin Serif, I have a feeling that this could be a pure typographic orgasm ;-P.

    But one of my favorite webfont still stays Georgia, with the cursive variants embedded in a @font-face (otherwise it’s too antialiased in some browsers)

    Once again JPop, thanks for all your constructive remarks, very much appreciated bro!

    Cheers & Ciao amigo ..

  7. Excellent article again! I love all these gorgeous fonts :) My favorite one is Museo, I use it on my other website about GTA 5: http://gta5.tv/ I really like the Titillium font too! What’s your favorite one Jan?
    .-= JPop´s last blog ..Hitomi Shimatani – Shirou muno no You ni =-.

  8. Hi Logan,

    Thanks for your comment, much appreciated! And well, my writing style? Hope I’m not doing that bad for a Dutchman?

    Cheers & Ciao ..

  9. Hi CNA,

    Haha, thank you! Cheers & Ciao ..