Using the right font weights in your mobile apps

Font Weight Variations on iOS & Android

Designing mobile interfaces requires a lot of thought and a numerous factors to consider. With the powerful tools to express themselves, designers have the flexibility to play with a lot of UI elements. Font is one important element which adds elegance to the interfaces.

This article talks specifically about font weights and how they help build graceful mobile interfaces. While font weight is something that doesn’t strike us immediately (given the numerous aspects of designs), it could be one of the basic elements that makes up the skeleton of good mobile app design.

Font Weights – why are they important?

Explained in simple words – font weight is defined as the thickness of character outlines relative to their height. Typefaces make a variety (usually about four to six) of font weights available to choose from, most commonly familiar ones may be bold, italics and regular. The above infographic showcases most commonly used font weights in mobile apps – iOS and Android, respectively.

When used effectively, font weights help a designer to indicate hierarchy, intent, highlight important information amongst others, while using the same typeface at different places within the app. If using a custom font typeface, the key is to choose one that works well in various sizes, is consistent across various devices and also seems a good fit for the OS. If however, you’d like to stick to the default system fonts for now – there are still a lot of font weights to choose from. San Francisco on iOS offers Ultralight, Thin, Medium, Regular, Semi bold, Bold, Heavy and Black. Roboto on Android offers Thin, Light, Regular, Medium, Bold and Black.

font-weight-versatility

Font weights used incorrectly can have an adverse impact on the usability of an app and aesthetics can go haywire. While designing for smaller screens, like mobile phones, the importance of font weight increases manifold. Hence, one needs to be mindful about the choice and selection of typefaces.

Using the right mix of font weights

Using the right mix of font weights within the same stretch of text may work out very well to highlight key information. Consider some examples below: Analytics showed in a textual form highlighting the numbers, greeting message in the app highlighting the city name, wallet balance increasing the readability while displaying accurate info.

Using mix font weights

In many such scenarios, using the right mix of font weights may be well worth than introducing additional UI elements.

Effective use over background elements

While there is no thumb rule to this – using a thinner font (light, regular) always looks better on dark backgrounds than using thicker font (medium, semi bold, bold, etc). Background elements could most likely be a solid or gradient fill or an image background. If using image backgrounds with a dark translucent overlay – light and regular fonts may be useful. However for textured backgrounds or using image backgrounds without overlays – semi bold and bold may be the right choices.

Here are some examples where text is mostly overlaid on some elements:

text-on-ui-elements

Communicating Intents

Consider a scenario where you want to put out a message and specifically want the user to follow an intended action (as shown in example) and don’t want him to consider an unintended action that you’ve placed. Or, a scenario where the user is in a hurry and needs to see just the right CTA, this is where font weights can play a critical role.

Communicating Intent through font weights

Establishing hierarchy

All mobile apps require a structured design for a comfortable and enjoyable user experience. Hierarchy can be established using various design elements and font weight could play a crucial role here.

The key is to use a similar font structure across the screens. This consistency establishes a sense of hierarchy which acts as a guide for a user to understand what the app wants to communicate. Instapaper is a good example of how font weights may help establish hierarchies.

instapaper-example

Bold vs Light weights

Light font weight is currently trendy and looks great if used at the right places with Regular font weights. In many cases, Light and Regular may be a better off combination than using Regular and Bold Weights. Light font looks clean, modern and when used with Regular font – the relative difference in the thickness of the characters stands out and looks elegant.

Font weight comparisons

It may also be worth considering the background on which the text is laid out. Regular font may look  thicker on contrasting backgrounds and not so thick on lighter backgrounds.

The points covered in this article are not thumb rules and nor are they meant to be sacrosanct principles. In fact, we’ve seen mobile applications which have defied these points and yet, have managed to achieve desired results. It may be good to experiment to try out various font weights and experiment until you find the right fit. Choose the weights that strike the right balance between aesthetics and legibility for your screens.

Using the right font weights at the right places is an art. Treat them like a spice and use them to enhance your user experience design just as you would use a spice to enhance the flavour of food.