Typography

Breakpoint
Label Small Medium Large
XSmall 14px / 21px 14px / 21px 14px / 21px
Small 16px / 24px 16px / 24px 16px / 24px
Medium 18px / 27px 20px / 30px 22px / 33px
Large 22.5px / 33.75px 25px / 37.5 27.5px / 41.25px
XLarge 27px / 33.75px 30px / 37.5px 33px / 41.25px
XXLarge 36px / 45px 40px / 50px 49.5px / 61.875px

Fonts

FutureLearn uses Europa. 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

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

@include fontsize-lineheight('medium');

If you need to override the font size generated by the type scale at a specific breakpoint, you should do this on the element itself:

.my-selector {
  @include fontsize-lineheight('medium');

  @include break($from: 'type-scale-large') {
    @include fontsize-lineheight('small');
  }
}