Skip to main content
react-md

Typography

The Typography component is used to render text with the correct typography style.

Headline 1

Set the type to headline-1 to render as a h1 element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline1Example(): ReactElement {
  return <Typography type="headline-1">Hello</Typography>;
}

Press Enter to start editing.

Headline 2

Set the type to headline-2 to render as a h2 element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline2Example(): ReactElement {
  return <Typography type="headline-2">Hello</Typography>;
}

Press Enter to start editing.

Headline 3

Set the type to headline-3 to render as a h3 element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline3Example(): ReactElement {
  return <Typography type="headline-3">Hello</Typography>;
}

Press Enter to start editing.

Headline 4

Set the type to headline-4 to render as a h4 element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline4Example(): ReactElement {
  return <Typography type="headline-4">Hello</Typography>;
}

Press Enter to start editing.

Headline 5

Set the type to headline-5 to render as a h5 element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline5Example(): ReactElement {
  return <Typography type="headline-5">Hello</Typography>;
}

Press Enter to start editing.

Headline 6

Set the type to headline-6 to render as a h6 element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Headline6Example(): ReactElement {
  return <Typography type="headline-6">Hello</Typography>;
}

Press Enter to start editing.

Subtitle 1

Set the type to subtitle-1 to render as a h6 element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Subtitle1Example(): ReactElement {
  return <Typography type="subtitle-1">Hello</Typography>;
}

Press Enter to start editing.

Subtitle 2

Set the type to subtitle-2 to render as a h6 element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Subtitle2Example(): ReactElement {
  return <Typography type="subtitle-2">Hello</Typography>;
}

Press Enter to start editing.

Body 1

Set the type to body-1 to render as a p element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Body1Example(): ReactElement {
  return <Typography type="body-1">Hello</Typography>;
}

Press Enter to start editing.

Body 2

Set the type to body-2 to render as a p element with the corresponding typography.

Hello

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function Body2Example(): ReactElement {
  return <Typography type="body-2">Hello</Typography>;
}

Press Enter to start editing.

Caption

Set the type to caption to render as a caption element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function CaptionExample(): ReactElement {
  return (
    <table>
      <Typography type="caption">Hello</Typography>
    </table>
  );
}

Press Enter to start editing.

Overline

Set the type to overline to render as a span element with the corresponding typography.

Hello
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function OverlineExample(): ReactElement {
  return <Typography type="overline">Hello</Typography>;
}

Press Enter to start editing.

Custom Typography Element

The typography styles can also be applied to other elements by using the as prop or using the typography class name utility function.

Paragraph

Div
import { Box } from "@react-md/core/box/Box";
import { Typography } from "@react-md/core/typography/Typography";
import { typography } from "@react-md/core/typography/typographyStyles";
import { type ReactElement } from "react";

export default function CustomTypographyElement(): ReactElement {
  return (
    <Box stacked>
      <Typography type="headline-1" as="p">
        Paragraph
      </Typography>
      <div className={typography({ type: "headline-3" })}>Div</div>
    </Box>
  );
}

Press Enter to start editing.

Customizing Typography

The default typography can be configured by overriding the different typography Sass variables when @forwarding or @useing react-md. The typography types can be customized by:

So the variables for each typography type are:

The example below shows how to customize the default font family, font-weight, and some typography types.

headline-1

headline-2

headline-3

headline-4

headline-5

headline-6

subtitle-1

subtitle-2

caption

overline

import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

import styles from "./CustomizingTypographyExample.module.scss";

export default function CustomizingTypographyExample(): ReactElement {
  return (
    <div className={styles.container}>
      <Typography type="headline-1" as="p">
        headline-1
      </Typography>
      <Typography type="headline-2" as="p">
        headline-2
      </Typography>
      <Typography type="headline-3" as="p">
        headline-3
      </Typography>
      <Typography type="headline-4" as="p">
        headline-4
      </Typography>
      <Typography type="headline-5" as="p">
        headline-5
      </Typography>
      <Typography type="headline-6" as="p">
        headline-6
      </Typography>
      <Typography type="subtitle-1" as="p">
        subtitle-1
      </Typography>
      <Typography type="subtitle-2" as="p">
        subtitle-2
      </Typography>
      <Typography type="caption" as="p">
        caption
      </Typography>
      <Typography type="overline" as="p">
        overline
      </Typography>
    </div>
  );
}

Press Enter to start editing.

@use "sass:string";
@use "@react-md/core" with (
  $font-family: string.unquote("Arial, Verdana, Tahoma, sans-serif"),
  // these are the default font weights
  $font-weight-thin: 100,
  $font-weight-light: 300,
  $font-weight-regular: 400,
  $font-weight-medium: 500,
  $font-weight-bold: 700,
  $font-weight-semi-bold: 800,
  $font-weight-black: 900,
  $base-custom-font-styles: (
    // applies to all `.rmd-typography` classes
    // values will be overridden by the `-custom-styles`
    margin: 1.25em 0 0.5em,
  ),
  $headline-1-custom-styles: (
    font-size: 3rem,
    margin: 0 0 1em,
  ),
  $headline-2-custom-styles: (
    font-size: 2.875rem,
  ),
  $headline-3-custom-styles: (
    font-size: 2.825rem,
  ),
  $headline-4-custom-styles: (),
  $headline-5-custom-styles: (),
  $headline-6-custom-styles: (),
  $subtitle-1-custom-styles: (),
  $subtitle-2-custom-styles: (),
  $body-1-custom-styles: (
    margin: 1em 0,
  ),
  $body-2-custom-styles: (
    margin: 1em 0,
  ),
  $caption-custom-styles: (),
  $overline-custom-styles: ()
);

// this is only required for this demo. In your application, this should just be the normal:
// @include core.styles;
.container {
  :global {
    @include core.typography-base-styles($disable-layer: true);
  }
}

Press Enter to start editing.