Now that we have chosen the fonts we want to use, we need to ensure that we can set the right size for the occasion; thankfully, Less has a number of techniques that we can use to create our CSS styles.

The simplest technique is to assign a font size to a set variable and then reference this variable throughout your code:

@font-size-base: 14px;

Once the initial variable is set, we can then create a range of font sizes automatically, by multiplying the base value with a graduated set of numbers:

@font-size-large: @font-size-base * 1.25;
@font-size-small: @font-size-base * 0.85;
@font-size-mini: @font-size-base * 0.75;

When compiled using a precompiler, Less will convert these into valid CSS font sizes as shown in this screenshot:

This is a very simple way of defining font sizes; if we need to change the font sizes, all we need to do is change the value of @font-size-base and Less will take care of updating the others automatically.