Back to Material Components Android

Typography theming

docs/theming/Typography.md

1.13.04.1 KB
Original Source
<!--docs: title: "Typography Theming" layout: detail section: theming excerpt: "Typography Theming" iconId: typography path: /theming/typography/ -->

Typography theming

Material Design typography theming can be used to create typographic styles that reflect your brand or style by defining a set of type scales which will be used throughout your app. You can use type scales to customize the appearance of text in Material components.

Design and API Documentation

Usage

Baseline scale

Attribute nameDefault style
textAppearanceDisplayLargeRegular 57sp
textAppearanceDisplayMediumRegular 45sp
textAppearanceDisplaySmallRegular 36sp
textAppearanceHeadlineLargeRegular 32sp
textAppearanceHeadlineMediumRegular 28sp
textAppearanceHeadlineSmallRegular 24sp
textAppearanceTitleLargeRegular 22sp
textAppearanceTitleMediumMedium 16sp
textAppearanceTitleSmallMedium 14sp
textAppearanceBodyLargeRegular 16sp
textAppearanceBodyMediumRegular 14sp
textAppearanceBodySmallRegular 12sp
textAppearanceLabelLargeMedium 14sp
textAppearanceLabelMediumMedium 12sp
textAppearanceLabelSmallMedium 11sp

Emphasized scale

Emphasized styles are used to create hierarchy and are recommended for showing selection, actions, headlines, or other editorial treatments.

Attribute nameDefault style
textAppearanceDisplayLargeEmphasizedMedium 57sp
textAppearanceDisplayMediumEmphasizedMedium 45sp
textAppearanceDisplaySmallEmphasizedMedium 36sp
textAppearanceHeadlineLargeEmphasizedMedium 32sp
textAppearanceHeadlineMediumEmphasizedMedium 28sp
textAppearanceHeadlineSmallEmphasizedMedium 24sp
textAppearanceTitleLargeEmphasizedMedium 22sp
textAppearanceTitleMediumEmphasizedBold 16sp
textAppearanceTitleSmallEmphasizedBold 14sp
textAppearanceBodyLargeEmphasizedMedium 16sp
textAppearanceBodyMediumEmphasizedMedium 14sp
textAppearanceBodySmallEmphasizedMedium 12sp
textAppearanceLabelLargeEmphasizedBold 14sp
textAppearanceLabelMediumEmphasizedBold 12sp
textAppearanceLabelSmallEmphasizedBold 11sp

Style values

Style values are a combination of the following:

  • Font face name and weight
  • Font size
  • Letter spacing
  • Text transformation (e.g., all caps)

Customization

The components included in the Material Design Library reference these themeable text attributes, enabling you to easily change text appearance across your whole application. If you display text in TextViews or create custom components, consider referencing one of these text attributes where it makes sense.

You can change the look of any text style by creating a new style and setting it in your theme:

xml
<style name="TextAppearance.MyApp.DisplaySmall" parent="TextAppearance.Material3.DisplaySmall">
  ...
  <item name="fontFamily">@font/custom_font</item>
  <item name="android:textStyle">normal</item>
  <item name="android:textAllCaps">false</item>
  <item name="android:textSize">64sp</item>
  <item name="android:letterSpacing">0</item>
  ...
</style>
xml
<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
  ...
  <item name="textAppearanceDisplaySmall">@style/TextAppearance.MyApp.DisplaySmall</item>
  ...
</style>

Downloadable fonts

Android O and Android Support Library 26 add support for Downloadable Fonts. This allows you to easily use the entire Google Fonts Open Source collection without bundling a font with your apk. Find more information at https://developers.google.com/fonts/docs/android.

Note: If you want to use a Downloadable Font before Android O, make sure you are using AppCompatTextView or that you are loading the font yourself with ResourcesCompat.getFont().