Setting Website Fonts and Colors to Match Your Brand Guide

Many companies have a thorough brand guide: standard colors, standard typefaces, rules for using the logo, all set out page by page. Yet once the website goes live, the same things tend to happen: the main color is a shade darker than in the guide, headings use a typeface the guide never mentions, and the greys differ from section to section. The guide is not wrong. It was written for print and signage, and moving it to a website takes a translation step.

This article is about turning the fonts and colors in your guide into a spec that works on screen and stays consistent across pages.

1. Start with what the guide has, and what it lacks

Take out the guide and list what it covers: logo rules, standard colors, supporting colors, standard typefaces and graphic elements. Then mark the gaps. Three are common: color values given only for print and not for screens; a single Chinese typeface with no pairing for Latin letters and numerals; and no statement on whether the typefaces may be used on the web.

Fill the gaps before design starts, rather than leaving each mockup to improvise. For what to hand the design team, see what a client should give the designer before a website redesign: logo source files, standard colors, fonts and image rights are all on that list.

2. Color: values, proportions and usage

Screens and print render color differently, so a print color can look off on a monitor. The approach is to treat the guide as the reference, find the set of screen values that looks closest, fix them in the spec, and use that one set on every page instead of adjusting by eye.

A color spec should cover at least four things:

• Values: which exact colors are the main, supporting and neutral (grey) colors.
• Proportions: where the main color goes, such as headings, buttons and highlights, and what fills large background areas.
• Functional colors: what links, notices and error messages use, so nobody picks another one ad hoc.
• Contrast between text and background: body text needs enough contrast against its background. Light grey text on white is hard to read on a phone or in bright light.

3. Fonts: check first whether they can be used on the web

Start with licensing. Some typefaces in a brand guide were bought only for print and design software, and showing them on a website requires a separate license. Without one, switch to a typeface you may use and keep its character as close as you can. Settle this before design starts, not after launch.

Once that is clear, the font spec has four parts:

• Pairing: how the Chinese typeface goes with the Latin and numeral typeface.
• Size hierarchy: how large the level-one heading, level-two heading, body text and captions are, and the line spacing.
• Weight: where bold is used, so the whole page is not bold.
• Fallback fonts: which typeface takes over when a visitor's device lacks the specified one, with a similar shape and width.

Give body text on phones its own size, set so it can be read without zooming.

4. Put it on one page for everyone

Write the spec as a single page that design, development and content teams can all find: a table of color values, a table of fonts and the size hierarchy, plus a few correct examples and common mistakes. Designers draw from it, developers build from it and editors lay out articles from it, so every section stays consistent. When the brand guide is updated, update this page too.

Sharing one spec between the website and a mini program saves work. For how to balance brand expression and conversion in the visuals, see brand expression and conversion in a retail mini program.

5. Compare side by side before launch

At acceptance, put the brand guide next to the live pages and check five kinds of page: the first screen of the home page, section pages, article pages, form pages and the mobile home page. Check that the colors come from the same set, that heading fonts and the size hierarchy are consistent, and that light text can be read. Look at least once on a phone and once on a computer, because the same color value can look different on different screens.

Summary

To make a website match the brand guide, translate the guide into a web spec: fill the gaps; write down color values, proportions and usage; confirm font licensing, then set the pairing and hierarchy; keep it on one page for every team; and compare side by side before launch.

FIM's digital experience service includes brand visuals: layout, typography, color and imagery rules, carried from brand identity to every screen.