Font
Classes
| Class | Properties |
|---|---|
| .font-{1-length($fontStacks)} | font-family: {$fontStacks[i]} |
| .font-sans | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| .font-serif | font-family: Georgia, Cambria, 'Times New Roman', Times, serif; |
| .font-mono | font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; |
| .size-{1-length($fontSizes)} | font-size: {$fontSizes[i]} |
| .weight-{1-9} | font-weight: {100-900}; |
Variables
| Variable | Default Value |
|---|---|
| $fontStacks | $fontSans, $fontSerif, $fontMono |
| $fontSans | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" |
| $fontSerif | Georgia, Cambria, "Times New Roman", Times, serif; |
| $fontMono | Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; |
| $fontSizes | 0.75rem, 1rem, 1.25rem, 1.5rem, 2rem, 2.5rem, 3rem, 4rem, 5rem, 6rem |
Family
.font-sans
xxxxxxxxxx1
<div class="font-sans">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
.font-serif
xxxxxxxxxx1
<div class="font-serif">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
.font-mono
xxxxxxxxxx1
<div class="font-mono">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
.font-{1-3}
xxxxxxxxxx1
<div class="font-1">Somewhere, something incredible is waiting to be known.</div>2
<div class="font-2">Somewhere, something incredible is waiting to be known.</div>3
<div class="font-3">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Size
.size-{1-9}
xxxxxxxxxx1
<div class="size-1">Somewhere, something incredible is waiting to be known.</div>2
<div class="size-2">Somewhere, something incredible is waiting to be known.</div>3
<div class="size-3">Somewhere, something incredible is waiting to be known.</div>4
<div class="size-4">Somewhere, something incredible is waiting to be known.</div>5
<div class="size-5">Somewhere, something incredible is waiting to be known.</div>6
<div class="size-6">Somewhere, something incredible is waiting to be known.</div>7
<div class="size-7">Somewhere, something incredible is waiting to be known.</div>8
<div class="size-8">Somewhere, something incredible is waiting to be known.</div>9
<div class="size-9">Somewhere, something incredible is waiting to be known.</div>10
<div class="size-10">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Weight
.weight-{1-9}
xxxxxxxxxx1
<div class="weight-1">Somewhere, something incredible is waiting to be known.</div>2
<div class="weight-2">Somewhere, something incredible is waiting to be known.</div>3
<div class="weight-3">Somewhere, something incredible is waiting to be known.</div>4
<div class="weight-4">Somewhere, something incredible is waiting to be known.</div>5
<div class="weight-5">Somewhere, something incredible is waiting to be known.</div>6
<div class="weight-6">Somewhere, something incredible is waiting to be known.</div>7
<div class="weight-7">Somewhere, something incredible is waiting to be known.</div>8
<div class="weight-8">Somewhere, something incredible is waiting to be known.</div>9
<div class="weight-9">Somewhere, something incredible is waiting to be known.</div>Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.
Somewhere, something incredible is waiting to be known.