Typography
A harmonious type system with carefully balanced sizes, weights, and spacing for optimal readability.
Font Families
Primary typefaces used throughout the interface.
Sans
$font-family-sansThe quick brown fox jumps over the lazy dog. 0123456789
Mono
$font-family-monoThe quick brown fox jumps over the lazy dog. 0123456789
Type Scale
Font sizes from extra small to hero display text.
$font-size-xs0.75remrem12px
Extra small text$font-size-sm0.875remrem14px
Small text for captions and labels$font-size-base1remrem16px
Base text size for body content$font-size-lg1.125remrem18px
Large text for emphasis$font-size-xl1.25remrem20px
Extra large for subheadings$font-size-2xl1.5remrem24px
Heading level 4$font-size-3xl1.875remrem30px
Heading level 3$font-size-4xl2.25remrem36px
Heading level 2$font-size-5xl3remrem48px
Heading 1$font-size-6xl3.75remrem60px
Display$font-size-7xl4.5remrem72px
HeroUsage in SCSS
@use '@/styles/variables' as *;
.heading {
font-size: $font-size-4xl;
}
.body {
font-size: $font-size-base;
}Font Weights
Weight variations for text emphasis and hierarchy.
Aa
light300
Aa
normal400
Aa
medium500
Aa
semibold600
Aa
bold700
Usage in SCSS
@use '@/styles/variables' as *;
.title {
font-weight: $font-weight-bold;
}
.label {
font-weight: $font-weight-normal;
}Line Heights
Line spacing options for different content types.
none1
No extra line spacing. This is a sample paragraph demonstrating line height.
tight1.25
Compact headings. This is a sample paragraph demonstrating line height.
snug1.375
Subheadings. This is a sample paragraph demonstrating line height.
normal1.5
Default body text. This is a sample paragraph demonstrating line height.
relaxed1.625
Long-form content. This is a sample paragraph demonstrating line height.
loose2
Maximum readability. This is a sample paragraph demonstrating line height.
Usage in SCSS
@use '@/styles/variables' as *;
.heading {
line-height: $line-height-tight;
}
.paragraph {
line-height: $line-height-relaxed;
}