Skip to content

Instantly share code, notes, and snippets.

@passsy
Last active May 25, 2023 04:24
Show Gist options
  • Star 69 You must be signed in to star a gist
  • Fork 11 You must be signed in to fork a gist
  • Save passsy/9ab560b8877b316a14ea to your computer and use it in GitHub Desktop.
Save passsy/9ab560b8877b316a14ea to your computer and use it in GitHub Desktop.
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
Copy link

Thank you!

@hamen
Copy link

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

cool beans!

@Kvisaz
Copy link

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

aterbo commented Oct 13, 2016

Saved me some time, thank you!

@TarekAloui
Copy link

Thanks !

@amintabar
Copy link

amintabar commented Sep 28, 2017

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

@McBubble
Copy link

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