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

1. Rem-based scaling Sizes scale with the root HTML element’s font size
2. Responsive by default – Naturally adapts to user browser preferences
3. Consistent increments – Follows a logical progression (4:3 type scale ratio)
4. 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.