Image preview: Bold Typography (Uses+Inspiration+Free Fonts)

Bold Typography (Uses+Inspiration+Free Fonts)

This post looks at the common uses of bold typography within web design. It showcases some excellent uses of bold typography, and also provides the 5 best free bold fonts to use in your own designs.

Read More... 33 comments

Bold Fonts:

Bold fonts have always been popular in print design and advertising, but can often be under-looked in website design. However, bold typography is a great way to give designs a little extra punch and can do wonders for your image. Bold typography is all about creating impact, but it’s important to remember to direct that impact appropriately. Don’t just stick in huge welcome text if it’s going to detract from important content. Large, bold fonts can really grab your visitors attention, but that doesn’t mean that writing out bold text will automatically look professional. It’s not about the font, but what you do with it!

Styling Bold Text:

The examples below show how a little font styling can really make your bold text stand out. This kind of styling is very easy to do, but the attention to detail is what will do wonders for your overall impact.

bolde1 Bold Typography (Uses+Inspiration+Free Fonts)

bolde2 Bold Typography (Uses+Inspiration+Free Fonts)

5 Best Free Bold Fonts:

It can be really difficult to find great free fonts, as many look unprofessional or cheap. However, I’ve trawled the net and dug up my personal 5 favorite free bold fonts for you to download. All of these fonts are super professional, and hopefully they’ll give your next design a typographical boost!

AkaChen
boldf1a Bold Typography (Uses+Inspiration+Free Fonts)
boldf1b Bold Typography (Uses+Inspiration+Free Fonts)

Diogene Bold
boldf2a Bold Typography (Uses+Inspiration+Free Fonts)
boldf2b Bold Typography (Uses+Inspiration+Free Fonts)

Baar Zeitgeist
boldf3a Bold Typography (Uses+Inspiration+Free Fonts)
boldf3b Bold Typography (Uses+Inspiration+Free Fonts)

Whoopass
boldf4a Bold Typography (Uses+Inspiration+Free Fonts)
boldf4b Bold Typography (Uses+Inspiration+Free Fonts)

Kabel
boldf5a Bold Typography (Uses+Inspiration+Free Fonts)
boldf5b Bold Typography (Uses+Inspiration+Free Fonts)

Bold Text in Web Design:

Many well designed websites utilize bold typography as an eye catching way to draw visitors into exploring their site and/or services. Done wrong, bold typography can be distracting, ugly and ultimately pointless. However, the 10 sites below are all great examples of how to include bold typography in your designs:

boldr1 Bold Typography (Uses+Inspiration+Free Fonts)
Mike Precious uses great font-choice and subtle lighting/gradients to immediately draw the user’s eye. In this case the audience are first drawn to his work, as this takes visually precedence over the header/menu.

boldr2 Bold Typography (Uses+Inspiration+Free Fonts)
This website uses very bold, large headlines to immediately ‘wow’ the user. The user’s eye is drawn down the page, associating the similar typography near the top and bottom, as well as by the repeated ‘re’ message.

boldr3 Bold Typography (Uses+Inspiration+Free Fonts)
VideoHive use some lovely chunky typography to first explain what their site is all about and then draw people further into the site by encouraging them to learn more and sign up. By using images of text rather than plain text they can apply gradients and drop shadows to their headings to make them even more eye catching.

boldr4 Bold Typography (Uses+Inspiration+Free Fonts)
Alpha Multimedia Solutions creates an instant brand with their huge typographical logo. The way that the logo feeds into the main content area naturally draws the users eye downwards to explore their web page.

boldr5 Bold Typography (Uses+Inspiration+Free Fonts)
Evershed Golf create a central focus to their website, in order to draw attention to their events and popular golf school.

boldr6 Bold Typography (Uses+Inspiration+Free Fonts)
Logo Design Love combine their logo and heading into a bold footer. This instantly creates a brand, whilst letting visitors know what the site is all about.

boldr7 Bold Typography (Uses+Inspiration+Free Fonts)
Helvetireader uses a bold, bright heading to give personality to what would otherwise be quite a minimalist layout.

boldr8 Bold Typography (Uses+Inspiration+Free Fonts)
HugeType combines bold typography with a nice photo in order to create a striking header.

boldr9 Bold Typography (Uses+Inspiration+Free Fonts)
The Autumn Film push bold typography to poster like proportions. The white on red contrast is really striking, and really captures your attention.

boldr10 Bold Typography (Uses+Inspiration+Free Fonts)
Giant Creative also create a central focus to their website, through a use of elegant fonts and subtle background patterns.

Articles

Link to a few articles on bold typography.

Finding Inspiration in Type and Color

Typography is Sexy: Part 1 | Part 2 | Part 3

Breathtaking Typographical Posters

Your Thoughts

I would love to know what everyone thinks about bold typography in design, and feel free to share any of your favorite designs or principles in the comments to this post.

About the Author: Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.

33 Awesome Comments: Leave Your Comment

  1. User GravatarMax 22nd December 2008

    Great article, and great fonts!

  2. Edwin 22nd December 2008

    Great article! Thnx! :)

  3. User GravatarNetOperator Wibby 22nd December 2008

    This has been a really inspirational post. Thanks for the fonts as well!!

  4. User GravatarDavid Airey 22nd December 2008

    One of my favourite websites that uses bold type is ilovetypography.com (the changing header typefaces for various blog posts is a nice touch too).

    Have a great new year!

  5. User GravatarTom 23rd December 2008

    I’m glad you guys enjoyed the post. I’ll be posting much more full articles like this in the near future, trying to focus on quality over quantity (of course still posting regularly as well though). And I’ll also still be posting the tutorials that everyone is used to :)

  6. User GravatarTom 23rd December 2008

    Oh and David: ILoveTypography is definitely an awesome website. Thanks for sharing it with the community here.

  7. Paul 23rd December 2008

    Thanks, i always have trouble finding a good bold font, this article might give me alternatives to helvetica. :)

  8. User GravatarAndrew Houle 23rd December 2008

    Great post, I love the choices for the websites showcased, and I’m downloading some of those free fonts now, thanks Tom!

  9. User GravatarJames 23rd December 2008

    Fantastic Article!Very useful and informative to me since I’m constantly looking for new font resources for my web design works.
    Thank you very much for sharing this :)

  10. User Gravatarmax / myows 23rd December 2008

    This is great ! I’m going towards using this kind of typo for my next designs… thanks for the article !

  11. User GravatarStu | Selfconclusion.co.uk 23rd December 2008

    This is a great post thanks! lots of good typography on show here :)

  12. User GravatarBill 23rd December 2008

    Great roundup of fonts and sites using big bold type.

  13. User Gravatarkiran 23rd December 2008

    Good post.Very interesting article.

  14. G-Units 23rd December 2008

    Nice font, and nice article great job !

  15. User GravatarTom 23rd December 2008

    Cheers guys!

  16. User GravatarStephen Coles 23rd December 2008

    If the freebies don’t do it for you, here is a list of professional extra bold fonts.

  17. Patti 23rd December 2008

    Good article. I can never learn enough about typography. Very helpful. Thanks.

  18. agilius 24th December 2008

    I find these fonts useful :) ,it’s a nice article. Thanks!

  19. User GravatarJosh of Cubicle Ninjas 24th December 2008

    Beautiful! Thank you for the free fonts.

    I’d love to throw my website into the mix:
    http://cubicleninjas.com

  20. User GravatarIlya Radchenko 24th December 2008

    Great article. Personally I haven’t really utilized bold fonts to such an extent. I’ll have it in mind next design!

  21. User Gravatarcutt 24th December 2008

    great post, thanks…

  22. Vincenzo 25th December 2008

    really usefull! tnx

  23. Jtee1991 25th December 2008

    it’s a great and useful post

  24. User GravatarTony 25th December 2008

    Sweet fonts, I’d love to see another post for large fonts rather then bold.

    :D

  25. User GravatarSean Neill 26th December 2008

    I’ve always wondered what font is used for the headlines on all the Envato marketplace sites. Now I know – it’s Kabel. Thanks :)

    By the way, this big/bold type look is truly beautiful.

  26. User GravatarLooking Back at 2008 (Plus News and Flickr Roundup) - psdfan.com - 31st December 2008

    [...] I try a more ‘article’ like format and decide to discuss bold typography. – This post makes the front page of delicious and also gets stumbled a lot, drawing in a lot of traffic. [...]

  27. Brian 9th January 2009

    Great article. I’m a big fan of Agenda Black which is used in some of the site you featured. I’m trying to find something like Agenda Black but free. Free is always better.

  28. User GravatarKim 12th January 2009

    Check another free fonts collection at – tools.khrido.com/webtools/fonts-collection.aspx

  29. User GravatarDarrel 27th May 2009

    akaChen appears to be a bad auto-trace of the commercial face aachen.

    Kabel is not a free font.

    I’m all for free fonts. There are some great ones, but please don’t link to crappy knock-offs of well designed typefaces.

  30. Luke 16th September 2009

    Agenda Black is one of my favorite fonts out there. The way that FlashDen uses it is perfect. Check out AgendaBlackFont.com

  31. oliver 29th December 2009

    If you are looking for free fonts, check http://www.fonts2u.com. Discovered it just few days ago. Their
    character map search is awesome! Saved some time when looking for specific character maps supported.

  32. User GravatarMarketing Research 12th January 2010

    WOW! Amazing and excellent post. !!! Just great keep the good work going. great article…

  33. User GravatarNilimesh 20th January 2010

    “This is a best station for such kind of articles,your site is a inspiration for me.
    i got so much benefits and good results after visiting here and the grace is increasing
    day by day in your posts”
    the above information is extremly essential……

Leave a Comment: