Typography

Typography helps establish hierarchy and communicate important information to users.

Import

import { Typography } from '@md3-react/core';

Basic Usage

Live Editor

<Demo>
  <Typography>Default body text</Typography>
</Demo>

Result

Loading...

Scale

MD3 defines a comprehensive type scale:

Display

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="displayLarge">Display Large</Typography>
    <Typography variant="displayMedium">Display Medium</Typography>
    <Typography variant="displaySmall">Display Small</Typography>
  </div>
</Demo>

Result

Loading...

Headline

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="headlineLarge">Headline Large</Typography>
    <Typography variant="headlineMedium">Headline Medium</Typography>
    <Typography variant="headlineSmall">Headline Small</Typography>
  </div>
</Demo>

Result

Loading...

Title

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="titleLarge">Title Large</Typography>
    <Typography variant="titleMedium">Title Medium</Typography>
    <Typography variant="titleSmall">Title Small</Typography>
  </div>
</Demo>

Result

Loading...

Body

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="bodyLarge">Body Large - The quick brown fox jumps over the lazy dog.</Typography>
    <Typography variant="bodyMedium">Body Medium - The quick brown fox jumps over the lazy dog.</Typography>
    <Typography variant="bodySmall">Body Small - The quick brown fox jumps over the lazy dog.</Typography>
  </div>
</Demo>

Result

Loading...

Label

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="labelLarge">Label Large</Typography>
    <Typography variant="labelMedium">Label Medium</Typography>
    <Typography variant="labelSmall">Label Small</Typography>
  </div>
</Demo>

Result

Loading...

Semantic Elements

Use the as prop to render different HTML elements:

Live Editor

<Demo>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Typography variant="headlineLarge" as="h1">This is an H1</Typography>
    <Typography variant="headlineMedium" as="h2">This is an H2</Typography>
    <Typography variant="bodyLarge" as="p">This is a paragraph.</Typography>
    <Typography variant="labelMedium" as="span">This is a span.</Typography>
  </div>
</Demo>

Result

Loading...

Props

Prop	Type	Default	Description
variant	TypographyVariant	'bodyMedium'	Typography style variant
as	ElementType	varies	HTML element to render
children	ReactNode	-	Text content

Variants Reference

Variant	Font Size	Line Height	Font Weight
displayLarge	57px	64px	400
displayMedium	45px	52px	400
displaySmall	36px	44px	400
headlineLarge	32px	40px	400
headlineMedium	28px	36px	400
headlineSmall	24px	32px	400
titleLarge	22px	28px	400
titleMedium	16px	24px	500
titleSmall	14px	20px	500
bodyLarge	16px	24px	400
bodyMedium	14px	20px	400
bodySmall	12px	16px	400
labelLarge	14px	20px	500
labelMedium	12px	16px	500
labelSmall	11px	16px	500