Typography

Breakpoint
Label Small Medium Large
pico 11.24 / 16.05 12.64 / 17.80 14.22 / 19.78
nano 12.64 / 17.80 14.22 / 19.78 16.00 / 22.00
micro 14.22 / 19.78 16.00 / 22.00 18.00 / 24.50
milli 16.00 / 22.00 18.00 / 24.50 20.25 / 27.31
uno 18.00 / 24.50 20.25 / 27.31 22.78 / 30.48
kilo 20.25 / 27.31 22.78 / 30.48 25.63 / 34.04
mega 22.78 / 30.48 25.63 / 34.04 28.83 / 38.04
giga 25.63 / 34.04 28.83 / 38.04 32.44 / 42.55
tera 28.83 / 38.04 32.44 / 42.55 36.49 / 47.61
peta 32.44 / 42.55 36.49 / 47.61 41.05 / 53.32
exa 36.49 / 47.61 41.05 / 53.32 46.18 / 59.73
zetta 41.05 / 53.32 46.18 / 59.73 51.96 / 66.95
yotta 46.18 / 59.73 51.96 / 66.95 58.45 / 75.06
bronto 51.96 / 66.95 58.45 / 75.06 65.76 / 84.20
gego 58.45 / 75.06 65.76 / 84.20 73.98 / 94.47

Fonts

FutureLearn uses Europa, to create a friendly and inviting environment. EuropaType is an independent type design and publishing platform founded by graphic designer & typographer Fabian Leuenberger, in 2011.

There are a few variants of this font available, however we only use the two main variants:

  • Europa Regular
  • Europa Bold

Typographic Scale

We are in the process of transitioning towards a typographic modular scale, based on 18px base size and 1.125 ratio. We found that calculating the scale using this ratio gives us a selection of sizes that fits with our design needs. You can use this calculator to see how it’s been worked out.

We defined the line heights for the body and heading sizes using these expressions, which we found work best with our font Europa and our text sizes.

To use the typography scale we need to include it via the type-scale mixin:

@include type-scale('milli');

// When applied to a heading
@include type-scale('exa', $heading: true);

// When font size should be fixed across all viewports
@include type-scale('mega', $responsive: false);

If you need to override the font size generated by the type scale at a specific breakpoint, you can do so like this:

@include type-scale('pico', $custom-sizes: ('small': 'nano', 'medium': 'micro'));