Typography can really help your brand stand out, however many bloggers overlook the importance of combining the right fonts and creating consistent graphics often picking random fonts to suit the content rather than sticking to fonts that suit the brand. Consistency is key to good design - you want all of your website to connect, the permanent blog design and the daily post graphics and establishing a clear type style for your graphics will help achieve this as well as ensure that readers will recognise your blog graphics wherever it may be on the web. Combining fonts is an art not a science, there are no absolute rules, however here are some best practices you can follow to maximise your designs and elevate your brand’s image.

how to cOMBINe typefaces

First off get to know the different classifications of typefaces such as serif, sans serif, script and decorative and then decide which fonts to use and how to combine them. If you're still deciding which typeface to use have a look at this post on selecting the right fonts for your brand.

There are many ways you can combine fonts but here are 4 suggestions to get you started:

1. Combine a sans serif heading with a serif font for the body copy. This is a classic combination that can provide just the right amount of contrast without both fonts competing for attention. A serif font can be elegant and thought of as highly legible making it easy on the eye for the reader to tackle large paragraphs of body copy.

2. Combine a loud serif display font heading with a quieter sans serif typeface for the body copy e.g. Abril fatface with Avenir. This allows the personality of the header to shine and grab the readers interest whilst the unfussy body copy typeface complements and sits quietly along-side.

3. Try using just one typeface family that has many different weights e.g. Gotham. Then choose a different weight for the header, sub header and body copy as well as setting the head or sub in caps at varying sizes. This is often all it takes to create enough distinction for a clean, attractive design.

4. Choose typefaces from the same designer e.g. Glypha and Univers designed by Adrian Frutiger. Typefaces created by the same designer often share a similar style in the proportion or the way the letter is constructed and even though they may technically be different type categories such as serif or sans serif they will complement each other due to their shared origins. For example typefaces with similar x-heights (distance from the baseline to the top of the lowercase letter) and counters (the enclosed white space in characters such as b and d) sit nicely together.

However, in general fonts that are too similar look bad together so avoid using the same type classifications - e.g. don’t combine two slab serif fonts as they will compete with each other and create tension within the design. A chunky slab serif font could also be hard to read at a smaller point size when set in large amounts of text. As a general rule it is best to keep slab serif fonts for headers and sub-headers or small amounts of text (but of course there are always exceptions to the rule!).

KEEP IT SIMPLE & ASSIGN RULES

Using 1-3 fonts for your brand is enough. Decide which type style will be used for headers, sub-headers and body copy and apply these typographic rules to every branded graphic. Change the background colour or underlying graphic to add variety to your site and suit the content of the post but don’t change the fonts. This consistency is key to creating a professional appearance across your brand and a unique style that readers will be able to associate with your blog wherever they see your graphics on the web e.g. Pinterest, Instagram etc.

VISUAL HIERARCHY

Without typographic hierarchy a design will be flat, uninteresting and lack any focus for the reader. Use font size, all caps or lowercase, font weight e.g. regular, light, bold etc to establish a visual order within your design. This helps to delineate primary (e.g. header) & secondary (e.g. body copy) information, making it easier for the reader to take in the text. Using different font sizes, weights and spacing adds ‘typographic colour’ to the design which helps guide the reader’s eye around the page and directs them where to go and in what order. For example a large bold header helps capture the reader’s attention and clearly signals to ‘read here first’.

Typesetting factors

Another element to consider when combining your typefaces is the spacing between the letters (tracking) and within the lines of text (leading). There's a trend for extended tracking within uppercase letters as shown in main header in example 1 above, as it helps to increase readability and adds style to the design. However increased tracking in lowercase text makes it harder to read words as a single unit so use it sparingly.

Leading alters the amount of white space between lines of text. The point size of the letters is important - for the web it needs to be at least 13px (max 18px) for body copy - however it's the white space in between that makes it more legible so try increasing the leading before you increase the point size, you'll find it gives your text room to breath. A good rule of thumb is to set the line height to 125% of the word size e.g. text set at 14 pts, leading would be 17.5 pts.