Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Material font sizes

Deprecated

use the build in sizes like @dimen/text_size_body_2_material or style/TextAppearance.Material.Headline.

Material text sizes XML for Android

Simple helper file for standard text sizes in material design. The sizes are provided by the material design documentation https://www.google.com/design/spec/style/typography.html#typography-roboto

material typography

Standard Styles

Too many type sizes and styles at once can wreck any layout. A typographic scale is a limited set of type sizes that work well together, along with the layout grid. The basic set of styles are based on a typographic scale of 12, 14, 16, 20, and 34.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="material_text_button">14sp</dimen>
<dimen name="material_text_menu">14sp</dimen>
<dimen name="material_text_caption">12sp</dimen>
<dimen name="material_text_body1">14sp</dimen>
<dimen name="material_text_body2">13sp</dimen>
<dimen name="material_text_subhead">16sp</dimen>
<dimen name="material_text_title">20sp</dimen>
<dimen name="material_text_headline">24sp</dimen>
<dimen name="material_text_display1">34sp</dimen>
<dimen name="material_text_display2">45sp</dimen>
<dimen name="material_text_display3">56sp</dimen>
<dimen name="material_text_display4">112sp</dimen>
</resources>
@aaronennis5778

This comment has been minimized.

Copy link

@aaronennis5778 aaronennis5778 commented Apr 28, 2015

Thank you!

@hamen

This comment has been minimized.

Copy link

@hamen hamen commented Feb 24, 2016

With AppCompat, I use something like this now:

<TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      style="@style/Base.TextAppearance.AppCompat.Title"
      tools:text="I'm a title"/>

Your Deprecated note pointed me in the right direction. Thank you. I leave it here because this page pops out every time on Google Search.

@martyglaubitz

This comment has been minimized.

Copy link

@martyglaubitz martyglaubitz commented Mar 16, 2016

cool beans!

@Kvisaz

This comment has been minimized.

Copy link

@Kvisaz Kvisaz commented May 4, 2016

Thank you!
and thank user hamen for direction

PS: but @style/Base.TextAppearance.AppCompat.Body1
don`t define line height and tracking
it defines only

  1. fontFamily
  2. size
  3. color

So we need to create custom style for full implementation of official Material Design guidelines

@aterbo

This comment has been minimized.

Copy link

@aterbo aterbo commented Oct 13, 2016

Saved me some time, thank you!

@TarekAloui

This comment has been minimized.

Copy link

@TarekAloui TarekAloui commented Dec 3, 2016

Thanks !

@amintabar

This comment has been minimized.

Copy link

@amintabar amintabar commented Sep 28, 2017

Very useful!
I,m visit this page when i forgot which style must to use :-D

@McBubble

This comment has been minimized.

Copy link

@McBubble McBubble commented Aug 20, 2018

This page shows contradictory information to the material design documentation (see link). In the material design Body 1 uses regular font and a bigger font size than Body 2, making Body 1 more bold. On this page it is the other way around Body 2 uses medium font and same font size as Body 1, making Body 2 more bold.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment