thecomponent

Typography

Typography system includes four distinct heading styles, optimized for various content hierarchies, along with three versatile paragraph styles: Large (L), Medium (M), and Small (S). Each style is meticulously crafted to ensure readability, visual balance, and scalability across different layouts. All text styles have Breakpoints set up, which means all text will automatically apply correct text variables to different breakpoints.

Headings

Heading 1

Inter, Bold.

Breakpoints

L

Size 50, letter -2.6px, Line 1.2 Em

M

Size 40, letter -2.6px, Line 1.2 Em

S

Size 32, letter -2.6px, Line 1.2 Em

Heading 2

Inter, Bold.

Breakpoints

L

Size 40, letter -0.7px, Line 1.2 Em

M

Size 32, letter -0.7px, Line 1.2 Em

S

Size 26, letter -0.7px, Line 1.2 Em

Heading 3

Inter, Semibold.

Breakpoints

L

Size 24, letter -0.8px, Line 1.5 Em

M

Size 18, letter -0.8px, Line 1.5 Em

S

Size 16, letter -0.8px, Line 1.5 Em

Heading 4

Inter, Bold.

Breakpoints

L

Size 20, letter -0.8px, Line 1.5 Em

M

Size 16, letter -0.8px, Line 1.5 Em

S

-

Paragraphs

Paragraph L

Inter, Regular.

Breakpoints

L

Size 24, letter -0.5px, Line 1.5 Em

M

Size 19, letter -0.5px, Line 1.5 Em

S

-

Paragraph M

Inter, Regular.

Breakpoints

L

Size 20, letter -0.5px, Line 1.5 Em

M

Size 16, letter -0.5px, Line 1.5 Em

S

-

Paragraph S

Inter, Regular.

Breakpoints

L

Size 16, letter -0.5px, Line 1.5 Em

M

Size 14, letter -0.5px, Line 1.5 Em

S

-

Say hi or ask for help 🧑‍🎨

hello@thecomponent.net