Typography

The Text component renders the type roles below.

Usage

import { Text } from "@nesra/ui/text";

export function TypeExample() {
  return (
    <>
      <Text as="h2" variant="heading4">
        Section title
      </Text>
      <Text size="small" weight="medium">
        Supporting detail
      </Text>
    </>
  );
}

The visual heading role does not set the HTML heading level; as does.

Font

Applications load Inter at weights 400, 500, 600, and 700. The package does not bundle it; without Inter, roles fall back to the platform UI font stack. To use another family:

:root {
  --nesra-font-family-sans: "Your approved family", ui-sans-serif, system-ui, sans-serif;
}

Heading roles

Figma style	Text variant	Weight	Size	Line height	Tracking
Heading/H1	heading1	700	72px	86px	-4%
Heading/H2	heading2	700	60px	84px	-4%
Heading/H3	heading3	700	48px	64px	-4%
Heading/H4	heading4	700	36px	46px	-4%
Heading/H5	heading5	700	24px	32px	-2%
Heading/H6	heading6	700	20px	28px	-1%

Body roles

Size	Font size	Line height	Available weights
Large	18px	28px	600, 500, 400
Medium	16px	22px	600, 500, 400
Small	14px	20px	600, 500, 400
XSmall	12px	16px	600, 500, 400

Tracking is -2% for large roles and medium semibold; other body roles use -1%.