MDX Docs

Typography

The Typography component is a fundamental building block for displaying text content in your application. Material UI's Typography component provides consistent, accessible, and customizable text styling with predefined variants that follow design system principles.

Typography components can be used to display text with consistent styling and proper semantic meaning.

Variants

Material UI typography comes with several predefined variants that map to common HTML elements:

Heading Variants

h1 - Main Page Title

Heading 1

jsx
<Typography variant="h1">Heading 1</Typography>

h2 - Section Headers

Heading 2

jsx
<Typography variant="h2">Heading 2</Typography>

h3 - Subsection Headers

Heading 3

jsx
<Typography variant="h3">Heading 3</Typography>

h4 - Component Titles

Heading 4

jsx
<Typography variant="h4">Heading 4</Typography>

h5 - Subcomponent Titles

Heading 5
jsx
<Typography variant="h5">Heading 5</Typography>

h6 - Small Titles

Heading 6
jsx
<Typography variant="h6">Heading 6</Typography>

Body Text Variants

Body 1 - Default Body Text

This is body1 text. It's the default variant for body text and is used for most content on the page. It provides good readability and is suitable for paragraphs, descriptions, and general content.
jsx
<Typography variant="body1" component="div">
  This is body1 text. It's the default variant for body text.
</Typography>

Body 2 - Smaller Body Text

This is body2 text. It's slightly smaller than body1 and is often used for secondary information, captions, or when you need to fit more content in a smaller space.
jsx
<Typography variant="body2" component="div">
  This is body2 text. It's slightly smaller than body1.
</Typography>

Special Variants

Subtitle 1

Subtitle 1 - Used for subtitles and secondary headings
jsx
<Typography variant="subtitle1">
  Subtitle 1 - Used for subtitles and secondary headings
</Typography>

Subtitle 2

Subtitle 2 - Smaller subtitle variant
jsx
<Typography variant="subtitle2">
  Subtitle 2 - Smaller subtitle variant
</Typography>

Caption

Caption text - Used for small text like image captions, footnotes, or metadata 
jsx
<Typography variant="caption">
  Caption text - Used for small text like image captions
</Typography>

Overline

OVERLINE TEXT - Used for small uppercase text like labels or categories 
jsx
<Typography variant="overline">
  OVERLINE TEXT - Used for small uppercase text
</Typography>

Customizing Typography Variants

You can customize the font-size, font-weight, line-height, and other typography properties for each variant by configuring the theme's typography settings. This allows you to create a consistent design system that matches your brand requirements.

Theme Configuration

To customize typography variants, you need to modify your theme configuration. Here's how to do it:

jsx
import { createTheme } from "@mui/material/styles";


const theme = createTheme({
  typography: {
    // Customize the default font family
    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',


    // Customize specific variants
    h1: {
      fontSize: "2.5rem", // 40px
      fontWeight: 700, // Bold
      lineHeight: 1.2, // 120%
      letterSpacing: "-0.02em", // Tighter letter spacing
      fontFamily: '"Poppins", sans-serif', // Custom font for headings
    },
    h2: {
      fontSize: "2rem", // 32px
      fontWeight: 600, // Semi-bold
      lineHeight: 1.3,
      letterSpacing: "-0.01em",
    },
    h3: {
      fontSize: "1.75rem", // 28px
      fontWeight: 600,
      lineHeight: 1.4,
    },
    h4: {
      fontSize: "1.5rem", // 24px
      fontWeight: 500, // Medium
      lineHeight: 1.4,
    },
    h5: {
      fontSize: "1.25rem", // 20px
      fontWeight: 500,
      lineHeight: 1.5,
    },
    h6: {
      fontSize: "1.125rem", // 18px
      fontWeight: 500,
      lineHeight: 1.5,
    },
    subtitle1: {
      fontSize: "1rem", // 16px
      fontWeight: 400, // Regular
      lineHeight: 1.5,
      letterSpacing: "0.01em",
    },
    subtitle2: {
      fontSize: "0.875rem", // 14px
      fontWeight: 500,
      lineHeight: 1.57,
    },
    body1: {
      fontSize: "1rem", // 16px
      fontWeight: 400,
      lineHeight: 1.5,
      letterSpacing: "0.01em",
    },
    body2: {
      fontSize: "0.875rem", // 14px
      fontWeight: 400,
      lineHeight: 1.43,
    },
    caption: {
      fontSize: "0.75rem", // 12px
      fontWeight: 400,
      lineHeight: 1.66,
      letterSpacing: "0.03em",
    },
    overline: {
      fontSize: "0.75rem", // 12px
      fontWeight: 400,
      lineHeight: 2.66,
      letterSpacing: "0.1em",
      textTransform: "uppercase",
    },
    // You can also add custom variants
    button: {
      fontSize: "0.875rem",
      fontWeight: 500,
      lineHeight: 1.75,
      letterSpacing: "0.03em",
      textTransform: "uppercase",
    },
  },
});

Available Typography Properties

Each typography variant can be customized with the following properties:

  • fontSize: Font size (can be px, rem, em, etc.)
  • fontWeight: Font weight (100-900, or 'light', 'normal', 'bold', etc.)
  • lineHeight: Line height (can be unitless ratio or specific values)
  • letterSpacing: Letter spacing (em, px, etc.)
  • fontFamily: Font family
  • textTransform: Text transformation ('none', 'uppercase', 'lowercase', 'capitalize')
  • fontStyle: Font style ('normal', 'italic')
  • textDecoration: Text decoration ('none', 'underline', 'line-through')

Responsive Typography

You can also create responsive typography that adapts to different screen sizes:

jsx
const theme = createTheme({
  typography: {
    h1: {
      fontSize: "2rem", // Default for mobile
      "@media (min-width:600px)": {
        fontSize: "2.5rem", // Tablet and up
      },
      "@media (min-width:900px)": {
        fontSize: "3rem", // Desktop and up
      },
    },
    body1: {
      fontSize: "0.875rem", // Mobile
      "@media (min-width:600px)": {
        fontSize: "1rem", // Tablet and up
      },
    },
  },
});

Custom Typography Variants

You can also create completely custom typography variants:

jsx
const theme = createTheme({
  typography: {
    // Custom variant
    display1: {
      fontSize: "3.5rem",
      fontWeight: 300,
      lineHeight: 1.1,
      letterSpacing: "-0.02em",
      fontFamily: '"Playfair Display", serif',
    },
    display2: {
      fontSize: "2.8125rem",
      fontWeight: 300,
      lineHeight: 1.2,
      letterSpacing: "-0.01em",
      fontFamily: '"Playfair Display", serif',
    },
    // Custom utility variant
    code: {
      fontSize: "0.875rem",
      fontWeight: 400,
      lineHeight: 1.5,
      fontFamily: '"Roboto Mono", monospace',
      backgroundColor: "rgba(0, 0, 0, 0.04)",
      padding: "2px 4px",
      borderRadius: "4px",
    },
  },
});

Using Custom Variants

After defining custom variants, you can use them like any other variant:

jsx
<Typography variant="display1">
  Custom Display Heading
</Typography>


<Typography variant="code">
  const example = "This is code text";
</Typography>

Complete Theme Example

Here's a complete example of how to integrate typography customization into your existing theme:

jsx
// src/themes/lightTheme.js
export const lightTheme = {
  palette: {
    // ... existing palette configuration
  },
  typography: {
    fontFamily: '"Inter", "Roboto", "Helvetica", "Arial", sans-serif',
    h1: {
      fontSize: "2.5rem",
      fontWeight: 700,
      lineHeight: 1.2,
      letterSpacing: "-0.02em",
    },
    h2: {
      fontSize: "2rem",
      fontWeight: 600,
      lineHeight: 1.3,
    },
    h3: {
      fontSize: "1.75rem",
      fontWeight: 600,
      lineHeight: 1.4,
    },
    h4: {
      fontSize: "1.5rem",
      fontWeight: 500,
      lineHeight: 1.4,
    },
    h5: {
      fontSize: "1.25rem",
      fontWeight: 500,
      lineHeight: 1.5,
    },
    h6: {
      fontSize: "1.125rem",
      fontWeight: 500,
      lineHeight: 1.5,
    },
    subtitle1: {
      fontSize: "1rem",
      fontWeight: 400,
      lineHeight: 1.5,
    },
    subtitle2: {
      fontSize: "0.875rem",
      fontWeight: 500,
      lineHeight: 1.57,
    },
    body1: {
      fontSize: "1rem",
      fontWeight: 400,
      lineHeight: 1.5,
    },
    body2: {
      fontSize: "0.875rem",
      fontWeight: 400,
      lineHeight: 1.43,
    },
    caption: {
      fontSize: "0.75rem",
      fontWeight: 400,
      lineHeight: 1.66,
    },
    overline: {
      fontSize: "0.75rem",
      fontWeight: 400,
      lineHeight: 2.66,
      letterSpacing: "0.1em",
      textTransform: "uppercase",
    },
    button: {
      fontSize: "0.875rem",
      fontWeight: 500,
      lineHeight: 1.75,
      letterSpacing: "0.03em",
      textTransform: "uppercase",
    },
  },
};

Colors

Typography supports different color schemes that integrate with your Material UI theme:

Primary Color Text
Secondary Color Text
Error Color Text
Warning Color Text
Info Color Text
Success Color Text
Text Primary
Text Secondary
jsx
<Typography variant="h6" color="primary">
  Primary Color Text
</Typography>
<Typography variant="h6" color="secondary">
  Secondary Color Text
</Typography>
<Typography variant="h6" color="error">
  Error Color Text
</Typography>
<Typography variant="h6" color="warning">
  Warning Color Text
</Typography>
<Typography variant="h6" color="info">
  Info Color Text
</Typography>
<Typography variant="h6" color="success">
  Success Color Text
</Typography>
<Typography variant="h6" color="text.primary">
  Text Primary
</Typography>
<Typography variant="h6" color="text.secondary">
  Text Secondary
</Typography>

Alignment

Typography components can be aligned in different ways:

Left Aligned Text
Center Aligned Text
Right Aligned Text
Justified Text - This text is justified to create even margins on both sides. It's useful for creating clean, professional-looking paragraphs.
jsx
<Typography variant="h6" align="left">
  Left Aligned Text
</Typography>
<Typography variant="h6" align="center">
  Center Aligned Text
</Typography>
<Typography variant="h6" align="right">
  Right Aligned Text
</Typography>

Common Props

The Typography component accepts various props to customize its appearance and behavior:

jsx
<Typography
  variant="body1" // 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'overline'
  color="text.primary" // 'initial' | 'inherit' | 'primary' | 'secondary' | 'text.primary' | 'text.secondary' | 'error' | 'warning' | 'info' | 'success'
  align="inherit" // 'inherit' | 'left' | 'center' | 'right' | 'justify'
  gutterBottom={false} // boolean - adds bottom margin
  noWrap={false} // boolean - prevents text wrapping
  paragraph={false} // boolean - adds bottom margin (same as gutterBottom)
  display="initial" // 'initial' | 'block' | 'inline'
  variantMapping={{}} // object - maps variants to HTML elements
>
  Typography content
</Typography>

Accessibility

Material UI typography components are built with accessibility in mind:

  • Semantic HTML: Each variant maps to the appropriate HTML element (h1, h2, p, etc.)
  • Screen readers: Proper heading hierarchy and semantic structure
  • Color contrast: Meets WCAG guidelines for text contrast ratios
  • Focus indicators: Clear visual focus indicators for keyboard navigation

Best Practices

  1. Use proper heading hierarchy - Start with h1 for the main title, then h2, h3, etc.
  2. Choose appropriate variants - Use body1 for main content, body2 for secondary text
  3. Maintain consistent spacing - Let natural document flow handle spacing
  4. Consider color contrast - Ensure text is readable in both light and dark modes
  5. Use semantic meaning - Choose variants based on content meaning, not just appearance
  6. Customize systematically - When customizing typography, maintain consistency across variants
  7. Test readability - Ensure your custom font sizes and weights maintain good readability
  8. Consider responsive design - Use responsive typography for better mobile experience

Examples

Article Layout

jsx
<Typography variant="h1">
  Article Title
</Typography>
<Typography variant="subtitle1" color="text.secondary">
  Article subtitle or description
</Typography>
<Typography variant="body1">
  This is the main content of the article. It uses body1 for optimal readability.
</Typography>
<Typography variant="body2" color="text.secondary">
  Additional information or metadata
</Typography>

Form Labels

jsx
<Typography variant="subtitle2">
  Form Section Title
</Typography>
<Typography variant="body2" color="text.secondary">
  Form field description or help text
</Typography>

Error Messages

jsx
<Typography variant="body2" color="error">
  This field is required
</Typography>

Documentation

  • Material UI - Typography