Skip to content
Presence Frontend

Typography

Avenir webfonts (Roman 400, Medium 500, Heavy 800, Black 900) plus the full Figma type scale as SCSS maps and mixins.

@use '@presencelearning/styles/typography' as t;


.heading {
  @include t.h1;
}
.section {
  @include t.h6;
}
.label {
  @include t.overline;
} // adds text-transform: uppercase
.custom {
  @include t.apply(t.$body-1);
}
.foo {
  font-family: t.$font-family-base;
  font-weight: t.$font-weight-bold;
}

Type scale

Section titled “Type scale”
The quick brown fox
h1 96px / 112px · 800 · -1.5px
The quick brown fox
h2 60px / 72px · 800 · -0.5px
The quick brown fox
h3 48px / 56px · 800 · 0
The quick brown fox
h4 34px / 36px · 800 · 0
The quick brown fox
h5 24px / 24px · 800 · 0.18px
The quick brown fox
h6 20px / 24px · 900 · 0.15px
The quick brown fox
subtitle-1 16px / 24px · 400 · 0.15px
The quick brown fox
subtitle-2 14px / 24px · 500 · 0.10px
The quick brown fox
body-1 14px / 20px · 400 · 0.25px
The quick brown fox
body-2 14px / 24px · 400 · 0.25px
The quick brown fox
button 14px / 16px · 800 · 0.25px
The quick brown fox
caption 12px / 16px · 400 · 0.40px
The quick brown fox
overline 10px / 16px · 500 · 1.50px

Fonts

Section titled “Fonts”
WeightFileStyle
400avenir-roman-400-webfont.{woff,woff2}Regular
500avenir-medium-500-webfont.{woff,woff2}Medium
800avenir-heavy-800-webfont.{woff,woff2}Bold (Avenir Heavy)
900avenir-black-900-webfont.{woff,woff2}Black

The package’s @font-face rules reference fonts via relative ./fonts/... URLs, which any modern bundler (Vite, webpack-sass-loader) resolves automatically. Direct file URLs are also available at @presencelearning/styles/fonts/....