Typography

Check out the available text utilities for text headings, text sizes, font weights, text colors, text alignments and font family.

Heading sizes

To use heading size utilities add class name h1, h2, h3, h4, h5for different heading sizes. You can use these classes when you want to match the font styling of a heading but cannot use the associated HTML element.

Heading 1

H1 48px/ Line Height 64px

Heading 2

H2 32px/ Line Height 32px

Heading 3

H3 24px/ Line Height 32px

Heading 4

H4 16px/ Line Height 24px

Heading 5

H5 8px/ Line Height 16px

Text sizes

To use text size utilities add class name text-xs, text-sm, text-base, text-lg, text-xl, text-2xl, text-3xl, text-4xl, text-5xlfor different text sizes

Lorem, ipsum.

Font weight

To use font weight utilities add class name font-light, font-regular, font-semibold, font-bold, font-blackfor different font weights

Light 300

Regular 400

Semibold 600

bold 700

black 900

Text colors

To use text color utilities add class name color-text-primary, color-text-secondary, color-text-grey, color-text-error, color-text-success, color-text-warningfor different text colors

Primary

Secondary

Grey

Error

Success

Warning

Text alignments

To use text alignment utilities add class name text-center, text-left, text-right, text-justifyfor different text alignments

Text align center

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius, aspernatur ipsam qui assumenda non voluptates eveniet corrupti deleniti id, voluptatem soluta molestias adipisci fugit nesciunt reprehenderit quibusdam commodi hic nulla.

Text align left

Text align right

Text align justify

Font family

Plan it's default font is Roboto, which is a free font available from Google Fonts.