Super Title

Title

Text 4XL

Text 3XL

Text 2XL

Text XL

Text L

Text M

Text S

Text XS

The variable var(--text-m) is commonly used to define a standard body text size within a website’s design system. It ensures consistent typography across paragraphs, articles, and general content areas. Using CSS variables like this improves maintainability, supports responsive design adjustments, and creates a cohesive reading experience throughout the entire website.

The variable var(--text-l) defines a text size slightly larger than standard body text. It is commonly used for introductions, highlighted paragraphs, or secondary headings to improve readability and visual hierarchy across a website.

The variable var(--text-xl) defines a prominent text size used for headings, key statements, and important content emphasis.

The variable var(--text-s) defines a smaller text size designed for secondary or supporting content. It is commonly used for captions, labels, metadata, disclaimers, and supplementary information where readability is still important but less visual emphasis is needed compared to standard body text.

The variable var(--text-xs) defines an extra small text size used for very low-emphasis content such as fine print, legal disclaimers, timestamps, form hints, or auxiliary UI labels. It is typically reserved for information that supports primary content without drawing attention. Because of its reduced size, it should be used carefully to maintain readability and accessibility, ensuring sufficient contrast and spacing so users can still comfortably interpret the content.

DIV 1

DIV 2

DIV 2

DIV 3

DIV 3

DIV 3

DIV 4

DIV 4

DIV 4

DIV 4

DIV 5

DIV 5

DIV 5

DIV 5

DIV 5

DIV 6

DIV 6

DIV 6

DIV 6

DIV 6

DIV 6

DIV 7

DIV 7

DIV 7

DIV 7

DIV 7

DIV 7

DIV 7

DIV 8

DIV 8

DIV 8

DIV 8

DIV 8

DIV 8

DIV 8

DIV 8

DIV 1 + 7

DIV 7

DIV 2 + 6

DIV 6

DIV 3 +

DIV 5

DIV 4 +

DIV 4

DIV 5 +

DIV 3

DIV 6 +

DIV 2

DIV 7 +

DIV 1