Fonts and colours

Along with a simply put together human-readable layout, one of the other ways that information can be put across is to use fonts and colours.  Varying the sizes and colours of fonts can be a good tool in displaying information and as mentioned above with the simple layout colours can also be used as backgrounds to highlight and section information.

What to consider with font sizes

1. The most important information should be the largest and the boldest.
2. Similar numbers should be, where possible, the same font, size and colour.
3. For stadium screens, make sure that every number is readable with the human eye from the furthest possible distance in the stadium.  If the words and numbers are too small you may need to reconsider the layout
4. Not everyone has 20:20 vision so can the key numbers still be seen by those people, testing with a wide range of people can help identify these issues.

What to consider with font style

1. To help with layouts and with spacing, a monotype font is a good choice.  This makes sure that any word with, say, 8 letters, is the same length no matter what letters are in it.
2. A good rule to follow is to check each letter and number that is likely to be used and make sure that they cannot be mistaken for anything else.  For example, if numbers are being used, make sure that ‘zero’ is easily distinguishable from the letter ‘0’ and from the number 8.
3. Handwriting and italic fonts are not as legible from a distance as they are from close up and should be avoided.

What to consider with colours and backgrounds

1. Can colours, or blocks of colours, be used to indicate something words could be used for and thus save space?  For instance, rather than displaying team names, using a colour can help distinguish which team is which.
2. Do they offer a good contrast?  Although not a hard rule, it is good practise to check the contrast between foreground and background colours using something like https://webaim.org/resources/contrastchecker/ which shows if the colours meet the standards laid out in the web accessibility guidelines.  If the background and foreground do not offer a high level of contrast, it is worth changing one or the other
3. Although nothing can replace testing the design with real people, screenshots of any colour used, should be passed through filters to simulate colour blindness.  This can also show places where contrasts are not at their highest.