Typography

The Typography components (H1–H5, P) provide semantic text elements with built-in accessibility roles. Each component is optimized with appropriate font sizes, weights, line heights, and letter spacing following typographic best practices for clear visual hierarchy and readability.

Preview

Installation

npx novaui-cli add typography

Import

import { H1, H2, H3, H4, H5, P } from 'novaui-components'

Basic Usage

Each typography component renders as a styled Text element with the appropriate variant and accessibility role:

import { H1, P } from 'novaui-components'

export function BasicTypography() {
  return (
    <>
      <H1>Welcome to NovaUI</H1>
      <P>A beautiful and accessible component library for React Native.</P>
    </>
  )
}

Heading Components

H1 — Main Page Title

The largest heading, ideal for primary page titles:

<H1>Page Title</H1>

Classes: text-4xl font-extrabold tracking-tight leading-tight lg:text-5xl

H2 — Section Heading

For major section divisions:

<H2>Section Heading</H2>

Classes: text-3xl font-bold tracking-tight leading-tight

H3 — Subsection Heading

For subsections within a section:

<H3>Subsection Heading</H3>

Classes: text-2xl font-semibold tracking-tight leading-snug

H4 — Minor Heading

For minor divisions or card titles:

<H4>Card Title</H4>

Classes: text-xl font-semibold tracking-tight leading-snug

H5 — Small Heading

For small headings or emphasized text:

<H5>Small Heading</H5>

Classes: text-lg font-medium tracking-normal leading-normal

Paragraph Component

P — Body Text

For body text and descriptions with comfortable reading line height:

<P>
  The quick brown fox jumps over the lazy dog. This paragraph text uses a relaxed
  line height for comfortable reading. Long-form content benefits from generous
  line spacing to reduce eye strain and improve comprehension.
</P>

Classes: text-base font-normal leading-relaxed tracking-normal

Full Page Example

Combine all typography components for a complete page layout:

import { H1, H3, P } from 'novaui-components'
import { View } from 'react-native'

export function PageLayout() {
  return (
    <View className="gap-4">
      <H1>Getting Started</H1>
      <P>Learn how to set up and use NovaUI components in your React Native project.</P>
      <H3>Installation</H3>
      <P>Install the package using your preferred package manager. NovaUI supports npm, yarn, and pnpm.</P>
      <H3>Configuration</H3>
      <P>After installation, configure your project to use NativeWind and set up the theme colors.</P>
    </View>
  )
}

Props API

TypographyProps

All typography components (H1–H5, P) share the same props interface. Extends React.ComponentPropsWithoutRef<typeof Text> and includes:

Typography Scale Reference

Best Practices

1. Use semantic hierarchy: Always use headings in order (H1 > H2 > H3) for proper document structure and accessibility.

2. One H1 per screen: Use only one H1 per screen or page for clear content hierarchy.

3. Accessibility built-in: H1–H5 automatically set accessibilityRole="header", ensuring screen readers announce them correctly.

4. Readable body text: The P component uses leading-relaxed for comfortable reading — don't override this for long-form content.

5. Typography vs Text: Use Typography components (H1–H5, P) when you need semantic accessibility roles. Use the Text component for general-purpose text with more variant options.

Related Components

• Use Text for general-purpose text with additional variants like lead, large, small, muted, and blockquote
• Combine with Separator to divide content sections
• Pair with Card for structured content layouts