Brand Typography Design Guide

A guide to using typography in your branding designs.

Don’t worry if you find it all a bit daunting.
I’m here to help.

A font/typeface can convey an emotion or elicit a certain feeling, make sure it’s appropriate for your brand identity.

Choosing the right font/typeface for your brand typography design

There is a lot to consider when choosing the right font or typeface to use for your brand, logo or logotype. Doing some sketches and brainstorming before starting a project helps me get some initial concepts and ideas down quickly, which I can use as a basis for my brand typography design.

Even if my initial concepts are pretty wild and wonderful, there will likely be an existing font that can be used as a basis for the logotype. By basing your logo/logotype on a current font, it allows you to use a complementary font for your branding copy that will tie in nicely with your custom logo or logotype design.

Knowing your main font types or categories will help a lot when choosing the right typeface to use.

Using your fonts online

When selecting the correct font to use for your brand/rebrand, it’s crucial to find one that will work equally well across all your designs, whether on or offline.

Due to this, you should always consider whether your choice of font or typeface is going to be easy to implement online. It needs to portray the right feeling for your business or venture, but practicality should also be considered. If you choose a very stylised font that ends up getting substituted by something much more generic on your website, it can end up cheapening your brand. Necessary font replacements can be caused by a range of compatibility issues related to different platforms or browsers and available font formats.

Sourcing the fonts

I often start with Google Fonts, for their simplicity in using the fonts both online and offline, the handy preview features and the ability to download the fonts for use offline. Offline fonts help when producing the website and design mock-ups, as you can play around with a bunch of ideas and test out sizes and typography layout options, to see how they look in situ with the rest of your design ideas. You can also set up layouts for all your responsive screen sizes, to test the fonts at all the necessary scales to make sure they’ll look great everywhere.

There are a lot of alternative options like Adobe TypeKit, or simply using a site similar to dafont or purchasing typefaces on sites like MyFonts.

A lot of these font services will provide something similar to Google fonts although I don’t feel that they’re as easy to implement. I guess it’s down to the fact that Google fonts are free for everyone and are incorporated into a lot of WordPress templates and other similar systems already. Whereas to access some services like Adobe fonts, you need to purchase them or have a Creative Cloud subscription.

While tinkering with my rebrand, I’ve considered a wide range of fonts, as you can see from the image shown here. I like to get an idea of how they look using specific phrases and lettering so I can be sure they will work for my needs. Quite often a font (especially the more fancy styles) will be designed to look amazing using particular letter combinations *usually the name chosen for the font. But when you attempt to use them for more practical purposes, they can fail as the letter combinations do not join or link up well. More modern fonts include different ligatures for individual letters so you can choose a character style that works with your copy, but web-fonts still have a way to go to catch up.

I usually find a font (or at least typestyle) I like the look of and use it to create some design mock-ups. These can be anything from web page layouts to a business card or stationery layouts or a couple of poster designs. It is vital to ensure that the chosen font will work across all your marketing and media, so trying it out in multiple environments and sizes is an excellent way to test its mettle.

Finding or Matching Fonts

I feel like there should be a special mention of the “What the Font” service offered by myfonts.com. It’s a fantastic webpage that helps you find out what a font is called or at least find something similar.

For example, you may have taken a photo of a sign or have found some inspirational type that you’d like to use in your brand or rebrand. You can then upload the image, highlight certain characters and then it will feed up some options of fonts that are similar. You can then try these out and see how they look for the project you’re working on.

With a vast range of customisable options in Prototypo, it is a versatile method of quickly creating a typeface or logotype.

Customising or creating your fonts for your logo and branding

The logo/logotype is an integral part of any brand typography design. For this, I often base the logo text on a particular typeface and add some quirks or customisations to help it stand out as an individual visual entity. By doing this, it will still create a visual reference to any design aspects that follow but also separate it from the general text used. The logo will hopefully also have a little extra oomph to grab some attention too.

It’s not as easy as picking a font. There is much more to consider.

There are some excellent services to help customise fonts, like prototypo.io, which you can use to quickly and easily create your own typeface. Most fonts will follow or use a font type or family as a basis for their creation, so being able to create your unique typeface within an easy to use interface is great.

More often than not when working on a logo design for a client, I will convert some type into curves and use the pen tool in Illustrator to edit the characters so that they flow well and look great with the chosen word or phrase. I find that this gives me complete control of how it will look, although it won’t result in a usable font, but rather some bespoke type illustration.

Complementary fonts

Choosing complimentary fonts for use in different areas of your design can add some character and help separate your headings from your main text. Clearly defining your text areas can help customers to skim through the copy to find what they’re looking for and keep them engaged. Bombarding someone with a large amount of text without any breaks or breathing space will simply tire them. Making the best-written copy obsolete, as it would look daunting and unenticing.

Your headings can be more adventurous as they are usually a much larger size while being shorter phrases. The fact that they generally contain fewer characters and are often on a single line means that they can be more creative without worrying too much about the legibility of large blocks of text.

On the other hand, your paragraphs should be as easy to read as possible. Some ways to help with legibility are:

Clean & Clear font choices
Keep it clean. A more basic font is almost always the better choice. Making sure that your text is legible is more important than making it look funky. I’m all for creative choices, but you must always consider functionality as well if you can combine both then that’s awesome!
Font weight
Using too thin or too fat type as your paragraph text can make it hard to read. Excessively bold text can be challenging to read, and the letters seem to bleed into each other, and there is less delineation between characters. While very thin text can be too light, making it harder to see. Bear in mind that each web browser will render text slightly differently, so always test things out.
Increased line spacing.
This will help readers to find their place and continue reading from line to line. If your line spacing is too close, it can be jarring on the eyes and therefore difficult to continue reading a long article.
Character spacing
The amount of character spacing you use will depend on your choice of font. Certain fonts lend themselves well to wider character spacing while others do not. A certain amount of common sense will be necessary. For example, a typeface that uses interlinking lettering should not be spaced apart as it will look unusual with gaps between the letters. While a clean sans-serif font can often benefit from having slightly larger gaps between each letter.
Text shadows
Text shadows can often help separate your smaller text from the background of your site. Primarily where you use a range of colour values or photographic elements in the background. As a rule, I try to make these as subtle as possible. You don’t want them overpowering your text. If no-one notices them, but they aid in making your text clearer, then it’s a win-win situation.

Font styles / weights

Another deciding factor when choosing a font to use for your brand or rebrand is having a selection of font weights and styles. For example; bold & italic. A lot of fonts will have a range of weights to choose from, e.g. 300 (thin), 500 (standard), 700 (semi-bold) & 900 (bold). These will allow you to highlight relevant sections of your text, to help users reference your content quickly and easily. For example, italic text can be used for quotes, while a different font-weight could be used to highlight links or key text areas.

Font weight or styles can also be used for hyperlinks. Probably the most common techniques used would be to underline the text links, but you can get creative and use a different colour or style for these. Whatever you do, it’s a good idea to make them stand out immediately as links, so get creative.

Line & Letter Spacing

It doesn’t end with simply choosing a font to use. Considering your line and letter spacing is a vital aspect of branding typography design. You need to make it abundantly clear that certain text areas are associated. Therefore choosing appropriate spacing to ensure that headings are related to their text is imperative. If your spacing is not considered carefully, then your articles and information will be hard to reference.

Everything should be as easy to read as possible.

The ideal letter spacing is often influenced by your font choice, for example, a nice clean sans-serif font can be spaced slightly wider than a linked cursive script, where the letters need to interlink. Often having increased line spacing, will make it easier to read large blocks of text as the eye can easily decipher which line to follow on from, whereas bunched up text can make it more difficult to find your place if distracted for a second.

I find it useful to produce a few variations of both heading and paragraph text blocks, using alternative letter and line spacing to see which is the most visually appealing and easy to read.

Choosing a decent width for your paragraphs is also important. Try to avoid having text that takes up the full width of a large screen; this can be very daunting for a reader. Instead aim to break your text into paragraphs or shorter, more manageable sections.