🔗

Typographic Scale

Our desktop (default, large) and mobile (small) font-sizes and line-heights are defined here for later use in the project.

For quick use, make use of the pre-built Typography component classes in sky-toolkit-ui/components/typography.

For bespoke use, you can make use of the tools in sky-toolkit-core/tools to output the specific sizes you need.

Tools

Mixins

Font

Output a fully formed type scale (font-size and line-height) by passing any of the size names from our typographic scale above, into the @include font() mixin.

// To output the variant font-size and line-height (`large` by default 
// or `small`) of a desired `key`.

.foo {
  @include font(key);
}

REM

To generates a rem-based font-size with its pixel fallback, use the @include rem() mixin.

Note: If you're using the @include font() mixin above, rem values are calculated automatically and using this mixin additionally is not required.

// To output a rem-based font-size of 18px and fallback.

.foo {
  @include rem(18px);
}

Functions

Font Size

Individual font-sizes from our typographic scale map can be accessed via the font-size() function.

// To output the variant font-size (`large` by default or `small`) of a desired `key`.

.foo {
  font-size: font-size(key);
}

Line Height

Individual line-heights from our typographic scale map can be accessed via the line-height() function.

// To output the variant line-height (`large` by default or `small`) of a desired `key`.

.foo {
  line-height: line-height(key);
}