Following some simple rules for good typography will help us to be visually consistent and therefore more recognisable. It is also an essential basis for accessible and expressive written communications. A little up-front effort on our part will reduce the work we require of our readers.
Useful links
Work Sans (designed by Wei Huang) can be downloaded from Google Fonts for free.
For further guidance on typographic styling, see TypeWolf’s Cheatsheet.
Work Sans
Work Sans is a fully-featured sans serif typeface based on the early ‘Grotesques’ (as sans serifs were originally termed), which has been selected to partner the Figgins Sans Serif of our logotype elegantly. We use it for all public-facing text and it is helpful to use it for our internal communications too. It is freely available for use and can be downloaded from Google Fonts.
The typeface has nine weights, plus their respective italics, and is optimised for on-screen and print use. This range provides us with flexibility, though it is generally best to stick to a few weights:
- 400 (Normal) for text;
- 700 (Bold) for text headings;
- 800 (ExtraBold) for headlines;
- plus their respective italics.
Never distort the typeface, e.g. by compressing or expanding.
Typographic detailing
Attention to detail is as important in our written communications as in our work more generally. Getting simple details right gives the signal we are professional, attentive and that we care.
Spelling and checking grammar needn’t be onerous and there are many tools to help. Punctuation and the correct use of typography is important too. Some of the most common mistakes are noted below.
Consistency is also very important. Where, occasionally, there may be more than one acceptable typographic practice, we should stick to one rule, rather than vacillate between alternatives. This will make our texts more straightforward to read and enable us to cut and paste from different sources without issue.
Accessibility
Good typography is not just a matter of neatness or attractiveness, but is vital for accessibility, e.g. for people with dyslexia, who suffer from visual stress or are visually impaired.
As a good rule of thumb, 125% leading (or line height) works well for text. We sometimes set short, punchy headlines in capital letters to visually echo our logotype, in which case leading may be reduced to 75% – but beware words with the letter ‘Q’, the only capital with a descender, as that may clash with other text below.
For regular text in print, a line length of 50–80 characters usually provides optimal readability. On screen and in our website, anything up to 100 characters per line may be acceptable (bear in mind that with ‘responsive’ websites like ours, line length will vary between different viewing devices and cannot be set as an absolute value). For captions, a shorter line length of 30–50 characters is generally preferable.
Define simple text hierarchies with clear steps between point sizes (e.g. at least 20% font size increments) and try to use the minimum number of hierarchies that will provides the desired structure, clarity and impact – four levels is usually sufficient.
Alignment: for accessibility and general readability, text should be ranged left, ragged right, as here. Do not centre or justify text as this is detrimental to accessibility and often looks amateurish.
Hyphenation: can make text less accessible and reduces readability. With left-aligned text in English, there is no need.
Simple tips for better typography
Word spaces: don’t use double spaces between sentences – a single word space is sufficient and is typographically correct. Don’t use multiple word spaces in place of tabs.
Non-breaking spaces: can occasionally be useful to prevent text flowing automatic onto a new line and thereby separating elements whose sense depends on their contiguity, e.g. between ‘25 mm’, or ‘25 December’.
Contrast: is very important for accessibility. Bear in mind that some people may not be able to differentiate between some colours, or tonal values that are too similar.
AaBbCc
Upper and lower case: we use ‘sentence case’ for titles, where only the initial character is capitalised (and any proper nouns within the title, as usual). Don’t capitalise every word. We sometimes use all caps for very short headlines, but in such cases it is best practice for the text to be typed as normal and any capitalisation set as a style. This simplifies the re-use of text when copying and pasting.
¶
Paragraph spacing: use 2 x line spacing, or if space is critical, at least 1.5 spacing for public-facing documents. BUT bear in mind that some applications, such as our website, have an additional line break built into the style, in which case you can use just a single paragraph return. Avoid using two or more line spaces between paragraphs: the distinction will be lost on the reader and the relationship between paragraphs of text and their parent heading may become unclear.
–-
Dashes and hyphens: en dashes – like these – should be used between words, separated by single word spaces. Hyphens should never be used in such cases. Dashes should also be used in number ranges, without word spaces, e.g. 10:00–18:00 (not the hyphenated form, 10am-6pm). Two-word compounds correctly use regular hyphens, as here.
“”
‘Smart’ quote marks and apostrophes: should be used (also known as ‘curly’ quotes), rather than ‘dumb’, straight quotes, which are a typographic mistake and reveal poor attention to detail. Use single quote marks to highlight foreign or technical terms when needed (italics may also be used for this purpose). Use double quotes for direct speech. Be careful to use apostrophes appropriately and seek guidance if you’re not sure. Primes and double primes are similar to dumb quote marks but may correctly be used to for measurements such as minutes and seconds, or feet and inches, e.g. 5' 10".
…
Ellipsis marks: use a single ellipsis like this… rather than three separate dots, where necessary and with restraint.
!
Exclamation marks: should be used infrequently! The tone they set can come across as one of over-excitement!! Or melodrama!!! With overuse, they become tiring and less able to provide emphasis. Whenever possible, try to use prose style to denote enthusiasm and amplify your points.
&
Ampersands: should not be used within prose text.
For further information and special characters to copy and paste, see TypeWolf’s Cheatsheet.