Skip to content

Instantly share code, notes, and snippets.

@webserveis
Forked from passsy/material text sizes.md
Last active August 10, 2024 02:29
Show Gist options
  • Save webserveis/c8c7e001c617829caa61dae385113e00 to your computer and use it in GitHub Desktop.
Save webserveis/c8c7e001c617829caa61dae385113e00 to your computer and use it in GitHub Desktop.
Material font sizes

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.

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="location"
    android:textAppearance="@style/Base.TextAppearance.AppCompat.Title" />

Sytles extract to support library v7: styles_base_text.xml

  • Base.TextAppearance.AppCompat.Display4
  • Base.TextAppearance.AppCompat.Display3
  • Base.TextAppearance.AppCompat.Display2
  • Base.TextAppearance.AppCompat.Display1
  • Base.TextAppearance.AppCompat.Headline
  • Base.TextAppearance.AppCompat.Title
  • Base.TextAppearance.AppCompat.Title.Inverse
  • Base.TextAppearance.AppCompat.Subhead
  • Base.TextAppearance.AppCompat.Subhead.Inverse
  • Base.TextAppearance.AppCompat.Body2
  • Base.TextAppearance.AppCompat.Body1
  • Base.TextAppearance.AppCompat.Caption
  • Base.TextAppearance.AppCompat.Menu
  • Base.TextAppearance.AppCompat.Button

From android 4.1 / 4.2 / 5.0, the following Roboto font families are available:

android:fontFamily="sans-serif"           // roboto regular
android:fontFamily="sans-serif-light"     // roboto light
android:fontFamily="sans-serif-condensed" // roboto condensed
android:fontFamily="sans-serif-black"     // roboto black
android:fontFamily="sans-serif-thin"      // roboto thin (android 4.2)
android:fontFamily="sans-serif-medium"    // roboto medium (android 5.0)

enter image description here

in combination with

android:textStyle="normal|bold|italic"

this 16 variants are possible:

  • Roboto regular
  • Roboto italic
  • Roboto bold
  • Roboto bold italic
  • Roboto-Light
  • Roboto-Light italic
  • Roboto-Thin
  • Roboto-Thin italic
  • Roboto-Condensed
  • Roboto-Condensed italic
  • Roboto-Condensed bold
  • Roboto-Condensed bold italic
  • Roboto-Black
  • Roboto-Black italic
  • Roboto-Medium
  • Roboto-Medium italic

fonts.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="font_family_light">sans-serif-light</string>
    <string name="font_family_medium">sans-serif-medium</string>
    <string name="font_family_regular">sans-serif</string>
    <string name="font_family_condensed">sans-serif-condensed</string>
    <string name="font_family_black">sans-serif-black</string>
    <string name="font_family_thin">sans-serif-thin</string>
</resources>
Copy link

ghost commented Mar 29, 2019

thank you

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