typography #
h1
paragraph
h2
paragraph
h3
paragraph
h4
paragraph
h5
paragraph
h6
paragraphs
paragraphs
paragraphs
p with some small text
p sub p sup p
show code
Font families #
These three are the stacks, and each keeps meaning what it says. Body text renders in --font_family (default var(--font_family_sans)), so a theme that
wants serif or mono body text retargets it rather than redefining a stack. Headings take --heading_font_family (default var(--font_family_serif)), so "one
family everywhere" is deliberately two knobs, and --heading_letter_spacing (default normal) sets their tracking, where an em value follows each
heading's size.
Font sizes #
Two knobs set the sizes. --font_size_scale multiplies every size, body text
(md) and the smaller sizes included, so a theme can enlarge reading text while small text keeps its
proportion to it. The sizes above md also step by one ratio, --type_scale_ratio, which flattens or opens up the whole heading hierarchy
without moving body text.
Every rem length on the page is measured against that root, including ones that come
from elsewhere: a third-party component sized for a 16px rem renders at 62.5% of what
its author intended. Size your own lengths with the style variables, and check any rem-based CSS
you bring in. A @media query is the exception, since its rem is the
browser's initial font size: the sm: breakpoint's 40rem is 640px.
Coming from Tailwind, whose spacing scale assumes a 16px rem (p-4 is 1rem, 16px): here 16px is 1.6rem, and the spacing tokens like p_lg carry the scale, so pasted Tailwind lengths come out smaller.
/* with fuz_css's root, 1rem is 10px */
.card { padding: 1rem; } /* 10px, not 16px */
.card { padding: var(--space_lg); } /* the spacing scale */ Font weights #
Font weight values can be any integer from 1 to 1000.
There are no variables for font-weight but there are utility classes.
Text colors #
The text scale (text_00 through text_100) provides tinted neutral
colors optimized for text legibility. The scale uses "prominence" semantics for light and dark
modes: low numbers are subtle, high numbers are strong. This matches the shade scale pattern.
text_00- surface-side endpoint: essentially invisible on surfacetext_10-text_30- very subtle/faint text: watermarks, hintstext_50- disabled text:text_disabledtext_80- default body text:--text_colortext_90-text_100- high emphasis/headingstext_min/text_max- knockout text (pure white/black without tint)
The text scale is separate from the shade scale because text and backgrounds have different
contrast requirements. Use text_* for text colors and shade_* for
backgrounds. For colored text, use color_a_50 etc.
Line heights #
Icon sizes #
18px32px48px80px128px192px256pxSize composites #
The size composite classes .sized_xs, .sized_sm, .sized_md, .sized_lg, and .sized_xl set --flow_margin, scaling the
vertical spacing between flow elements and headings. Apply on a container to cascade to
children.
<div class="sized_lg">
<h3>heading</h3>
<p>paragraph</p>
<p>paragraph</p>
</div> .sized_xs
Paragraph with size-composite flow margins between elements.
Another paragraph with the matching spacing.
.sized_sm
Paragraph with size-composite flow margins between elements.
Another paragraph with the matching spacing.
.sized_md
Paragraph with size-composite flow margins between elements.
Another paragraph with the matching spacing.
.sized_lg
Paragraph with size-composite flow margins between elements.
Another paragraph with the matching spacing.
.sized_xl
Paragraph with size-composite flow margins between elements.
Another paragraph with the matching spacing.
Reset with .sized_md #
.sized_mdThe .sized_md composite class resets sizing to
the defaults. Use it inside a sized container to restore normal sizing for a subtree.
<div class="sized_sm">
<p>small text</p>
<div class="sized_md">
<p>back to normal</p>
</div>
</div> small region
Everything here is small.
normal nested inside
This region is back to default sizing despite the parent
having .sized_sm.