Typography

A CSS recipe for semantic text, with a constrained reading measure.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Readable, by default.

Compose meaningful HTML and let the recipe handle spacing and type. Keep headings in order for your document.

A source your team can own

Shared tokens for light and dark themes.
Native semantics and visible focus.

Design and code should speak the same language.

Use data-theme to change themes. Explore the foundations.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add typography

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<Typography size="sm">
  <h2>Workspace guidelines</h2>
  <p>Keep component names <strong>consistent</strong>.</p>
  <ul><li>Start from shared tokens.</li><li>Document decisions.</li></ul>
</Typography>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md`	`md`
`children`	`Semantic HTML`	`—`

Accessibility

Typography styles content; the author chooses heading order, list structure, link meaning, and alternative text. It does not create headings or regions automatically. Place scrollable code blocks in the Tab sequence with a meaningful label when needed. Long content wraps; preformatted content scrolls. Ref targets the wrapper div. Nested Typography wrappers are unnecessary.