Foundations

Font scales

sketch:Readyscss:Readyfigma:Ready

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
}