Typography

Font size

Setup your font sizes with seven types of sizes. You can use the h1-h6 tags too, they are linked to the classes.

Type	Size	Code
Text	16px	<p class=".text">Normal Text</p>
Headline 6	12px	<p class="hl-6">Headline 6</p> <h6>Headline 6</h6>
Headline 5	14px	<p class="hl-5">Headline 5</p> <h5>Headline 5</h5>
Headline 4	18px	<p class="hl-4">Headline 4</p> <h4>Headline 4</h4>
Headline 3	28px	<p class="hl-3">Headline 3</p> <h3>Headline 3</h3>
Headline 2	36px	<p class="hl-2">Headline 2</p> <h2>Headline 2</h2>
Headline 1	48px	<p class="hl-1">Headline 1</p> <h1>Headline 1</h1>

Example

Font weight

General classes

Use the general classes for setting up the font weight asap.

Type	Weight	Code
.fat	900	<p class="fat">Test text</p>
.bold	700	<p class="bold">Test text</p>
.normal	400	<p class="normal">Test text</p>
.light	300	<p class="light">Test text</p>
.thin	100	<p class="thin">Test text</p>

Example

You can customize the default settings like:

:root {
    --fat: 900;
    --bold: 700;
    --normal: 400;
    --light: 300;
    --thin: 100;
}

Numbered classes

Type	Weight
.fw-100	100
.fw-200	200
.fw-300	300
.fw-400	400
.fw-500	500
.fw-600	600
.fw-700	700
.fw-800	800
.fw-900	900

Font style

Type	Example
.fsl-italic	<p class="fsl-italic">Test text</p>
.fsl-cursive	<p class="fsl-cursive">Test text</p>
.fsl-normal	<p class="fsl-normal">Test text</p>
.fsl-oblique	<p class="fsl-oblique">Test text</p>

Highlighting

The highlighting colors are relative to your branding colors.

Type	Relative color variable	Code
.hl-primary	--primary	<p class="hl-primary">Test text</p>
.hl-accent	--accent	<p class="hl-accent">Test text</p>
.hl-secondary	--secondary-text	<p class="hl-secondary">Test text</p>

Text align

Type	Code
.ta-left	<p class="ta-left">Test text</p>
.ta-center	<p class="ta-center">Test text</p>
.ta-right	<p class="ta-right">Test text</p>
.ta-justify	<p class="ta-justify">Test text</p>

Text decoration

Type	Code
.td-none	<p class="td-none">Test text</p>
.td-dotted	<p class="td-dotted">Test text</p>
.td-dashed	<p class="td-dashed">Test text</p>
.td-double	<p class="td-double">Test text</p>
.td-crossout	<p class="td-">Test text</p>
.td-underline	<p class="td-underline">Test text</p>
.td-overline	<p class="td-overline">Test text</p>
.td-solid	<p class="td-solid">Test text</p>
.td-wavy	<p class="td-wavy">Test text</p>