Getting Started
Utilities
Typography
Utilities for typography
The typography utility is the largest module of Athena because it offers so much variation and control.
# Font size
| Class name | Style |
|---|---|
| .font-xm | font-size: 0.75rem |
| .font-sm | font-size: 0.875rem |
| .font-md | font-size: 1rem |
| .font-lg | font-size: 1.25rem |
| .font-xl | font-size: 1.5rem |
| .font-2xl | font-size: 1.75rem |
| .font-3xl | font-size: 2rem |
| .font-4xl | font-size: 2.5rem |
| .font-5xl | font-size: 3rem |
| .font-6xl | font-size: 4rem |
Control the font size of an element by using the .font-{$size} utility.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="font-xs">The quick brown fox jumps over the lazy dog.</p>
<p class="font-sm">The quick brown fox jumps over the lazy dog.</p>
<p class="font-md">The quick brown fox jumps over the lazy dog.</p>
<p class="font-lg">The quick brown fox jumps over the lazy dog.</p>
<p class="font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-2xl">The quick brown fox jumps over the lazy dog.</p>
# Font weight
| Class name | Style |
|---|---|
| .font-weight-thin | font-weight: 100 |
| .font-weight-light | font-weight: 200 |
| .font-weight-regular | font-weight: 400 |
| .font-weight-medium | font-weight: 500 |
| .font-weight-semi-bold | font-weight: 600 |
| .font-weight-bold | font-weight: 700 |
| .font-weight-heavy | font-weight: 900 |
Control the font weight of an element by using the .font-weight-{$weight} utility.
.font-weight-thin
The quick brown fox jumps over the lazy dog.
.font-weight-light
The quick brown fox jumps over the lazy dog.
.font-weight-regular
The quick brown fox jumps over the lazy dog.
.font-weight-medium
The quick brown fox jumps over the lazy dog.
.font-weight-semi-bold
The quick brown fox jumps over the lazy dog.
.font-weight-bold
The quick brown fox jumps over the lazy dog.
.font-weight-heavy
The quick brown fox jumps over the lazy dog.
<p class="font-weight-thin font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-light font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-regular font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-medium font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-semi-bold font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-bold font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="font-weight-heavy font-xl">The quick brown fox jumps over the lazy dog.</p>
# Font tracking
| Class name | Style |
|---|---|
| .tracking-tight | letter-spacing: -0.05em |
| .tracking-close | letter-spacing: -0.05em |
| .tracking-normal | letter-spacing: 0 |
| .tracking-loose | letter-spacing: 0.05em |
| .tracking-free | letter-spacing: 0.1em |
Tracking is the typographic term for letter spacing. Control the font tracking of an element by using the .tracking-{$size} utility.
.tracking-tight
The quick brown fox jumps over the lazy dog.
.tracking-close
The quick brown fox jumps over the lazy dog.
.tracking-normal
The quick brown fox jumps over the lazy dog.
.tracking-loose
The quick brown fox jumps over the lazy dog.
.tracking-free
The quick brown fox jumps over the lazy dog.
<p class="tracking-tight font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="tracking-close font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="tracking-normal font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="tracking-loose font-xl">The quick brown fox jumps over the lazy dog.</p>
<p class="tracking-free font-xl">The quick brown fox jumps over the lazy dog.</p>
# Font leading
Leading is the typographic term for line height. Control the font leading of an element by using the .leading-{$size} utility.
.leading-tight
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
.leading-close
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
.leading-normal
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
.leading-loose
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
.leading-free
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<p class="leading-tight font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="leading-close font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="leading-normal font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="leading-loose font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
<p class="leading-free font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
# Responsive Typography
All the typographic utilities can be paired with responsive modifiers to perform on different screen sizes. For example, you can prefix md: to font-lg to set the font size to large at or above medium screen sizes.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.
<p class="sm:font-md md:font-lg lg:font-xl">The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.</p>
# Variables
Below are all the typographic variables names and default values. You can edit anything from individual font sizes, to the default font stack.
Source code
// 13. Text
// ==========================================================================
/// Regular font family
/// @type List
$text-font-stack: "Open Sans", "Helvetica Neue Light", "Helvetica Neue",
"Helvetica", "Arial", sans-serif !default;
/// Code (monospace) font family
/// @type List
$code-font-stack: "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono",
"Monaco", monospace !default;
$font-weights: (
"thin": 100,
"light": 200,
"regular": 400,
"medium": 500,
"semi-bold": 600,
"bold": 700,
"heavy": 900,
);
$font-leadings: (
"none": 0,
"tight": 0.9,
"close": 1.25,
"normal": 1.5,
"loose": 1.75,
"free": 2,
);
$font-trackings: (
"tight": -0.05em,
"close": -0.025em,
"normal": 0,
"loose": 0.05em,
"free": 0.1em,
);
$font-sizes: (
xs: 0.75,
sm: 0.875,
md: 1,
lg: 1.25,
xl: 1.5,
2xl: 1.75,
3xl: 2,
4xl: 2.5,
5xl: 3,
6xl: 4,
) !default;
$text-variants: ();