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
Somewhere, something incredible is waiting to be known.
.font-serif
Somewhere, something incredible is waiting to be known.
.font-mono
Somewhere, something incredible is waiting to be known.
.font-{1-3}
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}
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}
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.