Typography - Class in Material 3 Compose

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Source set: Common

Added in 1.5.0-alpha17

class Typography(
    val displayLarge: TextStyle = typographyTokens.DisplayLarge,
    val displayMedium: TextStyle = typographyTokens.DisplayMedium,
    val displaySmall: TextStyle = typographyTokens.DisplaySmall,
    val headlineLarge: TextStyle = typographyTokens.HeadlineLarge,
    val headlineMedium: TextStyle = typographyTokens.HeadlineMedium,
    val headlineSmall: TextStyle = typographyTokens.HeadlineSmall,
    val titleLarge: TextStyle = typographyTokens.TitleLarge,
    val titleMedium: TextStyle = typographyTokens.TitleMedium,
    val titleSmall: TextStyle = typographyTokens.TitleSmall,
    val bodyLarge: TextStyle = typographyTokens.BodyLarge,
    val bodyMedium: TextStyle = typographyTokens.BodyMedium,
    val bodySmall: TextStyle = typographyTokens.BodySmall,
    val labelLarge: TextStyle = typographyTokens.LabelLarge,
    val labelMedium: TextStyle = typographyTokens.LabelMedium,
    val labelSmall: TextStyle = typographyTokens.LabelSmall,
    displayLargeEmphasized: TextStyle = typographyTokens.DisplayLargeEmphasized,
    displayMediumEmphasized: TextStyle = typographyTokens.DisplayMediumEmphasized,
    displaySmallEmphasized: TextStyle = typographyTokens.DisplaySmallEmphasized,
    headlineLargeEmphasized: TextStyle = typographyTokens.HeadlineLargeEmphasized,
    headlineMediumEmphasized: TextStyle = typographyTokens.HeadlineMediumEmphasized,
    headlineSmallEmphasized: TextStyle = typographyTokens.HeadlineSmallEmphasized,
    titleLargeEmphasized: TextStyle = typographyTokens.TitleLargeEmphasized,
    titleMediumEmphasized: TextStyle = typographyTokens.TitleMediumEmphasized,
    titleSmallEmphasized: TextStyle = typographyTokens.TitleSmallEmphasized,
    bodyLargeEmphasized: TextStyle = typographyTokens.BodyLargeEmphasized,
    bodyMediumEmphasized: TextStyle = typographyTokens.BodyMediumEmphasized,
    bodySmallEmphasized: TextStyle = typographyTokens.BodySmallEmphasized,
    labelLargeEmphasized: TextStyle = typographyTokens.LabelLargeEmphasized,
    labelMediumEmphasized: TextStyle = typographyTokens.LabelMediumEmphasized,
    labelSmallEmphasized: TextStyle = typographyTokens.LabelSmallEmphasized,
)

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.

The type scale is a combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

The emphasized versions of the baseline styles add dynamism and personality to the baseline styles. It can be used to further stylize select pieces of text. The emphasized states have pragmatic uses, such as creating clearer division of content and drawing users' eyes to relevant material.

To learn more about typography, see Material Design typography.

Secondary Constructors

Added in 1.5.0-alpha17

constructor(
    fontFamily: FontFamily,
    displayLarge: TextStyle? = null,
    displayMedium: TextStyle? = null,
    displaySmall: TextStyle? = null,
    headlineLarge: TextStyle? = null,
    headlineMedium: TextStyle? = null,
    headlineSmall: TextStyle? = null,
    titleLarge: TextStyle? = null,
    titleMedium: TextStyle? = null,
    titleSmall: TextStyle? = null,
    bodyLarge: TextStyle? = null,
    bodyMedium: TextStyle? = null,
    bodySmall: TextStyle? = null,
    labelLarge: TextStyle? = null,
    labelMedium: TextStyle? = null,
    labelSmall: TextStyle? = null,
    displayLargeEmphasized: TextStyle? = null,
    displayMediumEmphasized: TextStyle? = null,
    displaySmallEmphasized: TextStyle? = null,
    headlineLargeEmphasized: TextStyle? = null,
    headlineMediumEmphasized: TextStyle? = null,
    headlineSmallEmphasized: TextStyle? = null,
    titleLargeEmphasized: TextStyle? = null,
    titleMediumEmphasized: TextStyle? = null,
    titleSmallEmphasized: TextStyle? = null,
    bodyLargeEmphasized: TextStyle? = null,
    bodyMediumEmphasized: TextStyle? = null,
    bodySmallEmphasized: TextStyle? = null,
    labelLargeEmphasized: TextStyle? = null,
    labelMediumEmphasized: TextStyle? = null,
    labelSmallEmphasized: TextStyle? = null,
) : this(
    tokens = TypographyTokens(fontFamily = fontFamily),
    displayLarge = displayLarge,
    displayMedium = displayMedium,
    displaySmall = displaySmall,
    headlineLarge = headlineLarge,
    headlineMedium = headlineMedium,
    headlineSmall = headlineSmall,
    titleLarge = titleLarge,
    titleMedium = titleMedium,
    titleSmall = titleSmall,
    bodyLarge = bodyLarge,
    bodyMedium = bodyMedium,
    bodySmall = bodySmall,
    labelLarge = labelLarge,
    labelMedium = labelMedium,
    labelSmall = labelSmall,
    displayLargeEmphasized = displayLargeEmphasized,
    displayMediumEmphasized = displayMediumEmphasized,
    displaySmallEmphasized = displaySmallEmphasized,
    headlineLargeEmphasized = headlineLargeEmphasized,
    headlineMediumEmphasized = headlineMediumEmphasized,
    headlineSmallEmphasized = headlineSmallEmphasized,
    titleLargeEmphasized = titleLargeEmphasized,
    titleMediumEmphasized = titleMediumEmphasized,
    titleSmallEmphasized = titleSmallEmphasized,
    bodyLargeEmphasized = bodyLargeEmphasized,
    bodyMediumEmphasized = bodyMediumEmphasized,
    bodySmallEmphasized = bodySmallEmphasized,
    labelLargeEmphasized = labelLargeEmphasized,
    labelMediumEmphasized = labelMediumEmphasized,
    labelSmallEmphasized = labelSmallEmphasized,
)

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.

The type scale is a combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

To learn more about typography, see Material Design typography.

Parameters


fontFamily	the FontFamily to be used for the typography.
displayLarge	displayLarge is the largest display text.
displayMedium	displayMedium is the second largest display text.
displaySmall	displaySmall is the smallest display text.
headlineLarge	headlineLarge is the largest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
headlineMedium	headlineMedium is the second largest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
headlineSmall	headlineSmall is the smallest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
titleLarge	titleLarge is the largest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
titleMedium	titleMedium is the second largest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
titleSmall	titleSmall is the smallest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
bodyLarge	bodyLarge is the largest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
bodyMedium	bodyMedium is the second largest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
bodySmall	bodySmall is the smallest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
labelLarge	labelLarge text is a call to action used in different types of buttons (such as text, outlined and contained buttons) and in tabs, dialogs, and cards. Button text is typically sans serif, using all caps text.
labelMedium	labelMedium is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.
labelSmall	labelSmall is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.
displayLargeEmphasized	an emphasized version of displayLarge.
displayMediumEmphasized	an emphasized version of displayMedium.
displaySmallEmphasized	an emphasized version of displaySmall.
headlineLargeEmphasized	an emphasized version of headlineLarge.
headlineMediumEmphasized	an emphasized version of headlineMedium.
headlineSmallEmphasized	an emphasized version of headlineSmall.
titleLargeEmphasized	an emphasized version of titleLarge.
titleMediumEmphasized	an emphasized version of titleMedium.
titleSmallEmphasized	an emphasized version of titleSmall.
bodyLargeEmphasized	an emphasized version of bodyLarge.
bodyMediumEmphasized	an emphasized version of bodyMedium.
bodySmallEmphasized	an emphasized version of bodySmall.
labelLargeEmphasized	an emphasized version of labelLarge.
labelMediumEmphasized	an emphasized version of labelMedium.
labelSmallEmphasized	an emphasized version of labelSmall.

Added in 1.5.0-alpha17

private constructor(
    tokens: TypographyTokens,
    displayLarge: TextStyle?,
    displayMedium: TextStyle?,
    displaySmall: TextStyle?,
    headlineLarge: TextStyle?,
    headlineMedium: TextStyle?,
    headlineSmall: TextStyle?,
    titleLarge: TextStyle?,
    titleMedium: TextStyle?,
    titleSmall: TextStyle?,
    bodyLarge: TextStyle?,
    bodyMedium: TextStyle?,
    bodySmall: TextStyle?,
    labelLarge: TextStyle?,
    labelMedium: TextStyle?,
    labelSmall: TextStyle?,
    displayLargeEmphasized: TextStyle?,
    displayMediumEmphasized: TextStyle?,
    displaySmallEmphasized: TextStyle?,
    headlineLargeEmphasized: TextStyle?,
    headlineMediumEmphasized: TextStyle?,
    headlineSmallEmphasized: TextStyle?,
    titleLargeEmphasized: TextStyle?,
    titleMediumEmphasized: TextStyle?,
    titleSmallEmphasized: TextStyle?,
    bodyLargeEmphasized: TextStyle?,
    bodyMediumEmphasized: TextStyle?,
    bodySmallEmphasized: TextStyle?,
    labelLargeEmphasized: TextStyle?,
    labelMediumEmphasized: TextStyle?,
    labelSmallEmphasized: TextStyle?,
) : this(
    displayLarge = displayLarge ?: tokens.DisplayLarge,
    displayMedium = displayMedium ?: tokens.DisplayMedium,
    displaySmall = displaySmall ?: tokens.DisplaySmall,
    headlineLarge = headlineLarge ?: tokens.HeadlineLarge,
    headlineMedium = headlineMedium ?: tokens.HeadlineMedium,
    headlineSmall = headlineSmall ?: tokens.HeadlineSmall,
    titleLarge = titleLarge ?: tokens.TitleLarge,
    titleMedium = titleMedium ?: tokens.TitleMedium,
    titleSmall = titleSmall ?: tokens.TitleSmall,
    bodyLarge = bodyLarge ?: tokens.BodyLarge,
    bodyMedium = bodyMedium ?: tokens.BodyMedium,
    bodySmall = bodySmall ?: tokens.BodySmall,
    labelLarge = labelLarge ?: tokens.LabelLarge,
    labelMedium = labelMedium ?: tokens.LabelMedium,
    labelSmall = labelSmall ?: tokens.LabelSmall,
    displayLargeEmphasized = displayLargeEmphasized ?: tokens.DisplayLargeEmphasized,
    displayMediumEmphasized = displayMediumEmphasized ?: tokens.DisplayMediumEmphasized,
    displaySmallEmphasized = displaySmallEmphasized ?: tokens.DisplaySmallEmphasized,
    headlineLargeEmphasized = headlineLargeEmphasized ?: tokens.HeadlineLargeEmphasized,
    headlineMediumEmphasized = headlineMediumEmphasized ?: tokens.HeadlineMediumEmphasized,
    headlineSmallEmphasized = headlineSmallEmphasized ?: tokens.HeadlineSmallEmphasized,
    titleLargeEmphasized = titleLargeEmphasized ?: tokens.TitleLargeEmphasized,
    titleMediumEmphasized = titleMediumEmphasized ?: tokens.TitleMediumEmphasized,
    titleSmallEmphasized = titleSmallEmphasized ?: tokens.TitleSmallEmphasized,
    bodyLargeEmphasized = bodyLargeEmphasized ?: tokens.BodyLargeEmphasized,
    bodyMediumEmphasized = bodyMediumEmphasized ?: tokens.BodyMediumEmphasized,
    bodySmallEmphasized = bodySmallEmphasized ?: tokens.BodySmallEmphasized,
    labelLargeEmphasized = labelLargeEmphasized ?: tokens.LabelLargeEmphasized,
    labelMediumEmphasized = labelMediumEmphasized ?: tokens.LabelMediumEmphasized,
    labelSmallEmphasized = labelSmallEmphasized ?: tokens.LabelSmallEmphasized,
)

Added in 1.5.0-alpha17

constructor(
    displayLarge: TextStyle = typographyTokens.DisplayLarge,
    displayMedium: TextStyle = typographyTokens.DisplayMedium,
    displaySmall: TextStyle = typographyTokens.DisplaySmall,
    headlineLarge: TextStyle = typographyTokens.HeadlineLarge,
    headlineMedium: TextStyle = typographyTokens.HeadlineMedium,
    headlineSmall: TextStyle = typographyTokens.HeadlineSmall,
    titleLarge: TextStyle = typographyTokens.TitleLarge,
    titleMedium: TextStyle = typographyTokens.TitleMedium,
    titleSmall: TextStyle = typographyTokens.TitleSmall,
    bodyLarge: TextStyle = typographyTokens.BodyLarge,
    bodyMedium: TextStyle = typographyTokens.BodyMedium,
    bodySmall: TextStyle = typographyTokens.BodySmall,
    labelLarge: TextStyle = typographyTokens.LabelLarge,
    labelMedium: TextStyle = typographyTokens.LabelMedium,
    labelSmall: TextStyle = typographyTokens.LabelSmall,
) : this(
    displayLarge = displayLarge,
    displayMedium = displayMedium,
    displaySmall = displaySmall,
    headlineLarge = headlineLarge,
    headlineMedium = headlineMedium,
    headlineSmall = headlineSmall,
    titleLarge = titleLarge,
    titleMedium = titleMedium,
    titleSmall = titleSmall,
    bodyLarge = bodyLarge,
    bodyMedium = bodyMedium,
    bodySmall = bodySmall,
    labelLarge = labelLarge,
    labelMedium = labelMedium,
    labelSmall = labelSmall,
    displayLargeEmphasized = displayLarge,
    displayMediumEmphasized = displayMedium,
    displaySmallEmphasized = displaySmall,
    headlineLargeEmphasized = headlineLarge,
    headlineMediumEmphasized = headlineMedium,
    headlineSmallEmphasized = headlineSmall,
    titleLargeEmphasized = titleLarge,
    titleMediumEmphasized = titleMedium,
    titleSmallEmphasized = titleSmall,
    bodyLargeEmphasized = bodyLarge,
    bodyMediumEmphasized = bodyMedium,
    bodySmallEmphasized = bodySmall,
    labelLargeEmphasized = labelLarge,
    labelMediumEmphasized = labelMedium,
    labelSmallEmphasized = labelSmall,
)

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.

Use typography to make writing legible and beautiful. Material's default type scale includes contrasting and flexible styles to support a wide range of use cases.

The type scale is a combination of thirteen styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

To learn more about typography, see Material Design typography.

Parameters


displayLarge	displayLarge is the largest display text.
displayMedium	displayMedium is the second largest display text.
displaySmall	displaySmall is the smallest display text.
headlineLarge	headlineLarge is the largest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
headlineMedium	headlineMedium is the second largest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
headlineSmall	headlineSmall is the smallest headline, reserved for short, important text or numerals. For headlines, you can choose an expressive font, such as a display, handwritten, or script style. These unconventional font designs have details and intricacy that help attract the eye.
titleLarge	titleLarge is the largest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
titleMedium	titleMedium is the second largest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
titleSmall	titleSmall is the smallest title, and is typically reserved for medium-emphasis text that is shorter in length. Serif or sans serif typefaces work well for subtitles.
bodyLarge	bodyLarge is the largest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
bodyMedium	bodyMedium is the second largest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
bodySmall	bodySmall is the smallest body, and is typically used for long-form writing as it works well for small text sizes. For longer sections of text, a serif or sans serif typeface is recommended.
labelLarge	labelLarge text is a call to action used in different types of buttons (such as text, outlined and contained buttons) and in tabs, dialogs, and cards. Button text is typically sans serif, using all caps text.
labelMedium	labelMedium is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.
labelSmall	labelSmall is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.

Properties

displayLargeEmphasized

Source set: Common

Added in 1.5.0-alpha17

val displayLargeEmphasized = displayLargeEmphasized

an emphasized version of displayLarge.

displayMediumEmphasized

Source set: Common

Added in 1.5.0-alpha17

val displayMediumEmphasized = displayMediumEmphasized

an emphasized version of displayMedium.

displaySmallEmphasized

Source set: Common

Added in 1.5.0-alpha17

val displaySmallEmphasized = displaySmallEmphasized

an emphasized version of displaySmall.

headlineLargeEmphasized

Source set: Common

Added in 1.5.0-alpha17

val headlineLargeEmphasized = headlineLargeEmphasized

an emphasized version of headlineLarge.

headlineMediumEmphasized

Source set: Common

Added in 1.5.0-alpha17

val headlineMediumEmphasized = headlineMediumEmphasized

an emphasized version of headlineMedium.

headlineSmallEmphasized

Source set: Common

Added in 1.5.0-alpha17

val headlineSmallEmphasized = headlineSmallEmphasized

an emphasized version of headlineSmall.

titleLargeEmphasized

Source set: Common

Added in 1.5.0-alpha17

val titleLargeEmphasized = titleLargeEmphasized

an emphasized version of titleLarge.

titleMediumEmphasized

Source set: Common

Added in 1.5.0-alpha17

val titleMediumEmphasized = titleMediumEmphasized

an emphasized version of titleMedium.

titleSmallEmphasized

Source set: Common

Added in 1.5.0-alpha17

val titleSmallEmphasized = titleSmallEmphasized

an emphasized version of titleSmall.

bodyLargeEmphasized

Source set: Common

Added in 1.5.0-alpha17

val bodyLargeEmphasized = bodyLargeEmphasized

an emphasized version of bodyLarge.

bodyMediumEmphasized

Source set: Common

Added in 1.5.0-alpha17

val bodyMediumEmphasized = bodyMediumEmphasized

an emphasized version of bodyMedium.

bodySmallEmphasized

Source set: Common

Added in 1.5.0-alpha17

val bodySmallEmphasized = bodySmallEmphasized

an emphasized version of bodySmall.

labelLargeEmphasized

Source set: Common

Added in 1.5.0-alpha17

val labelLargeEmphasized = labelLargeEmphasized

an emphasized version of labelLarge.

labelMediumEmphasized

Source set: Common

Added in 1.5.0-alpha17

val labelMediumEmphasized = labelMediumEmphasized

an emphasized version of labelMedium.

labelSmallEmphasized

Source set: Common

Added in 1.5.0-alpha17

val labelSmallEmphasized = labelSmallEmphasized

an emphasized version of labelSmall.

Functions

copy

Added in 1.5.0-alpha17

fun copy(
        displayLarge: TextStyle = this.displayLarge,
        displayMedium: TextStyle = this.displayMedium,
        displaySmall: TextStyle = this.displaySmall,
        headlineLarge: TextStyle = this.headlineLarge,
        headlineMedium: TextStyle = this.headlineMedium,
        headlineSmall: TextStyle = this.headlineSmall,
        titleLarge: TextStyle = this.titleLarge,
        titleMedium: TextStyle = this.titleMedium,
        titleSmall: TextStyle = this.titleSmall,
        bodyLarge: TextStyle = this.bodyLarge,
        bodyMedium: TextStyle = this.bodyMedium,
        bodySmall: TextStyle = this.bodySmall,
        labelLarge: TextStyle = this.labelLarge,
        labelMedium: TextStyle = this.labelMedium,
        labelSmall: TextStyle = this.labelSmall,
        displayLargeEmphasized: TextStyle = this.displayLargeEmphasized,
        displayMediumEmphasized: TextStyle = this.displayMediumEmphasized,
        displaySmallEmphasized: TextStyle = this.displaySmallEmphasized,
        headlineLargeEmphasized: TextStyle = this.headlineLargeEmphasized,
        headlineMediumEmphasized: TextStyle = this.headlineMediumEmphasized,
        headlineSmallEmphasized: TextStyle = this.headlineSmallEmphasized,
        titleLargeEmphasized: TextStyle = this.titleLargeEmphasized,
        titleMediumEmphasized: TextStyle = this.titleMediumEmphasized,
        titleSmallEmphasized: TextStyle = this.titleSmallEmphasized,
        bodyLargeEmphasized: TextStyle = this.bodyLargeEmphasized,
        bodyMediumEmphasized: TextStyle = this.bodyMediumEmphasized,
        bodySmallEmphasized: TextStyle = this.bodySmallEmphasized,
        labelLargeEmphasized: TextStyle = this.labelLargeEmphasized,
        labelMediumEmphasized: TextStyle = this.labelMediumEmphasized,
        labelSmallEmphasized: TextStyle = this.labelSmallEmphasized,
    ): Typography

Returns a copy of this Typography, optionally overriding some of the values.

copy

Added in 1.5.0-alpha17

fun copy(
        displayLarge: TextStyle = this.displayLarge,
        displayMedium: TextStyle = this.displayMedium,
        displaySmall: TextStyle = this.displaySmall,
        headlineLarge: TextStyle = this.headlineLarge,
        headlineMedium: TextStyle = this.headlineMedium,
        headlineSmall: TextStyle = this.headlineSmall,
        titleLarge: TextStyle = this.titleLarge,
        titleMedium: TextStyle = this.titleMedium,
        titleSmall: TextStyle = this.titleSmall,
        bodyLarge: TextStyle = this.bodyLarge,
        bodyMedium: TextStyle = this.bodyMedium,
        bodySmall: TextStyle = this.bodySmall,
        labelLarge: TextStyle = this.labelLarge,
        labelMedium: TextStyle = this.labelMedium,
        labelSmall: TextStyle = this.labelSmall,
    ): Typography

Returns a copy of this Typography, optionally overriding some of the values.

TwoRowsTopAppBarOverrideScope ← Previous TypographyKeyTokens.BodyLarge Next →