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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

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>;
}

Caption

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

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>
  );
}

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>
  );
}

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>;
}

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

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

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>
  );
}

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>
  );
}

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:

providing {TYPE}-custom-styles map which would be merged and override any values in the {TYPE}-recommended styles map
providing a {TYPE}-styles map which allows full control and ignores the recommended styles

So the variables for each typography type are:

core.$base-custom-font-styles which is applied to all {TYPE}-recommended-styles
headline-1:
- core.$headline-1-recommended-styles merged with core.$headline-1-custom-styles
- or core.$headline-1-styles
headline-2:
- core.$headline-2-recommended-styles merged with core.$headline-2-custom-styles
- or core.$headline-2-styles
headline-3:
- core.$headline-3-recommended-styles merged with core.$headline-3-custom-styles
- or core.$headline-3-styles
headline-4:
- core.$headline-4-recommended-styles merged with core.$headline-4-custom-styles
- or core.$headline-4-styles
headline-5:
- core.$headline-5-recommended-styles merged with core.$headline-5-custom-styles
- or core.$headline-5-styles
headline-6:
- core.$headline-6-recommended-styles merged with core.$headline-6-custom-styles
- or core.$headline-6-styles
subtitle-1:
- core.$subtitle-1-recommended-styles merged with core.$subtitle-1-custom-styles
- or core.$subtitle-1-styles
subtitle-2:
- core.$subtitle-2-recommended-styles merged with core.$subtitle-2-custom-styles
- or core.$subtitle-2-styles
body-1:
- core.$body-1-recommended-styles merged with core.$body-1-custom-styles
- or core.$body-1-styles
body-2:
- core.$body-2-recommended-styles merged with core.$body-2-custom-styles
- or core.$body-2-styles
caption:
- core.$caption-recommended-styles merged with core.$caption-custom-styles
- or core.$caption-styles
overline:
- core.$overline-recommended-styles merged with core.$overline-custom-styles
- or core.$overline-styles

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>
  );
}

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>
  );
}

@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);
  }
}

@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);
  }
}