Top 13 Webfonts for Headline Use

    written by Nick Cox

    Today, webfonts abound. You can find them in a number of places: Google Font Directory, Typekit, Fontspring.com, and myriad other sites and font delivery services. A number are even free. And yet, like most things, much of what is free is not useful, and much of what is useful is not free. For example, there are a great deal of handwriting fonts available for @font-face embedding, but I would be hard pressed to think of more than a few instances in which these would be put to use.

    This article, then, focuses on the top 13 most useful free webfonts for headline use.

    HOW TO COMBINE TEXT AND HEADLINES

    One of the most common suggestions for combining headlines and body text is to set the headlines in a serif typeface and body copy in a sans-serif typeface, or vice versa. The key is to match exactly, or to use a great deal of contrast. Almost matching is not typically visually appealing. You can read more about combining type on the web here.

    HEADLINES AND READABILITY

    Because you’re typically only setting fewer than 100 characters in a headline, it doesn’t necessarily have the same requirements for readability as your text font. You don’t have to worry about it fatiguing the reader, because it’s at most a few words and not a long paragraph. Therefore, you have a bit more freedom in choosing a typeface for headlines. I tend to prefer faces that are at least semi-bold. This offers contrast to the weight of the text font and gives it emphasis, which aids the visual hierarchy.

    HEADLINE FONTS FOR WEB EMBEDDING

    Nice Web Type has an excellent tutorial on @font-face embedding here. Once you understand how to embed these in your website, you can begin to explore which typefaces can convey your site’s written content in a way stylistically consistent with your overall identity and branding.

    13 TOP FONTS FOR HEADLINE USE

    1. Expressway

    Available through Fontsquirrel, and designed by Typodermic, this pseudo-grotesque offers a generous x-height. The angled terminals add a modern touch. This can be thought of as a good alternate for Helvetica.

    Expressway
    License: http://www.fontsquirrel.com/license/Expressway

    2. Museo Slab

    No conversation on free fonts is complete without mentioning Exljbris, a foundry by Jos Buivenga that offers a free face in every type family. Museo Slab is an excellent slab serif font that offers both impact and character.

    Museo Slab
    License: http://www.josbuivenga.demon.nl/eula.html

    3. Megalopolis Extra

    This Fontsquirrel humanist sans is a font with a substantial weight. The capital E is particularly interesting. Megalopolis Extra is at once serious and playful and can be used in a variety of contexts. This font looks best in all caps, so experiment with the text-transform: uppercase CSS declaration.

    Megalopolis Extra
    License: http://www.fontsquirrel.com/license/MEgalopolis-Extra

    4. CA BND Bold Web

    Cape Arcona is a small German typefoundry with quite a few offerings. Their CA BND Bold is a solid font with decent language support. When used in all UPPERCASE, it is a good transition between a grotesque and a gothic.

    CA BND Bold Web
    License: http://www.cape-arcona.com/news/capearcona/eula/

    5. Deja Web

    This is an excellent a readable humanist sans that evokes FontFont’s Dax, only slightly more angular. This is one of the more high quality free webfonts online, and it seems to be hinted very well for the web.

    Deja Web
    License: http://www.anatoletype.net/fonts/dejarip

    6. Delicious Bold or Delicious Heavy

    Let’s return to Jos Buivenga to check out his Delicious type family, all of which is free. The interesting thing about this type family is that all of the weights have the same line length, which you can read about on the font’s page. Also, the lowercase b and d are not just mirror images of each other; each glyph is completely unique. And yet Delicious is still extremely readable. It’s a great family that’ll serve you well.

    Delicious Bold or Delicious Heavy
    License: http://www.josbuivenga.demon.nl/eula.html

    7. Heuristica Bold

    If you’re using a sans-serif font for body text, consider Heuristica for extreme contrast. The bold serif has a pretty strong line contrast and an excellent x-height. It’s a classic looking roman serif, and would be great for a magazine-style WordPress template, for example. Interestingly, there doesn’t seem to be a lot of information on this font on the web.

    Heuristica Bold
    License: Open Font License

    8. Droid Sans Bold

    Designed by Steve Matteson for the Android Platform, Droid Sans is an extremely high quality sans. The regular is excellent for text, and the bold is solid at large sizes for headlines.

    Droid Sans Bold
    License: http://www.apache.org/licenses/LICENSE-2.0.html

    9. Graublau Web Bold

    Graublau is a moderate contrast sans that performs excellently at large sizes. As a bonus, check out Nice Web Type’s experiment with pairing Graublau Web and Lucida here. As you can see, it is strong and eye-catching as a headline font.

    Graublau Web Bold
    License: http://www.fonts.info/shop/pub/W-EULA.pdf

    10. Bebas Neue

    Does Bebas look familiar? It might remind you of The League of Moveable Type’s League Gothic. This compact condensed gothic is great for that 1930s look that is so popular these days. It is sturdy and condensed, so you can pack a lot of text onto one line if need be.

    Bebas Neue
    License: http://www.fontsquirrel.com/license/bebas-neue

    11. Aller Bold

    A light contrast humanist sans, Aller is offered by fontsquirrel as a whole type family, including a regular and bold weight (both with italics), a display, and a light (regular and italic). It’s hard to beat an entire type family for free. What gives this font its unique character is a slight arc on the terminals. It’s definitely worth a look.

    Aller Bold
    License: http://www.fontsquirrel.com/license/Aller

    12. Adelle Basic Bold

    Designed by Type Together, Adelle is an award-winning slab serif with a generous helping of personality. This typeface exhibits great subtlety without sacrificing readability. At just over a year old, it’s one of Type Together’s most successful faces and arguably the one that put them on the map.

    Adelle Basic Bold
    License: http://www.fontsquirrel.com/license/Adelle-Basic

    13. Liberation Sans Bold

    The last of our offerings from Fontsquirrel, Liberation Sans is a moderate contrast humanist sans that offers a great alternative to Helvetica. Interestingly, it is designed by Rad Hat, the company that offers enterprise versions of Linux. In any case, it’s a promising headline font, and the regular weight would look good at a text size using generous leading.

    Liberation Sans Bold
    License: http://www.fontsquirrel.com/license/Liberation-Sans

    CONCLUDING THOUGHTS

    Licensing

    There are many types of font licenses out there. It’s extremely important to read the licenses of these fonts before using them in order to comply with the font license. Some fonts are free to download an embed with no restrictions, others require a link to the type designer on the page or in the CSS. I’ve included links to the font licenses in order to better inform you how to legally use these fonts.

    Donating

    Free fonts are a labor of love. If you find yourself using these fonts for a number of projects or on a commercial project, consider supporting the designer with a donation, or at the very least a link. Many designers such as Jos Buivenga [http://www.josbuivenga.demon.nl/] issue free fonts with the restriction that their site must be linked to. This is a way they promote their fonts. You can help them with this by, for instance, linking to them in your sidebar colophon or in the footer. Supporting designers with a donation or a link can help ensure that the excellent font development we know now can continue.

    We offer up to date 1z0-533 practice questions with self paced test engine to help you pass mcse 2008 exam and complete your 640-553 & pass4sure 70-293, you should also find act prep for your complete task.

    Authored by

    Nick Cox is a freelance designer from Seattle, WA. A typography maven and Wii Tennis champion, Nick blogs about found type, web type, and type tutorials at everydaytype.com.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

6 Comments
ADD COMMENT
  • Eva Pettifor says:

    January 6, 2011

    Fantastic article, thank you !

  • Nenad says:

    January 7, 2011

    Great tips and advices. Gonna bookmark this page

  • noeg says:

    January 12, 2011

    excellent post but what are some good heading fonts that come with web browsers like georgia?

    • Nick Cox says:

      January 22, 2011

      @noeg, System fonts depend on what platform you’re using. If you’re using a Mac, Helvetica is always popular for headlines. Impact, while not beautiful, is indeed impactful for headlines. You can read more about system fonts here: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

  • Bara' Web Design says:

    January 17, 2011

    Great list, thanks!
    I’ve been experimenting with web fonts lately, so it’s good to have this list handy :)

  • SEOservices says:

    January 22, 2011

    that’s cool man
    thanks!!!
    ……