DEV Community

Cover image for Theming In Android Revisited: Part 2 - Typography
Pabi Moloi, but Forbes
Pabi Moloi, but Forbes

Posted on

Theming In Android Revisited: Part 2 - Typography

Theming your Android app is not just about choosing a color scheme and that was one of the mistakes that I made. Theming is composed of other factors such as Typography.

You would think typography is just about choosing a font and slapping it not the the app right? Well, that's the second mistake that I made 😊.

What is Typography?

Typography can be defined as the art and technique of arranging type. Although it is an area we usually depend on designers to attend to, I believe as developers, we should have a clue to how it works under the hood.

Material Design has a really cool guide to typography which can be found here.

Styling Text

Using the Material Design Type Scale to style text in the app aids in creating a uniform look and feel across your app. It provides the following styles to apply to your texts:

Headline

Headline styled text appear the largest on the screen.

Attributes:

  • textAppearanceHeadline1
  • textAppearanceHeadline2
  • textAppearanceHeadline3
  • textAppearanceHeadline4
  • textAppearanceHeadline5
  • textAppearanceHeadline6

Subtitle

Subtitle styled text appears smaller than Headline texts.

Attributes:

  • textAppearanceSubtitle1
  • textAppearanceSubtitle2

Body

Body styled text is commonly used for long-from writing such as articles.

Attributes:

  • textAppearanceBody1
  • textAppearanceBody2

Caption and Overline

These have the smallest font sizes.

Attributes:

  • textAppearanceCaption and textAppearanceOverline respectively.

Button

Used to style text that appears on buttons.

Attributes:

  • textAppearanceButton

Material Design Type Scale In Action

You can use type scale, Headline for example, in your app as follows:

And for text on buttons, you can style it as follows:

This allows you to edit the attributes to better suit your app's look and feel.

A full list of Material Design Type Scale can be found here.

Comment with a pic of how you styled text for your app.

References and Resources

Cover Image: Florian Klauer on Unsplash

Top comments (0)