Don’t Forget Your Website When Creating Brand Guidelines

Something we come across often when building new websites for our clients is that their existing brand guidelines don’t include guidelines for the web.

Surely these are the same? A colour is a colour, and a font is a font right?

It’s sadly not that simple.

Yet many branding agencies still seem to neglect digital when creating brand guidelines, focusing on print and offline, despite digital and online being the channels that receive the largest share of marketing and advertising spend across most businesses.

If you’re embarking on a branding or rebranding exercise, here are some of the reasons to make sure that you and/or your Branding Agency understand and include digital in the guidelines created.

Web Fonts vs Fonts For Print

Branding Agencies love a custom font. But a font that is used in design for print won’t necessarily work or be available for web.

Custom Fonts

If you wish to use a custom font online, you will need to purchase a licence to use that font. Often Branding Agencies select custom fonts that either do no exist in web format, or are incredibly expensive to buy.

Anyone referencing your brand guidelines needs to know whether any custom font stipulated:

• is available for the web
• is owned or licensed for use online

They also need:

• to know how they can get access to download the font
• to be provided with alternatives where the font isn’t suitable for web usage, whether this is a similar custom font from a web library or a Google Font
• to be given preferred fallback fonts

Suitability

Not all fonts that work for print will work for the web. That cursive-style font that looks great on your print ad designs, may just not translate well to the screen and the constraints of a webpage.

Scaled to the screen certain fonts may be difficult to read, whilst other very stylised fonts can really age poorly and make your site look dated.

More classic, functional fonts will always be in style and work better for the web.

Accessibility & Usability

Not only can font choice quickly date your site or look out of place, it can also hamper usability and accessibility.

Your website should provide users with a smooth experience, with as few friction points as possible. Whilst some fonts might be a bit difficult to read, some will throw up a serious barrier to use for those with impaired eyesight or certain conditions that impact how they see the world.

Web Fonts For Brand Guidelines Summary

A summary of things to remember and ensure are included in your brand guidelines:

• do you own the custom font your guidelines reference?
• provide suitable web font alternatives from libraries like Google Fonts
• provide standard web font fallback preferences
• choose functional, accessible fonts
• stylised fonts can date very quickly

Colour For The Web vs Colour For Print

CMYK To RGB

CMYK (Cyan, Magenta, Yellow, Black) is used in print design, whilst RGB (Red, Green, Blue) colour is used for web design.

CMYK is a subtractive colour model, which means that when all four primary colours (cyan, magenta, yellow, and black) are combined at full intensity, they create black ink.

RGB is an additive colour model, which means that when all three primary colours (red, green, and blue) are combined at full intensity, they create white light.

The reason for this difference is that screens emit light, while printers use ink to reflect light. So when designing for the web, CMYK colours need to be converted to RGB colours to ensure that the colours appear as intended on a screen.

Sometimes a colour that looks great in print, may not look so good on the web, and visa versa. So sometimes you may wish to have slightly different colours for each. This is particularly true of vibrant, neon like colours on the web, as these often do not translate to certain print formats very well.

Usability & Accessibility

Colour can play an important role in providing a good user experience and creating a website that is accessible to as many people as possible.

Colour choices, combinations and contrast can impact whether users can read your content comfortably, or at all.

There are numerous tools and resources out there to help you avoid falling into the trap of excluding a portion of your audience when it comes to colour on the web.

Make sure you consider:

• Colour blindness – it is thought that 1 in 12 men, and 1 in 200 women have a form of colour blindness. Consider how your brand colours, colour choices for buttons and CTAs, and text on colour combinations could impact how they interact with your website.
• Colour contrast – poor contrast can make reading content difficult for anyone, but it can be even more of a nightmare for those with various eyesight impairments or visual sensitivities. Ensure that you understand this when creating brand guidelines for the web, and why your web agency may push back on certain choices if they do not provide acceptable contrast levels.

Colour For Brand Guidelines Summary

A summary of things to remember and ensure are included in your brand guidelines:

• provide RGB conversions of your CMYK colours, to ensure you are happy with how they look on a screen
• do your primary, secondary and tertiary colours provide adequate contrast with your font colours, where fonts will overlay them?
• would a user with a form of colour blindness be able to see the text on your buttons?
• could you provide variations of your brand colours which provide suitable contrast levels with your desired font colours?

Other Considerations

A few additional things to consider including in your brand guidelines are:

• Your logo – do you have it available in a range of suitable high-quality formats for the web?
• Photography – do you have brand guidelines around the type of imagery or photography you use? If you have any official company photos or brand-safe imagery, do you have high-resolution files available? High-quality images and providing the right files to your website partner can make an enormous difference to the overall polish of a website and prevent delays.
• Industry regulations for the web – ensure you provide a web partner with any specific rules and regulations your industry may have for digital. This may include ways in which data is handled, accessibility standards, statements from industry bodies and authorities, or logos of certain accreditations or memberships required.

Is there anything you think we’ve missed out in this post? Drop us a message and let us know.