Fonts & logos

Fonts & logos

DO

1. Use a minimum 14pt font size for body copy where zoom or customised text size is not possible

2. Make headers at least 2pt bigger than body copy so they are easily distinguishable

3. Use a 16pt font size or bigger for materials that are needed in large print format

4. Choose sans serif typefaces as these are more distinctively shaped

5. Stick to sentence case in body copy rather than big sections in block capitals or all lowercase

6. Set your leading to 120% of your font size – the space between your words should be less than the space between your lines

DON'T

1. Use italics or underlining – if you’re looking to add emphasis use bold instead

2. Use overly decorative or condensed typefaces

3. Use multiple colours, gradients and copy all together in your logo – it should be a distinctive shape and not overly intricate

Text layout

Text layout

DO

1. Aim for around 12-15 words per line – long or short line lengths can slow down reading speed

2. Choose left alignment, or if justifying, ensure gaps between words aren’t unusually large

3. Display text in manageable chunks – keep white space around headers and use images or icons break up large sections

4. Use lists or bullet points to break up long paragraphs

5. Use actual text rather than images of text in web content so it can be enlarged, translated and read by screen readers

6. Order page titles and section headers in a clear and logical order. Screen readers relay content from top to bottom so they should be able to skip easily between sections, like a book

DON'T

1. Hyphenate words or let them split over two lines

2. Use multiple columns of text – a maximum of two will keep a clear and simple layout

Contrast brightness

Contrast & brightness

DO

1. Use high contrast colours for important text, data and buttons

The contrast ratio between your text and background should be at least 4.5:1, unless your font is +24px regular or +19px bold, then it can be 3:1

If you don’t like maths, you can test your palette with these online tools:

DON'T

1. Use patterned, gradient or picture backgrounds behind important text

2. Over-dazzle with a lot of white background use. If you have a lot of white space consider using cream or pastel colour backgrounds, or even better allow users to choose their own preference

Colour use

Colour use

DO

1. Be careful with blue text, it can be confused with hyperlinks

2. Check the legibility of your content when viewed in grayscale

3. Use a colourblind friendly pallet and proofing software where colour is key to conveying info, for example in a graph

DON'T

1. Use a red / green colour contrast together

2. Make big use of bright colours. If you have a vibrant brand colour palette use one or two as primary colours and the others as accents, or provide an alternative version of your design if possible

3. Use only colour to convey meaning. Add descriptors in copy – for example the top red line, and ensure items are labelled – for example ‘cancel’, rather than just a red button

Images

Images in online use

DO

Provide alt text for all non-copy elements on web pages, unless they are purely decorative:

1. Be succinct – lengthy explanations will slow visitors down and some technologies will cut off reading at a certain character length

2. Be specific – the difference between ‘a singer on stage’ and ‘Beyoncé performing at the Superbowl’ is vast

3. Provide context – ‘a guide dog leads a visually impaired man across a busy crossing’ is more insightful than ‘a man and a dog cross a road’

4. Make alt text for icons informative – ‘contact’ is more useful than ‘mail icon’

5. Convey the meaning of graphs and charts in alt text rather than just a visual description

6. Ensure that if an image contains text that it is added within the alt text

7. Consider why an image is there – it may have different alt text on one page to another depending on what it is trying to convey

DON'T

1. Add ‘image of’ or ‘picture of’ in your alt text – just jump straight in

2. Add alt text if it is simply repeating text next to the image already

3. Add alt text to multiple images that are in a group together. Add alt text to one that covers the group and leave the rest as null values

Going one step further

Get certified. The RNIB can provide expert assessment and observed user testing with blind and partially sighted people and give recommendations / accredit you with “Tried and Tested” certification

Engage with professional transcriptors to provide Braille and audio versions of your work