Credit

Building Android Text Layouts with the Right Font

Fırat Karababa
Material Design in Action

--

Fonts along with the visual design of an application form a character for it and each text layout within an application has certain typographic needs of its own. Font is the main agent to give an intended feel from text layout to user. Font selection for any text layout within applications is therefore very important and must be handled carefully.

All Android applications include text layouts as any other mobile/web applications and choosing right fonts for these contents is an important part of the Android development process. It can be sometimes very hard to choose the right font for any Android developer or designer.

In a nice article that I have come across recently, Google Fonts discusses the issue of choosing web fonts in detail. The article presents some guidelines and principles to choose right fonts for web.

Although mobile and web are different disciplines, the basic font selection principles for web are applicable to mobile. Following section of this post tries to make a projection of web font selection process to mobile font selection process by creating an analogy between them. Nevertheless, the developer or designer should decide on which fonts to use by experimenting a set of fonts for the content even if the guidelines in this post helps to narrow the possible font sets.

Technical Overview

Below are two good illustrations which explains some technical details regarding fonts. The first illustration shows what a Serif is and what x-height of a font stands for. Second illustration makes the difference between typeface (font family) and font clear. These technical details are highly correlated with font selection decisions. In the rest of this article font and typeface terms may be used interchangeably for the sake of clarity although two terms do not refer to same thing.

Credit

Think of the Scope

Since mobile apps are made for long term, there will always be some new content or design block to be added to app later on and these contents may have different typographical needs. Best way to meet these needs is to use a large font set with a variety of weights, styles and variants. In that way there will be no need to introduce new fonts to app in future and it will be easier to preserve the brand of the app.

Classify Your Content

Different font selections for text layouts with different text lengths

Titles, Subtitles and Short Text Layouts

For titles, subtitles or short text layouts which have greater font sizes than 24sp, grabbing user attention is important. Therefore use an expressive, unique, even idiosyncratic font. Unconventional, high contrast fonts catch the eye with their details and visual complexity (Display, Decorative, Handwritten, and Script styles). Sans serif fonts with large sizes can be used with bold and compressed styles instead of regular weights. If you want to use serif fonts try Playfair Display or Rufina. Avoiding fonts with large counters and tall x-heights in title and subtitle is important since these features tend to show the text smaller.

Medium-Size Text Layouts

For medium-length texts (16sp to 24sp) being up to a few sentences-long, there are many fonts to be used from Serif and Sans Serif fonts. For such layouts avoiding extreme weights is crucial. For serif fonts you can try Quattrocento, Libre Baskerville, Arvo. For sans serif take a look at Cabin, Raleway, Montserrat.

Long Text Layouts

For long text layouts, especially if the text is longer than 2 paragraphs (or enough text to cover whole display for mobile), serif font families are recommended which are often preferred for books too. It is important for readers' eyes to be able to process the typeface quickly while reading and serif typefaces are easy on the eye. Therefore using familiar serif fonts for long text layouts is safer. Serif fonts like EB Garamond or Libre Baskerville are good options for long text layouts.

Know Your Audience

Android apps do support multi-languages. Since, the content may change depending on the language settings of the device, the fonts of an app must support all of the languages that the app intends to support. Being Latin character based or not, fonts may not support the language at all or at some special characters. In this case, when the content is translated into another language, if there are unsupported characters by this font for the translated language then these characters are displayed with some other font. Choosing a font supporting multiscript is important for consistency since we do not want such ransom note effects in our text layouts.

Some fonts support a large set of characters, weights and styles which means they are ideal for translatable contents. These are called Super Families. Depending on the app needs you may prefer fonts supporting Arabic, Greek, Hebrew, Cyrillic, Hindic scripts as well as English. Even within the language you may consider supporting different scripts such as Bengali, Devanagari, Tamil (Hindic); Serbian, Bulgarian (Cyrillic). To meet these requirements look for Extended - X (e.g Extended Cyrillic) support in the font family.

Using More Than One Font — Font Pairing

Font pairing can be difficult but should not be avoided. Some pairings are good for their contrast while some other looks good for their similarity. Harsh differences make layout looking more dynamic while using styles from a Super Family gives visual cohesion. Classic choice is sans serif for title, serif for body text e.g Alegreya and Alegreya Sans (similar), Libre Franklin and Libre Baskerville (contrast). In Google Fonts page you can find more popular pairings. Also you can examine how some pairings may look in your app from this page.

Two popular font pairings

Last Words

Choosing right fonts for Android text layouts is a serious issue but it makes the app shine if handled carefully. By following the tips presented in this post, font selection process will be more easy and more fun. If you want to read further on this topic here is a good article by Rod Sheeter.

--

--