A type scale
Most off-brand documents fail on type sizes before anything else. One person sets headings at 28 points, another at 36, and body text drifts between 10 and 13. A type scale fixes a short list of sizes, each one a set ratio larger than the step below, so headings, body and captions always relate in the same way.
The table below is a concept scale with a ratio of 1.25 from a 16 px body size. The numbers are calculated, and the specimens are drawn at those sizes.
| Role | Size | Line height | Specimen |
|---|---|---|---|
| Display | 48.8 px (3.052 rem) | 1.1 | Ag |
| Page title | 39.1 px (2.441 rem) | 1.1 | Ag |
| Section heading | 31.3 px (1.953 rem) | 1.25 | Ag |
| Subheading | 25.0 px (1.563 rem) | 1.25 | Ag |
| Lead text | 20.0 px (1.25 rem) | 1.25 | Ag |
| Body | 16.0 px (1 rem) | 1.55 | Ag |
| Caption | 12.8 px (0.8 rem) | 1.55 | Ag |
For a real brand we pick the ratio to suit the typeface and where the type lives. Dense reports and dashboards want a gentle ratio, and marketing pages and slides can take a steeper one.
Fonts people can use
A brand font is no use if half the company can't install it. We check the license for each typeface you use or choose: whether it covers desktop use for every staff member, embedding in documents, your website and apps. Then we name fallbacks for the tools where the brand font won't load, such as Google Docs, Outlook and shared slide decks, and write down which fallback goes where so emails and documents still look like you.
Color values for each medium
Each brand color gets a hex and RGB value for screens, a CMYK value and the nearest spot color for print, and, if you need them, a paint or vinyl reference for signs and vehicles. We also set proportions: how much of a typical layout each color should cover. A brand that uses its accent color for whole slide backgrounds usually looks louder than the company it represents.
Checked text pairings
Some color pairs look fine on a mood board and fail as text. We test every text and background pair in the palette with the WCAG contrast formula and mark each one in the rulebook. Here is that check run on this site's own concept palette:
| Pair | Swatch | Ratio | Rule |
|---|---|---|---|
| Slate ink on white | 15.11 to 1 | Any text | |
| White on signal red | 5.64 to 1 | Body text and up | |
| Steel blue on ice | 6.62 to 1 | Body text and up | |
| Signal red on white | 5.64 to 1 | Body text and up | |
| Slate ink on frost | 7.71 to 1 | Any text | |
| Frost on white | 1.96 to 1 | Decoration only |
The ratios above come straight from the formula. A pair under 4.5 to 1 can still work for large headings or icons, and a pair under 3 to 1 should only decorate.
Common questions
Can you keep our current fonts?
Usually, yes. If a font has a licensing problem or reads badly at small sizes, we explain the issue and suggest a close alternative. You decide.
Our main color fails as text. Do we have to change it?
No. Keep it for large shapes, buttons with dark text or backgrounds, and add a darker step of the same hue for text. Customers still see your color.