Framework

Typography introduction

Font family

The default font is Roboto while all headings are using Podium Sharp. 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

Font weight

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)

Font style

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

`.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)

Line height

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%)

Letter spacing

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

Text align

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