Font scales

The font-scale mixin :

The font scale mixin returns a font-size and a line-height for a given font-size token

Always use the font-scale mixin to define font-size and line-height

Params :

$size : required, any value between 01 to 12 corresponding to the size.font.[xx] tokens
$line-height : optional / xs, s , m or l, default : l


@import 'settings-tools/all-settings.scss';
@include set-font-scale('08');
@include set-font-scale('05', 'm');

note : the fontscale mixin return a line-height ratio based on the font-size that is calculated

Using tokens and variables :

If, for some reason you are forced to use another line-height, try to use an authorized magic unit value.

Never use other font-sizes values than the dedicated tokens


@import 'settings-tools/all-settings.scss';
.some-classes {
  font-size: $size-font-05;
  line-height: $size-line-05-l; // using the corresponding token
  // or
  line-height: $mu200; // any magic unit value that seem fit to your use-case
}