PSDFan Extra

Bold Typography (Uses+Inspiration+Free Fonts)

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.

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

Diogene Bold

Baar Zeitgeist

Whoopass

Kabel

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:


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.


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.



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.


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.


Evershed Golf create a central focus to their website, in order to draw attention to their events and popular golf school.


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.


Helvetireader uses a bold, bright heading to give personality to what would otherwise be quite a minimalist layout.


HugeType combines bold typography with a nice photo in order to create a striking header.


The Autumn Film push bold typography to poster like proportions. The white on red contrast is really striking, and really captures your attention.


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.


Get more of our great design content direct to your inbox
Join our newsletter and receive our best weekly content by email. Also get access to hundreds of free design resources via your Designer Toolkit area.

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.

Leave a comment

47 Comments:

  1. Max says:

    Great article, and great fonts!

  2. Edwin says:

    Great article! Thnx! :)

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

  4. David Airey says:

    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. Tom says:

    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. Tom says:

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

  7. Paul says:

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

  8. Andrew Houle says:

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

  9. James says:

    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. max / myows says:

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

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

  12. Bill says:

    Great roundup of fonts and sites using big bold type.

  13. kiran says:

    Good post.Very interesting article.

  14. G-Units says:

    Nice font, and nice article great job !

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

  16. Patti says:

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

  17. agilius says:

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

  18. Beautiful! Thank you for the free fonts.

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

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

  20. cutt says:

    great post, thanks…

  21. Vincenzo says:

    really usefull! tnx

  22. Jtee1991 says:

    it’s a great and useful post

  23. Tony says:

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

    :D

  24. Sean Neill says:

    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.

  25. [...] 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. [...]

  26. Brian says:

    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.

  27. Kim says:

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

  28. Darrel says:

    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.

  29. Luke says:

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

  30. oliver says:

    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.

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

  32. Nilimesh says:

    “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……

  33. Love This. Nice Post. Thanks.

  34. Brother says:

    Thanks for this great article.

  35. Kabel is a gorgeous font, I am having that right now.

  36. Nice, Sweet and wondered font :D

  37. rdyanmenu says:

    This have so many valuable things to learn. I’m sure some people will really like this information. it was quite interesting nice work. Thank you.

  38. awesome. i was looking for big bold fonts. thanks.

  39. shina says:

    This is a great post, thanks to you I got this information. I appreciate your work, thanks for taking this opportunity to discuss this, the post is really helpful and it have so many new valuable things to learn. Thanks for sharing this article. Pretty good post.

  40. Great post! I strongly believe that Italics, the way to emphasize in printed text doesn’t work as well on a computer screen, and underlined text looks bad and is hard to read.
    Additionally, clickable links are traditionally underlined, and non-clickable underlined text may confuse some readers. That’s why you should use bold to emphasize!

  41. ethan says:

    I like the sample. The design looks different with the styling font. Very Impressive.

  42. A Reader says:

    I’m afraid most of the sites you refer to as exemplars look garish and cheap to me. The use of BOLD conjures up images of cheap, tabloid newspapers, or else of marketing types locked in their plasticy Mac-walled, glass-sided cells. Every high quality publication outside Marketing Land uses language, not cheap gimicks, to communicate.

    BOLD FONTS are best left to Jobsian fondle-slab world, where their owners dress in shiny shell suits and believe, mistakenly, that they look cool. They just look funny.

  43. Franco says:

    Nice one that Im looking for.

  44. Stephanie says:

    Some really nice examples of fonts in here and some websites that really show what you can do with them. I think that bold fonts can really work but maybe when in caps can look like the message is being shouted which can sometimes not seem that welcoming so it has to be considered carefully. I really like Diogene Bold and for a bit of fun Whoopass

  45. George says:

    Some inspirational uses of fonts, can really help teach someone a thing or two about typography.

Leave a Comment:

Related Posts

Subscribe to PSDFAN and Get Your Free Designer Toolkit

Have every post delivered to your inbox and get access to hundreds of useful design freebies.

Your Design Work, But More Awesome:

Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.

JOIN OUR FANEXTRA COMMUNITY TODAY