How-to Use Fonts in Display Advertising

January 12, 2015 Emma Cullen

Choosing a suitable font is a fundamental component of good display advertising design. A good font should be readable, clear, and help convey the message you’re putting across. This article looks at how to select a font type, font color as well as looking into the basics of fonts and how you can use fonts easily and diversely in BannerFlow.

Ready start your first display advertising campaign today? Request a personalised trial with BannerFlow today!

Types of font

Before we talk about choosing fonts for display advertisements, lets get back to basics and look at what a font is:

 A font is a collection of typeface and other properties such as size, spacing and other elements that make the letters appear in a certain style.

Fonts can be divided into different classifications, namely; serif type styles, sans serif styles, script type styles, and decorative fonts. Fonts can be divided different and more diversely depending on whom you ask.

Choosing fonts

Choosing a font for an online display advertisement can make or break your design. Some simple guidelines can help you keep on the right track:

  • Legibility: This rule almost goes without saying – the font you use should be clearly readable. There are millions of fonts out there, some of them better than others. If you can’t read the font at a glance, viewers of your ad won’t be able to either, so don’t use it!
  •  Know your Goal: the font used in your display advertisement should always reflect your end goal. Different fonts can evoke different emotions and associations, so it is important to keep it appropriate. In the example below, the top text is made with Comic sans gives a childish look, inappropriate for the banner design.  The bottom text, in the example below, is created with Baskerville which gives a more traditional feel which is a much more appropriate font in this case.


  • Less is More: In display advertising, less is more is a pretty good rule to ground design on. When choosing a font for your display advertisements this is also a good rule to abide by. In the example above we can see that the quirky font used as the title works well . However, by using the same font in the smaller body text is far too much and it because difficult to read. By changing the font with a simpler font, the composition is transformed. Remember that viewers will glance at your display advertisement will only look at it for a few seconds, so getting your message across quickly and clearly.



  • Don’t be afraid of contrast: If you want to use two different font types in your display advertisement design don’t be afraid to use starkly contrasting fonts in your design. In fact it is better to use starkly contrasting fonts than ones that only contrast subtly as it looks like a deliberate design choice rather than a careless mistake.

Once you’re happy with the font you have chosen you can then decide on color.



Photo Credit: New Colourways! by Susan Fitzgerald CC-BY-2.5

The choice of font colour is very much dependent on the rest of your display advertisement design. You may already have specific brand colors that you use already, or you might be free to choose. Readability is key here, as some colours cannot be easy or comfortable to read, such as red on blue or bright yellow on a white background. Neon colours or overly vivid colour also be difficult to read.

Using font in design

When using fonts in display advertisement design it is important to keep some key design points in mind. Below we have highlighted some useful things to think about.

  • Size and spacing: size of your chosen font in your display advertisement design is important. Find a balance between it being big enough to make it eye-catching, but not so big that it takes away from the rest of your design. Consider also the spacing between letters and lines; make sure the space is not too small or too large.
  • Padding: padding refers to the space around text, objects or images. In your display advertisement design consider the padding around your font. Make sure there is space around the border of your display advertisement, and that the text does not touch the edges or overlap with other objects. The addition of padding does not only make your design more appealing, but it will also make the copy on your banner easier to read.
  • Test different fonts: As with any element of design or marketing, test different versions of your display advertisement by using A/B testing. If you find that a font change drastically improves (or ruins) your click-through rate you may consider optimising your campaigns.
  • Display Advertisement specifics: Remember the medium you are working with. Keep in mind that you have a confined space that is relatively small, particularly when creating ads for mobile, and therefore you need to make sure that your font clearly presents your copy so that the information presented on the banner can be digested quickly by views, and hold their attention.

Fonts in BannerFlow

Using fonts in your display advertisement design is super easy when using BannerFlow. Within the BannerFlow HTML5 banner builder there are already plenty of fonts for you to choose from. If you have your own custom fonts or would like to use a different font, no problem, just upload your chosen font. Learn how to manage fonts in BannerFlow.

Final Thoughts

Choosing a font for your online display advertisement is just one element of designing a great banner that makes a successful online advertising campaign. As for the other important design elements, we have a series of how-to guides to help you build the perfect display advertisements.

Have you got any tips about using fonts or any favourite fonts that you use in your display advertisement designs? Let us know on the comments below, or join the conversation on Twitter.

Original header photo is from:

Previous Article
How to Plan your Display Advertising Budget
How to Plan your Display Advertising Budget

Setting a Display advertising budget is no easy task. Learn about why you...

Next Article
How to Build Responsive Banner Ads with HTML5
How to Build Responsive Banner Ads with HTML5

Build once, display everywhere. To build responsive banner ads using HTML5...