Skip to content

Instantly share code, notes, and snippets.

@passsy
Last active May 25, 2023 04:24
Show Gist options
  • 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>
@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