Font Sizes

Font Sizing Utilities

AutoCSS provides a responsive, rem-based font sizing system with 7 size tiers. Classes follow the pattern text-{size}.

Available Sizes

Class Name	Font Size (rem)	Pixel Equivalent*
`.text-xs`	0.75rem	12px
`.text-sm`	0.875rem	14px
`.text-base`	1rem	16px
`.text-lg`	1.125rem	18px
`.text-xl`	1.25rem	20px
`.text-xxl`	1.5rem	24px
`.text-xxxl`	2rem	32px

*Pixel equivalents assume base font size = 16px

Usage

Add the class directly to your HTML element:

<p class="text-xl">Large paragraph text</p>
<h2 class="text-xxl">Extra large heading</h2>
<span class="text-sm">Small helper text</span>

Key Features

Rem-based scaling Sizes scale with the root HTML element’s font size
Responsive by default – Naturally adapts to user browser preferences
Consistent increments – Follows a logical progression (4:3 type scale ratio)
No magic numbers – Clear semantic naming (xs = extra small, xxl = extra extra large)

Best Practices

Use .text-base for body text
Reserve .text-xxxl for hero sections/headings
.text-xs works well for legal text/captions
Combine with font-weight classes (.font-bold) for hierarchy

Technical Note

These sizes are fluid – if you change the root font size ( element), all text sizes will adjust proportionally while maintaining relative relationships.

ON THIS PAGE