Typography
The Material Design type scale includes a range of contrasting styles that support the needs of
Typography
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.
