Size

Size utilities control the inline-size (width in horizontal writing modes) of layout containers. They use ch units — each step roughly corresponds to a character count — making them ideal for constraining content to readable line lengths.

Custom properties

These utilities set this custom property:

• --tng-size

This can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-size: 45ch;". Layout components like Wrapper and Grid consume this property to control their inline size.

Tokens

Token	Value	Approx. width
--tng-size-4xs	15ch	~15 characters
--tng-size-3xs	20ch	~20 characters
--tng-size-2xs	30ch	~30 characters
--tng-size-xs	40ch	~40 characters
--tng-size-sm	50ch	~50 characters
--tng-size-md	60ch	~60 characters (optimal)
--tng-size-lg	70ch	~70 characters
--tng-size-xl	80ch	~80 characters
--tng-size-full	stretch	Full available width

Tip

For body text, the widely recommended optimal line length is 50–75 characters per line. .size-md (60ch) hits the sweet spot.

Utility classes

Class	Sets
.size-4xs	--tng-size: var(--tng-size-4xs) (15ch)
.size-3xs	--tng-size: var(--tng-size-3xs) (20ch)
.size-2xs	--tng-size: var(--tng-size-2xs) (30ch)
.size-xs	--tng-size: var(--tng-size-xs) (40ch)
.size-sm	--tng-size: var(--tng-size-sm) (50ch)
.size-md	--tng-size: var(--tng-size-md) (60ch)
.size-lg	--tng-size: var(--tng-size-lg) (70ch)
.size-xl	--tng-size: var(--tng-size-xl) (80ch)
.size-full	--tng-size: var(--tng-size-full) (stretch)

Note

Sizes 2xs through xl set box-sizing: content-box so that padding does not eat into the content width. This ensures the character count remains accurate even when padding utilities are applied.

.size-3xs

.size-2xs

.size-xs

.size-sm

.size-md

.size-lg

.size-xl

.size-full

When to use

Use size utilities when:

• Constraining content width for readability — paragraphs, articles, form fields
• Setting the width of a Wrapper or Grid layout
• Limiting the inline size of any block-level element

Avoid using size utilities for:

• Controlling height — these utilities only affect inline-size
• Pixel-precise widths — use custom values via --tng-size or standard CSS instead

Best practices

• Start with .size-md for long-form text — 60ch is the typographic sweet spot.
• Use .size-full when an element should stretch to fill its container (the default for most layouts).
• Combine with spacing — pair size and spacing utilities for well-proportioned content blocks.
• Prefer tokens over hard-coded values — if none of the preset sizes fit, set --tng-size directly rather than bypassing the system with a raw width declaration.