Skip to main content

Text and Font

Overview​

These classes control the appearance of text.

Classes​

Font Weight​

Class NameDescriptionExample
font-thinSets the font weight to 100.Text
font-extralightSets the font weight to 200.Text
font-lightSets the font weight to 300.Text
font-normalSets the font weight to 400.Text
font-mediumSets the font weight to 500.Text
font-semiboldSets the font weight to 600.Text
font-boldSets the font weight to 700.Text
font-extraboldSets the font weight to 800.Text
font-blackSets the font weight to 900.Text

Text Size​

Class NameDescriptionExample
text-xsSets the font size to 0.75rem (12px) and the line height to 1rem (16px).Text
text-smSets the font size to 0.875rem (14px) and the line height to 1.25rem (20px).Text
text-baseSets the font size to 1rem (16px) and the line height to 1.5rem (24px).Text
text-lgSets the font size to 1.125rem (18px) and the line height to 1.75rem (28px).Text
text-xlSets the font size to 1.25rem (20px) and the line height to 1.75rem (28px).Text
text-2xlSets the font size to 1.5rem (24px) and the line height to 2rem (32px).Text
text-3xlSets the font size to 1.875rem (30px) and the line height to 2.25rem (36px).Text
text-4xlSets the font size to 2.25rem (36px) and the line height to 2.5rem (40px).Text
text-5xlSets the font size to 3rem (48px).Text
text-6xlSets the font size to 3.75rem (60px).Text
text-7xlSets the font size to 4.5rem (72px).Text
text-8xlSets the font size to 6rem (96px).Text
text-9xlSets the font size to 8rem (128px).Text