Typography
-
Cmn
class Typography
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.
Summary
Public constructors |
|
|---|---|
Typography(The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content. |
Cmn
|
@ExperimentalMaterial3ExpressiveApi |
Cmn
|
Public functions |
||
|---|---|---|
Typography |
copy(Returns a copy of this Typography, optionally overriding some of the values. |
Cmn
|
Typography |
@ExperimentalMaterial3ExpressiveApiReturns a copy of this Typography, optionally overriding some of the values. |
Cmn
|
open operator Boolean |
Cmn
|
|
open Int |
hashCode() |
Cmn
|
open String |
toString() |
Cmn
|
Public properties |
||
|---|---|---|
TextStyle |
bodyLarge is the largest body, and is typically used for long-form writing as it works well for small text sizes. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
bodyMedium is the second largest body, and is typically used for long-form writing as it works well for small text sizes. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
bodySmall is the smallest body, and is typically used for long-form writing as it works well for small text sizes. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
displayLarge is the largest display text. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
displayMedium is the second largest display text. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
displaySmall is the smallest display text. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
headlineLarge is the largest headline, reserved for short, important text or numerals. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
headlineMedium is the second largest headline, reserved for short, important text or numerals. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
headlineSmall is the smallest headline, reserved for short, important text or numerals. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
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. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
labelMedium is one of the smallest font sizes. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
labelSmall is one of the smallest font sizes. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
titleLarge is the largest title, and is typically reserved for medium-emphasis text that is shorter in length. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
titleMedium is the second largest title, and is typically reserved for medium-emphasis text that is shorter in length. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
TextStyle |
titleSmall is the smallest title, and is typically reserved for medium-emphasis text that is shorter in length. |
Cmn
|
TextStyle |
an emphasized version of |
Cmn
|
Public constructors
Typography
Typography(
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
)
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: TextStyle = TypographyTokens.DisplayLarge |
displayLarge is the largest display text. |
displayMedium: TextStyle = TypographyTokens.DisplayMedium |
displayMedium is the second largest display text. |
displaySmall: TextStyle = TypographyTokens.DisplaySmall |
displaySmall is the smallest display text. |
headlineLarge: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.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: TextStyle = TypographyTokens.LabelMedium |
labelMedium is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline. |
labelSmall: TextStyle = TypographyTokens.LabelSmall |
labelSmall is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline. |
Typography
@ExperimentalMaterial3ExpressiveApi
Typography(
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,
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
)
Public functions
copy
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.
copy
@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.
Public properties
bodyLarge
val bodyLarge: TextStyle
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.
bodyLargeEmphasized
@ExperimentalMaterial3ExpressiveApi
val bodyLargeEmphasized: TextStyle
an emphasized version of bodyLarge.
bodyMedium
val bodyMedium: TextStyle
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.
bodyMediumEmphasized
@ExperimentalMaterial3ExpressiveApi
val bodyMediumEmphasized: TextStyle
an emphasized version of bodyMedium.
bodySmall
val bodySmall: TextStyle
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.
bodySmallEmphasized
@ExperimentalMaterial3ExpressiveApi
val bodySmallEmphasized: TextStyle
an emphasized version of bodySmall.
displayLargeEmphasized
@ExperimentalMaterial3ExpressiveApi
val displayLargeEmphasized: TextStyle
an emphasized version of displayLarge.
displayMediumEmphasized
@ExperimentalMaterial3ExpressiveApi
val displayMediumEmphasized: TextStyle
an emphasized version of displayMedium.
displaySmallEmphasized
@ExperimentalMaterial3ExpressiveApi
val displaySmallEmphasized: TextStyle
an emphasized version of displaySmall.
headlineLarge
val headlineLarge: TextStyle
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.
headlineLargeEmphasized
@ExperimentalMaterial3ExpressiveApi
val headlineLargeEmphasized: TextStyle
an emphasized version of headlineLarge.
headlineMedium
val headlineMedium: TextStyle
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.
headlineMediumEmphasized
@ExperimentalMaterial3ExpressiveApi
val headlineMediumEmphasized: TextStyle
an emphasized version of headlineMedium.
headlineSmall
val headlineSmall: TextStyle
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.
headlineSmallEmphasized
@ExperimentalMaterial3ExpressiveApi
val headlineSmallEmphasized: TextStyle
an emphasized version of headlineSmall.
labelLarge
val labelLarge: TextStyle
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.
labelLargeEmphasized
@ExperimentalMaterial3ExpressiveApi
val labelLargeEmphasized: TextStyle
an emphasized version of labelLarge.
labelMedium
val labelMedium: TextStyle
labelMedium is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.
labelMediumEmphasized
@ExperimentalMaterial3ExpressiveApi
val labelMediumEmphasized: TextStyle
an emphasized version of labelMedium.
labelSmall
val labelSmall: TextStyle
labelSmall is one of the smallest font sizes. It is used sparingly to annotate imagery or to introduce a headline.
labelSmallEmphasized
@ExperimentalMaterial3ExpressiveApi
val labelSmallEmphasized: TextStyle
an emphasized version of labelSmall.
titleLarge
val titleLarge: TextStyle
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.
titleLargeEmphasized
@ExperimentalMaterial3ExpressiveApi
val titleLargeEmphasized: TextStyle
an emphasized version of titleLarge.
titleMedium
val titleMedium: TextStyle
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.
titleMediumEmphasized
@ExperimentalMaterial3ExpressiveApi
val titleMediumEmphasized: TextStyle
an emphasized version of titleMedium.
titleSmall
val titleSmall: TextStyle
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.
titleSmallEmphasized
@ExperimentalMaterial3ExpressiveApi
val titleSmallEmphasized: TextStyle
an emphasized version of titleSmall.