Typography
Text
Typography primitives for body, heading, subline, and caption with a consistent scale of sizes.
Overview
The Text component provides typography primitives for body, heading, subline, and caption with a consistent scale of sizes. It ensures readable, on-brand text across the UI.
Key Business & UX Benefits
- Keeps typography consistent so the app feels cohesive.
- Gives designers and devs one place to control type scale.
- Supports body, headings, sublines, and captions with clear semantics.
- Scales from small labels to large display text.
Pro-Tip from Larry: Stick to the size scale so type stays readable and hierarchy is clear.
Usage
Body
<Text size="xs">body-xs</Text>
<Text size="s">body-s</Text>
<Text size="sm">body-sm</Text>
<Text size="m">body-m</Text>
<Text size="ml">body-ml</Text>
<Text size="l">body-l</Text>
<Text size="xl">body-xl</Text>
<Text size="2xl">body-2xl</Text>
<Text size="3xl">body-3xl</Text>
<Text size="4xl">body-4xl</Text>
Heading
<Text type="heading" size="xs">heading-xs</Text>
<Text type="heading" size="s">heading-s</Text>
<Text type="heading" size="sm">heading-sm</Text>
<Text type="heading" size="m">heading-m</Text>
<Text type="heading" size="ml">heading-ml</Text>
<Text type="heading" size="l">heading-l</Text>
<Text type="heading" size="xl">heading-xl</Text>
<Text type="heading" size="2xl">heading-2xl</Text>
<Text type="heading" size="3xl">heading-3xl</Text>
<Text type="heading" size="4xl">heading-4xl</Text>
Subline
<Text type="subline" size="xs">subline-xs</Text>
<Text type="subline" size="s">subline-s</Text>
<Text type="subline" size="sm">subline-sm</Text>
<Text type="subline" size="m">subline-m</Text>
<Text type="subline" size="ml">subline-ml</Text>
<Text type="subline" size="l">subline-l</Text>
<Text type="subline" size="xl">subline-xl</Text>
<Text type="subline" size="2xl">subline-2xl</Text>
<Text type="subline" size="3xl">subline-3xl</Text>
<Text type="subline" size="4xl">subline-4xl</Text>
Caption
<Text type="caption" size="xs">caption-xs</Text>
<Text type="caption" size="s">caption-s</Text>
<Text type="caption" size="sm">caption-sm</Text>
<Text type="caption" size="m">caption-m</Text>
<Text type="caption" size="ml">caption-ml</Text>
<Text type="caption" size="l">caption-l</Text>
<Text type="caption" size="xl">caption-xl</Text>
<Text type="caption" size="2xl">caption-2xl</Text>
<Text type="caption" size="3xl">caption-3xl</Text>
<Text type="caption" size="4xl">caption-4xl</Text>
Feature List
- Four types: body, heading, subline, and caption
- Consistent size scale from xs to 4xl
- Theme-aligned font family and weight
- Semantic types for accessibility and SEO
API Reference
| Prop | Default | Type |
|---|---|---|
as | div | string | ComponentCan be used to switch element from to something else |
type | body | "subline" | "caption" | "body" | "heading" |
size | sm | "s" | "m" | "xs" | "sm" | "xl" | "l" | "ml" | "2xl" | "3xl" | "4xl" |
weight | "medium" | "bold" | "semi-bold" | "regular" | |
align | "left" | "right" | "center" | "justify" | |
limitWidth | booleanLimits the width of the text to ~80 characters. Defaults to true only for body text. |
| Slot | Type |
|---|---|
default | any |