Design essentials
Typography
Oakes Grotesk is a smooth, geometric sans serif. It is legible in body text as well as headings. The double storey g gives it personality, and the rounded shapes feel organic without losing their professionalism.
Oakes Grotesk
Regular
Oakes Grotesk
One typeface, for everything. There is no secondary face and no display face.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 & £ % ? !
Getting back to the things you had given up on. Sleep, energy, a knee that stops complaining. Weight loss is the lever, a brighter life is the point.
Notice the double storey g, the round o and the open a. They are what make the face feel friendly at body size and calm at display size. Nothing about the setting should fight them.
Weights
Five weights are available, with italics. Most pieces need two: Regular and Medium.
Light 300
Very large display only, and rarely. Never below 40 px.
Regular 400
Headlines, subheads and body copy. The default for almost everything.
Medium 500
Labels, buttons, names, emphasis within a sentence.
SemiBold 600
Small headings in dense layouts such as leaflets. Sparingly.
Bold 700
Avoid in marketing. If a headline needs bold to work, the line is wrong.
Hierarchy
The sizes change with the format. The relationships do not.
Eyebrow
Medium, upper case, 0.12em tracking, steel on light or blue on navy. Short.
A real person by your side.
Headline. Regular, sentence case, line height 1.02 to 1.1, tracking minus 1 to 2 percent. Ends with a full stop.
Behind them is a whole team: private GP, physio, nutritionist and mental health support.
Subhead. Regular, about 40 percent of the headline size, line height 1.3, steel dark or navy.
Most members see the scale start to move in the first month. Your coach will be with you every week while it does, and if a week goes badly they will know what to do. Individual results vary.
Body. Regular, line height 1.55 to 1.65, 45 to 70 characters per line, navy.
Individual results vary. Google rating correct at time of print.
Caption and small print. Regular, never below 7 pt in print, steel dark.
Suggested starting sizes
Treat these as a starting point and adjust by eye. The headline to body ratio of roughly 4 to 1 is what to keep.
| Format | Headline | Subhead | Body | Small print |
|---|---|---|---|---|
| Social post, 1080 px square | 96 to 120 px | 40 to 48 px | 28 to 32 px | 22 px |
| Story, 1080 by 1920 px | 110 to 140 px | 48 to 56 px | 32 to 36 px | 24 px |
| A5 leaflet | 32 to 40 pt | 14 to 16 pt | 9.5 to 10.5 pt | 7 pt |
| A4 poster | 60 to 80 pt | 24 to 30 pt | 12 to 14 pt | 8 pt |
| 6 sheet or larger out of home | Readable from 10 metres: 200 pt and up | A third of the headline | Avoid body copy | Legal only |
Setting type
Do
- Sentence case for headlines, subheads and labels
- Left aligned, ragged right
- Generous space above a headline and tight space below it, so it belongs to what follows
- One or two weights per piece
- Numbers set as figures with a feeling beside them
- Short lines: 45 to 70 characters in body copy
Don't
- Upper case headlines, or all caps anywhere except the eyebrow
- Justified text or centred paragraphs longer than two lines
- Bold headlines, condensed or stretched type
- Tight tracking on body copy or loose tracking on headlines
- Any second typeface, including for numbers or pull quotes
- Type over a busy part of a photo