What is the correct way to use typography in Material Design 3?

Question

In material design 3, there are 15 types of typography tokens:

1. textAppearanceDisplayLarge (57sp)
2. textAppearanceDisplayMedium (45sp)
3. textAppearanceDisplaySmall (36sp)
4. textAppearanceHeadlineLarge (32sp)
5. textAppearanceHeadlineMedium (28sp)
6. textAppearanceHeadlineSmall (24sp)
7. textAppearanceTitleLarge (22sp)
8. textAppearanceTitleMedium (16sp)
9. textAppearanceTitleSmall (14sp)
10. textAppearanceBodyLarge (16sp)
11. textAppearanceBodyMedium (14sp)
12. textAppearanceBodySmall (12sp)
13. textAppearanceLabelLarge (14sp)
14. textAppearanceLabelMedium (12sp)
15. textAppearanceLabelSmall (11sp)

Here is how I used the tokens:

values\dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="textSizeDisplay">36sp</dimen>
    <dimen name="textSizeHeadline">24sp</dimen>
    <dimen name="textSizeTitle">14sp</dimen>
    <dimen name="textSizeBody">12sp</dimen>
    <dimen name="textSizeLabel">11sp</dimen>
</resources>

values-large\dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="textSizeDisplay">45sp</dimen>
    <dimen name="textSizeHeadline">28sp</dimen>
    <dimen name="textSizeTitle">16sp</dimen>
    <dimen name="textSizeBody">14sp</dimen>
    <dimen name="textSizeLabel">12sp</dimen>
</resources>

values-xlarge\dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <dimen name="textSizeDisplay">57sp</dimen>
    <dimen name="textSizeHeadline">32sp</dimen>
    <dimen name="textSizeTitle">22sp</dimen>
    <dimen name="textSizeBody">16sp</dimen>
    <dimen name="textSizeLabel">14sp</dimen>
</resources>

Depending on the text type, I use the tokens

<com.google.android.material.textview.MaterialTextView
    ...
    android:textSize="@dimen/textSizeTitle" />

The question:

Did I use the tokens in the right way or there is another way to use the tokens?

Also, I know when I should use Display and Body, But when should I use Headline, Title, and Label because I think they are the same?

I read this and this but still don't know when should I use Headline, Title, and Label.

Thank you.

Answer 1

You should refer to this documentation to implement the material 3 type scale (link can be found on the material 3 website in this section of the typography documentation by the way).

As a short explanation of how to implement:

1. your app theme should inherit from a Material3 theme, for example:

<style name=Theme.MyApp" parent ="Theme.material3.Light.NoActionBar">
    <!-- add additional properties here -->
</style>

Don't forget to specify your theme in your AndroidManifest.xml file:

<application
     android:theme"@style/Theme.MyApp"
     ...
     />

2. then if you don't need to customize each individual material style, simply use them as needed:

<TextView
    style="?textAppearanceDisplaySmall" 
    ... 
    />

3. if on the other hand you do need to customize each style, then follow the guide found on Github:

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

then in your theme.xml:

<style name="Theme.MyApp" parent="Theme.Material3.DayNight.NoActionBar">
  ...
  <item name="textAppearanceDisplaySmall">@style/TextAppearance.MyApp.DisplaySmall</item>
  ...
</style>

As for Headline vs. Title vs. Label, the documentation you linked seems clear to me:

• use the Headline style for high emphasis text that is short
• use Title style for medium emphasis text that may be longer

So for example if you have a card with a title, you may use the Headline style if it says "Ada Lovelace" but Title if it says "Design is where science and art break even".

• Label is very clearly different than the other two above since the documentation says:

Label styles are smaller, utilitarian styles, used for things like the text inside components or for very small text in the content body, such as captions. Buttons, for example, use the label large style.