Material Design: TYPOGRAPHY

Typography is something which is often look down upon by novice UI designers. But, this is one thing if not set correctly can make an otherwise great app look ugly. So, Google has set strict standards for typography to be used in all Material design apps. But, they have not specified how to implement those standards in Android apps. In this blog I will summarize their standard and also show you how to set those parameters in layout files.

Following parameters are to be set depending on the text type.

  • Font family (android:fontFamily): Default font to be used in material design apps is Roboto. But there are 5 flavors of Roboto to be used judiciously based on text type. And one can do that by specifying android:fontFamily to one of the following.
    1. Roboto Regular: “sans-serif”
    2. Roboto Light: “sans-serif-light”
    3. Roboto Condensed: “sans-serif-condensed”
    4. Roboto Thin(4.2): “sans-serif-thin”
    5. Roboto Medium(5): “sans-serif-medium”
  • Text Size (android:textSize): Specify size in sp
  • Color & Color Contrast (android:textColor): Use #aa000000 to set color. The first octet is the alpha value.
  • Leading & Line Height (android:lineSpacingMultiplier): I am yet to figure out how to set it in SP. Right now it can be set as a multiplier of textSize.
  • Tracking and Kerning(??): No easy method.

Font Family

 Size

 Color & Contrast

 Leading Tracking
Display 4 Light 112sp Black 54%

10
Display 3 Regular 56sp Black 54%

5
Display 2 Regular 45sp Black 54% 48sp 0
Display 1 Regular 34sp Black 54% 40sp 0
Headline Regular 24sp Black 87% 32sp 0
Title Medium 20sp Black 87%

5
Subhead2 Regular 16sp Black 87% 28sp 10
Subhead1 Regular 16sp Black 87% 24sp

Body 2 Medium 14sp Black 87% 24sp 10
Body 1 Regular 14sp Black 87% 20sp 10
Caption Regular 12sp Black 54%

20
Button Medium(ALL CAPS)

android:textAllCaps

 14sp Black 87%

10
Menu Medium 14sp Black 87%