Typography Rules – Picking Font Sizes, Styles and Formats to Work on Your Website

By Jelena Herceg

5 min read

For those of us who don’t have a working knowledge of design or passion for aesthetics, font choice for a website can seem incredibly simple. Opt for a font or two that we think look the part, and make sure there isn’t a single letter of Comic Sans in sight.

However, when it comes to the day your website is pushed live, and it all looks terrible, incohesive and confused – you’ll wish you added a little more science to your typography selection.

So, in this guide, our designer Jelena Herceg, unpicks the science behind typography choices – giving you a starting point if you’re searching for a new set of fonts.

How to pick the different font sizes for your website

Whenever we’re deciding what font size to use, we want to make sure that we’re making the choice carefully. The first thing to decide upon is the contrast between headers, titles and main body text. Usually, if we want a bold or playful website, we can choose to use large titles and normal paragraph size. But if we want a professional, business website, then we’d rather choose a low contrast between our title font and content. 

To make sure we’re doing this right, we can simply follow some basic rules – starting with the creation of a hierarchy, using the popular ‘Golden Ratio’ rule.

Here’s one example of how to calculate your font sizes by applying this rule:

First, you need to define your base body font size:

(16pt is the recommended minimum font size)

We’ll use the minimum font size of 16pt for our example.

Then, set out the basic parameter of the font size hierarchy:

image 1

After you define a base font size, you can multiply it by the golden ratio number, which is 1.333.

Maths: 16 x 1.333 = 21.328 ≈ 21 

So, with this multiplication, you have calculated the value for your H6 title, and your hierarchy will look like this.

image 2

To find the rest, continue to multiply your last calculated P or H number by the golden ratio value 1.333, until you have all the values from P to H1 calculated.

The previously calculated value for an H6 title was 21.328, which you’ll need to multiply the number 21.328 by 1.333.

Maths: 21.328 x 1.333 = 28.430 ≈ 28

So, the scale will look like this now:

Image3

After we do this for all the elements, from P to H1, our end result will look like this.

Image4

After our hierarchy is done, we need to learn how to apply this in our designs.

How to use the ‘Golden Ratio’ hierarchy in our designs

So, now we’ve got our hierarchy of font sizes, how do we implement them? We’ll demonstrate two different methods to follow here, a low-contrast and a high-contrast version.

Our first example is when you want to have a low contrast between the title and the body copy. In that case, you always need to pick the values closer to the P value from our scale.

LOW CONTRAST BETWEEN THE TITLE AND THE BODY COPY

Image5

In this example, you’ll notice that 21pt, which is next to the value 16pt on our scale, is used as the first font-size above 16pt. You could use this font-size for subtitles, intro paragraphs or quotes.

For our main title here, we use the value of the H4 title from the scale, because we don’t want to create a large contrast between our copy sections.

HIGH CONTRAST BETWEEN THE TITLE AND THE BODY COPY

In this example, we want to create a high contrast between our titles and the body copy.

We could use this to make our content look bold, modern, playful, etc.

To achieve this, we need to choose values that are further away from the P value on our typography scale. Note that the body copy remains the same (16pt).

Image5.1

Moving away from the golden ratio

However, we don’t HAVE to use the golden ratio. Instead of using the golden ratio value, you can calculate your own value by picking the H6 value and allowing that to dictate the ratio. 

Base font size (P): 16pt 

Next font size or H6 value: 18pt (this is a value of your choosing)

How to calculate the new ratio: 

Maths: 18/16 = 1.125         

This is how your scale looks at the beginning:

Image6

Continue with calculating your next H values by multiplying your latest value with your new ratio, which is 1.125 in this case.

Maths: 18 x 1.125 = 20.25 

20.25 x1.125 = 22.781, etc.

NEW SCALE:        

Image7

After you have this new scale, you can use it in your designs in the same way as in the previous example. 

image8

How to identify line height and line length

Another important value when it comes to styling your text properly is line height, as well as the line length.

It’s very important to use appropriate line height, otherwise readability will be poor.

Here are some golden rules for the right line spacing.

  1. For the optimal readability and accessibility, you should go with140 – 180% line height (this is the space around a line of text). This means if your font size is 16pt, your line height should be at least 16 x 1.4 = 22.4pt (140%), or 16 x1.8= 28.8pt (180%) maximum value. 
  • Limit line length up to 80 characters, just because it gets hard on the eyes to read a very long text line.
  • Font size should be minimum 16pt, but if you use a smaller font size, make sure that you have significantly contrasting colour and use more line spacing. Don’t choose values below 12pt, unless you’re using them in an UPPERCASE format. In that case, don’t go under 10pt.
  • Small fonts need more spacing, so if you have a short copy, like a quote, and you use a small font size, then it’s recommended to increase the line spacing. That means you’d rather go with a value 1.7, than 1.4 when calculating the line height.
  • Always check your line height when you change font type, because every font is different, and one line height can work great on one, and really poorly on another.
  • Use a smaller line height for a big title, so if your font is bigger than 30pt, you you can apply 120% math, or less for bigger font sizes, and that should work well.

See some examples of how to calculate the ideal line spacing.

In this example, our base font is 16pt.

Image9

We hope you have found this guide helpful. Keep checking back for more insights from our design team. Alternatively, if your site could use a fresh set of eyes and a redesign, get in touch with us today on office@banc.digital