Skip main navigation
We use cookies to give you a better experience, if that’s ok you can close this message and carry on browsing. For more info read our cookies policy.
We use cookies to give you a better experience. Carry on browsing if you're happy with this, or read our cookies policy for more information.

Pattern Library
Typography

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:

Aa Regular
Aa 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'));
viewport: < 679
content: 576
viewport: 680 - 1694
content: 648.0
viewport: 1695+
content: 728.96
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
11.24px The quick brown fox jumps over the lazy dog
12.64px The quick brown fox jumps over the lazy dog
14.22px The quick brown fox jumps over the lazy dog
16.00px The quick brown fox jumps over the lazy dog
18.00px The quick brown fox jumps over the lazy dog
20.25px The quick brown fox jumps over the lazy dog
22.78px The quick brown fox jumps over the lazy dog
25.63px The quick brown fox jumps over the lazy dog
28.83px The quick brown fox jumps over the lazy dog
32.44px The quick brown fox jumps over the lazy dog
36.49px The quick brown fox jumps over the lazy dog
41.05px The quick brown fox jumps over the lazy dog
46.18px The quick brown fox jumps over the lazy dog
51.96px The quick brown fox jumps over the lazy dog
58.45px The quick brown fox jumps over the lazy dog