Get Involved
Colours and Fonts and Typography
We need to be aware that people using this site may have visual, learning or literacy issues. Thus we would do well to set legibility and accessibility as our first considerations.
Colours
Legibility considerations
For masses of text (body copy) dark type on a light background is easier to read than the reverse.
It is acceptable to use white text on a dark background in captions, headlines, buttons, etc., where the a message needs to stand out from the rest of the page.
There needs to be good contrast between type colour and the background colour, so any background colour should be pale. (The text here is a dark indigo).
Text needs to be quite a dark shade, although black is often avoided because it is thought to be tiring to read, especially with bold type.
Fashion and Style
There’s no harm in being a bit sylish, if it suits the image you want to give. Fortunately we can change the entire colour scheme of the site by changing the specification of just four colours: Primary, Secondary, Text and Accent.
Below are the schemes in the article you can download by clicking the button below.
Soft Tones
Simple Greys and a Pop of Red
Blue and Green Gradients with White Text
Throwback Orange and Red
Soft Pink, Bright Pink and Jet
Grey, Soft Yellow & Deep Blue
Earth Tones
Lots of Red Balanced by Muted Tones
Pastels and Primaries
Fonts
If you are not up to the minute with typography for the web, the button below will take you to a useful article! (This paragraph uses Spectral, one of the Serif fonts mentioned. There is a trade-off here between style, legibility and use of space, as this is quite a ‘fat’ font!)
The rest of the type used is Roboto Sans, which is very widely used. We could change this to something different with one command. The headlines look difference because they are set to a heavier ‘weight’.
Roboto packs a lot of copy into a small space and it has a Condensed version which is even more economical.
Roboto 200
Roboto 400
Roboto 600
Roboto 800
Serif or Sans?
Serif fonts can be seen as ‘old fashioned’ whereas sans serif fonts are sometimes criticised as soulless. Perhaps a good compromise would be a ‘characterful’ sans face like Raleway (see the above headline in Raleway 700 and the one below in Advent Pro 800) for headlines with a serif font such as Spectral for the paragraph or ‘body’ text.
Typography
Almost unthinkable a decade ago, we now have considerable control over typographical features such as line and letter spacing. These metrics, as well as letter size combine to let us control the look and readability of text on our site. We can, as ever, range text right or left, centre it or justify it. The latter two controls are best used sparingly as pieces of text may look odd on some screen widths.
It is also possible to turn all headlines, say, into UPPER CASE. Current thinking is that headlines in capital letters are more legible for those with literacy problems.
Below are some examples of Spectral in a range of sizes, weights, letter and line spacing.
Lorem ipsum dolor sit amet, cu vis eros posse, quo putent ceteros probatus et. Atqui veritus admodum duo ex, an eum clita tacimates. Vim at porro tamquam lucilius. Vim possim posidonium cu. Verear virtute omittantur et sit.
Weight: 100, Size: 22px, Line Height: 1.2, Letter Space: -0.7
Lorem ipsum dolor sit amet, cu vis eros posse, quo putent ceteros probatus et. Atqui veritus admodum duo ex, an eum clita tacimates. Vim at porro tamquam lucilius. Vim possim posidonium cu. Verear virtute omittantur et sit.
Weight: 400, Size: 20px, Line Height: 1.5, Letter Space: -0.3
Lorem ipsum dolor sit amet, cu vis eros posse, quo putent ceteros probatus et. Atqui veritus admodum duo ex, an eum clita tacimates. Vim at porro tamquam lucilius. Vim possim posidonium cu. Verear virtute omittantur et sit.
Weight: 600, Size: 22px, Line Height: 1.3, Letter Space: 0
Lorem ipsum dolor sit amet, cu vis eros posse, quo putent ceteros probatus et. Atqui veritus admodum duo ex, an eum clita tacimates. Vim at porro tamquam lucilius. Vim possim posidonium cu. Verear virtute omittantur et sit.
Weight: 800, Size: 22px, Line Height: 1.5, Letter Space: -0.5