Format your fonts

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 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 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.

Related links

1 thought on “Format your fonts

Post a comment or question

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s