1. Define your font colours
Choose one colour for your headings and another for the body text. The headings should use the same colour you defined for the page header.
Make sure there is sufficient contrast between text and background.For the body text dark grey or black on a light background works best. If you use a black background choose white for the body text.
Write down your colour definitions:
- Body text: #1D1F1F
- Heading: #7f004f
2. Define the type size
The body text should use a type size between 10 and 14 points. Make it even bigger if possible. Users with small notebook monitors will love you for making the type size as big as possible!
The type size of the heading should be about 150% of the body text. Let’s say you use 14 points for the body text; then you should use 21 points for your headings.
Headings have a hierarchy. Define a level-one heading with 150% of the body text size and a level-two heading with 125% of the body text size.
Write down your size definitions:
- Body text: 14 points
- Heading (level 1): 21 points
- Heading (level 2): 17 points
Use www.typetester.org to compare the different font sizes. You can insert a base font size on the upper right corner.
On Typetester the type size is not measured in pixels, but in Ems (em). This is a scalable unit that is very popular for fonts on the web.
1 em is equal to the defined base font size.
1.5 em = 150% of the base font size.
If your base font size is 14 points, 1.5 em would equal 21 points (14 x 1.5=21).
3. Define the line height
Put some space between the lines with the line height functionality. The line height should be 110% to 140% of the body text height.
Write down your line height definition:
- line height: 19 points
Use www.typetester.org to compare the different line heights. The line height is called “leading” on Typetester. It’s also measured in em instead of pixels.
1 em is equal to your base font size.
1.3 em = 130% of the base font size.