Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Material font sizes


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

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

This comment has been minimized.

Copy link

@aaronennis5778 aaronennis5778 commented Apr 28, 2015

Thank you!


This comment has been minimized.

Copy link

@hamen hamen commented Feb 24, 2016

With AppCompat, I use something like this now:

      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.


This comment has been minimized.

Copy link

@martyglaubitz martyglaubitz commented Mar 16, 2016

cool beans!


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


This comment has been minimized.

Copy link

@aterbo aterbo commented Oct 13, 2016

Saved me some time, thank you!


This comment has been minimized.

Copy link

@TarekAloui TarekAloui commented Dec 3, 2016

Thanks !


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


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