Typography

Text

Body copy at 14px with generous line height, plus muted, strong and uppercase overline styles.

import { Text } from '@jsonresume/ui'Source(opens in a new tab)

Playground

Change the props and copy the result.

JSON Resume is an open standard for resumes.

size

tone

weight

capsmeasure

children

jsx

<Text size="sm" tone="default" weight="regular">JSON Resume is an open standard for resumes.</Text>

Examples

Sizes and tones

For developers, by developers

JSON Resume is a community driven open-source initiative.

The schema is open source and community-driven.

Last updated 23 Oct 2026

text/tones.tsx

import { Stack, Text } from '@jsonresume/ui';

export default function TextTones() {
  return (
    <Stack gap={3}>
      <Text caps tone="muted">
        For developers, by developers
      </Text>
      <Text size="lg">
        JSON Resume is a community driven open-source initiative.
      </Text>
      <Text>The schema is open source and community-driven.</Text>
      <Text tone="muted" size="xs">
        Last updated 23 Oct 2026
      </Text>
    </Stack>
  );
}

Accessibility

Muted text still meets 4.5:1 on every surface; see Color.
caps is for short labels only: long uppercase text is hard to read.

Props

<Text>

Also accepts the attributes of the element Text renders.
Prop	Type	Default	Description
as	smallstrongdivlabelpspanem	p
caps	boolean	–	Style variant.
measure	boolean	–	Style variant.
size	xssmmdlg	sm	Style variant.
tone	inheritdefaultmutedstrong	default	Style variant.
weight	boldlightregularsemibold	regular	Style variant.