Framework
v1.0.116Typography introduction
The default font is Barlow while all headings are using Rama Gothic. You can specify which font to use on any element using the following class names:
.font-headings | loads Podium Sharp |
.font-body | loads Roboto Condensed |
You can specify the weight of a text with the following class names:
.font-normal | puts a font weight of 300 (normal) |
.font-bold | puts a font weight of 700 (bold) |
You can specify the style of a text with the following class names:
.italic | puts the text in italic |
.not-italic | displays the text normally |
You can specify the size of a text with the following class names:
.text-xs | set the size to 0.75rem (12px) |
.text-sm | set the size to 0.875rem (14px) |
.text-base | set the size to 1rem (16px) |
.text-lg | set the size to 1.125rem (18px) |
.text-xl | set the size to 1.25rem (20px) |
.text-2xl | set the size to 1.5rem (24px) |
.text-3xl | set the size to 1.875rem (30px) |
.text-4xl | set the size to 2.25rem (36px) |
.text-5xl | set the size to 2.25rem (36px) |
.text-6xl | set the size to 2.25rem (36px) |
.text-7xl | set the size to 2.25rem (36px) |
.text-8xl | set the size to 6rem (96px) |
.text-9xl | set the size to 8rem (128px) |
You can specify the line height of a text with the following class names:
.leading-none | set the size to 1 (100%) |
.leading-tight | set the size to 1.25 (125%) |
.leading-snug | set the size to 1.375 (137.5%) |
.leading-normal | set the size to 1.5 (150%) |
.leading-relaxed | set the size to 1.625 (165.5%) |
.leading-loose | set the size to 2 (200%) |
You can specify the tracking (letter spacing) of a text with the following class names:
.tracking-tighter | set the tracking to -0.05em |
.tracking-tight | set the tracking to -0.025em |
.tracking-normal | set the tracking to 0em |
.tracking-wide | set the tracking to 0.025em |
.tracking-widest | set the tracking to 0.1em |
.tracking-wider | set the tracking to 0.05em |
You can specify the alignment of text with the following class names:
.text-left | set the text align to left |
.text-center | set the text align to center |
.text-right | set the text align to right |
.text-justify | set the text align to justify |
.text-start | set the text align to start |
.text-end | set the text align to end |