Typography

Text in Axiom comes from two places: the Heading and Text components, which say what a piece of text is, and the font style props, which set individual values. Reach for a component first.

#

Documentation

#

Headings

Use Heading for page titles, section headings, and card or panel titles. The level prop controls the semantic tag, font size, and line height together, so the page keeps a correct document outline for screen readers. Levels run from 1 to 4.

import { Group, Heading } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Heading level="1">This is h1 heading</Heading>
      <Heading level="2">This is h2 heading</Heading>
      <Heading level="3">This is h3 heading</Heading>
      <Heading level="4">This is h4 heading</Heading>
    </Group>
  );
}

Because the sizes come from the design library, don’t override fontSize on a Heading — pick the level that matches. Two adjustments are expected:

• Every level defaults to fontWeight="700". If the design shows a lighter heading, set fontWeight="500" or "600" explicitly.
• To use one level’s visual size under a different tag, combine level with asChild — see Heading.

#

Body text

Use Text for paragraphs, captions, descriptions, and any other non-heading copy. It renders a <p>, which cannot be nested inside another <p> — for inline styling within a paragraph, use asChild with a <span>.

import { Group, Text } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Text fontSize="xs">Extra small text</Text>
      <Text fontSize="sm">Small text</Text>
      <Text fontSize="md">Default text</Text>
      <Text fontSize="lg">Large text</Text>
      <Text fontSize="xl">Extra large text</Text>
    </Group>
  );
}

Body copy is where the font props belong: fontSize, fontWeight, fontFamily and color, which takes fg. tokens. Each page lists the values available.

#

When it is really a heading

If text ends up at fontSize="xl" or larger and fontWeight="500" or heavier, it is a heading — reach for the component instead. Styling Text to look like one produces the right pixels with none of the semantics:

// Don't do this
<Text fontSize="2xl" fontWeight="700">
  Section title
</Text>
 
// Do this
<Heading level="2">Section title</Heading>

If you are coming from Figma, Heading and Text are the text styles. The font props are the equivalent of overriding size or weight on a single layer.

#

Related