Typography

ViraUI splits type into two lanes: titles and text. Title consumes the heading typescale; Text consumes the body scale. Those are separate token families on the theme, so a brand font change updates display and running copy together without per-screen CSS. Pick the component by role, then set size for appearance.

On Title, visual size and HTML semantics are independent. size is the look; render is the real element (h1–h6, or another root). Default root is span, so lines that belong in the document outline need an explicit render.

Compose with Title and TextCopy Anchor Link

Paste a typography prompt when you add headings, hero copy, or body blocks. Prefer Title for display and outline structure; Text for paragraphs, labels, and helpers. Keep the heading outline sequential; change size instead of skipping levels.

Build a page hero: one main heading at the top of the outline with supporting paragraph text below. Keep heading levels sequential.

import { Stack, Text, Title } from '@viraui/react';

<Stack rowGap="l">
  <Title size="2" render={<h2 />}>
    Section heading
  </Title>
  <Text size="2xl">Supporting paragraph under that heading.</Text>
</Stack>

Modular ratiosCopy Anchor Link

Theme sheets expose two ratio levers: --font-heading-typescale for Title, and --font-body-typescale for Text. Preflight derives the step sizes from those ratios, so changing a lever moves the whole ladder without editing each step. Brands ship a default; bump the body ratio when running copy needs more room, or the heading ratio when display type should jump more aggressively.

Size vs semantic tagCopy Anchor Link

That split is intentional: size is aesthetics; the tag drives accessibility, screen-reader structure, and indexing. Pair them for ordinary headings. Mismatch only when you mean it (a visually large h3, or a quiet h1 that must stay the page title).

{/* Looks like size 3; still an h1 for outline + SEO */}
<Title size="3" render={<h1 />}>
  Product name
</Title>

{/* Visually quiet subsection that must stay h2 in the outline */}
<Title size="5" render={<h2 />}>
  Details
</Title>

Fluid typeCopy Anchor Link

Title is fluid by default; pass fluid on Text when body copy should track the viewport too. As the viewport narrows, fluid instances interpolate font-size between the current step and the next-smaller one, without hand-written breakpoints.

At the narrow end of the range, a line lands on the size of the previous level; widen again and it grows toward its own scale token, so hierarchy stays coherent across viewports.

• Opt out at the theme root with --effect-fluid-typography: initial to lock every fluid step to its theme scale token
• Per-instance, fluid={false} locks that node the same way
• The smallest body step (Text size="xs") stays fixed either way

TuneCopy Anchor Link

App Studio in ViraUI Pro is the easiest path when you want to reshape type: tweak families and step sizes on a live ViraUI canvas, share the theme with the team, and export CSS that already matches the contract. Drop the export into the app as a custom theme. Title and Text keep the same roles; only the scale changes.

Without Studio, paste a prompt into your agent or edit the typography tokens on a custom theme sheet (or switch a built-in preset). Install the Fontsource packages named in --font-family-* the same way you would for any custom sheet.

Apply our brand fonts for headings and body on the theme. Keep the existing size hierarchy — Title and Text should pick them up from the foundation.