Typography
Class
Common
class Typography
@ExperimentalMaterial3ExpressiveApi
constructor(
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(
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
@ExperimentalMaterial3ExpressiveApi
val displayLargeEmphasized = displayLargeEmphasized
an emphasized version of displayLarge.
Common
@ExperimentalMaterial3ExpressiveApi
val displayMediumEmphasized = displayMediumEmphasized
an emphasized version of displayMedium.
Common
@ExperimentalMaterial3ExpressiveApi
val displaySmallEmphasized = displaySmallEmphasized
an emphasized version of displaySmall.
Common
@ExperimentalMaterial3ExpressiveApi
val headlineLargeEmphasized = headlineLargeEmphasized
an emphasized version of headlineLarge.
Common
@ExperimentalMaterial3ExpressiveApi
val headlineMediumEmphasized = headlineMediumEmphasized
an emphasized version of headlineMedium.
Common
@ExperimentalMaterial3ExpressiveApi
val headlineSmallEmphasized = headlineSmallEmphasized
an emphasized version of headlineSmall.
Common
@ExperimentalMaterial3ExpressiveApi
val titleLargeEmphasized = titleLargeEmphasized
an emphasized version of titleLarge.
Common
@ExperimentalMaterial3ExpressiveApi
val titleMediumEmphasized = titleMediumEmphasized
an emphasized version of titleMedium.
Common
@ExperimentalMaterial3ExpressiveApi
val titleSmallEmphasized = titleSmallEmphasized
an emphasized version of titleSmall.
Common
@ExperimentalMaterial3ExpressiveApi
val bodyLargeEmphasized = bodyLargeEmphasized
an emphasized version of bodyLarge.
Common
@ExperimentalMaterial3ExpressiveApi
val bodyMediumEmphasized = bodyMediumEmphasized
an emphasized version of bodyMedium.
Common
@ExperimentalMaterial3ExpressiveApi
val bodySmallEmphasized = bodySmallEmphasized
an emphasized version of bodySmall.
Common
@ExperimentalMaterial3ExpressiveApi
val labelLargeEmphasized = labelLargeEmphasized
an emphasized version of labelLarge.
Common
@ExperimentalMaterial3ExpressiveApi
val labelMediumEmphasized = labelMediumEmphasized
an emphasized version of labelMedium.
Common
@ExperimentalMaterial3ExpressiveApi
val labelSmallEmphasized = labelSmallEmphasized
an emphasized version of labelSmall.
Functions
@ExperimentalMaterial3ExpressiveApi
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.
