DISPLAY / TYPOGRAPHY

Text and Title

Use one text contract for readable copy and headings. Alignment is logical and portable across web, iOS, and Android.

ONE SOURCE

Same intent, every target

start, center, end, and justify preserve the authored meaning without target-specific syntax.

ALIGNMENT

Align the text, not the container

align belongs to Text and Title. It is independent from Flex or Grid alignment, and start/end follow the writing direction of each target.

EXPLICIT LINE BREAK

Full-stack development, from one codebase

Use a multiline string for an intentional break. Keep maxW alone when natural wrapping is acceptable.

start keeps the copy on the logical leading edge.

center creates a centered reading measure.

end follows the logical trailing edge.

justify distributes space across lines with native target support.

dowe
Title size:"xl" align:"center"
  "Centered heading"
Text size:"lg" align:"justify"
  "A paragraph can use the same logical contract on web, iOS, and Android."

FLUID SIZE

A scalar size is already responsive

The shared typography scale lowers a scalar size through fluid metrics on every target. Use size:"lg" directly; do not add a breakpoint object only to make it responsive.

RECOMMENDED

Fluid by default

The same declaration adapts between compact and wide viewports.

EXPLICIT OVERRIDE

Choose breakpoints deliberately

Use an object only when the design intentionally changes at named breakpoints.

dowe
Text size:"lg"
  "Fluid body copy"
Title size:"xl"
  "Fluid heading"
Text size:{ xs:"md" lg:"xl" }
  "Intentional breakpoint override"

API

Text and Title props

Both components accept the same typography and common style surface. RichText remains a separate marked-text contract and does not accept align.

Prop
Type
Default

No data

There are no records to display