Typography - Class in Material 3 Compose

Class

Common

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(https://m3.material.io/styles/typography/overview).

Secondary Constructors

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(https://m3.material.io/styles/typography/overview).

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`.

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,
)

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(https://m3.material.io/styles/typography/overview).

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

Common

val displayLargeEmphasized = displayLargeEmphasized

an emphasized version of displayLarge.

Common

val displayMediumEmphasized = displayMediumEmphasized

an emphasized version of displayMedium.

Common

val displaySmallEmphasized = displaySmallEmphasized

an emphasized version of displaySmall.

Common

val headlineLargeEmphasized = headlineLargeEmphasized

an emphasized version of headlineLarge.

Common

val headlineMediumEmphasized = headlineMediumEmphasized

an emphasized version of headlineMedium.

Common

val headlineSmallEmphasized = headlineSmallEmphasized

an emphasized version of headlineSmall.

Common

val titleLargeEmphasized = titleLargeEmphasized

an emphasized version of titleLarge.

Common

val titleMediumEmphasized = titleMediumEmphasized

an emphasized version of titleMedium.

Common

val titleSmallEmphasized = titleSmallEmphasized

an emphasized version of titleSmall.

Common

val bodyLargeEmphasized = bodyLargeEmphasized

an emphasized version of bodyLarge.

Common

val bodyMediumEmphasized = bodyMediumEmphasized

an emphasized version of bodyMedium.

Common

val bodySmallEmphasized = bodySmallEmphasized

an emphasized version of bodySmall.

Common

val labelLargeEmphasized = labelLargeEmphasized

an emphasized version of labelLarge.

Common

val labelMediumEmphasized = labelMediumEmphasized

an emphasized version of labelMedium.

Common

val labelSmallEmphasized = labelSmallEmphasized

an emphasized version of labelSmall.

Functions

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.

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.