Typography Mobile Apps | ChaiOne | Houston & Austin

Why the font should you care? | Typography Mobile Apps

In Mobile Design by chaione

Does your mobile app use Helvetica, Helvetica Neue, Arial, or some other font? You’re probably wondering why this matters. Even though people often consider typography to be an afterthought in mobile apps, it actually plays a huge role when designing an app. Furthermore, typography is an important part of the user experience. Being able to read the content clearly impacts how people view your app and if they’ll want to use it again. Different typography is chosen for mobile apps based on its form or function. In addition, when designing a mobile app, there are some key things to think about when choosing a font.

Form versus Function

If you are designing a text-heavy app, you should consider keeping the body text simple by using a sans-serif font with good contrast and spacing. When dealing with headlines and titles, you can take a more creative approach. Using a font that is used in a logo can make an app feel more attractive and consistent.

Key Things to Think About for Typography Mobile Apps

In addition to the form and function of typography in mobile apps, you’ll need to consider some key things that will impact the user experience including:

  • Readability – The term Readability is defined by the amount of effort a user has to put into reading and understanding the text. This is a key point that should never be ignored from a usability standpoint because this is the way information is communicated through the app.

  • Contrast – Contrast is very important when using typography. When looking at a mobile app, you want the type to stand out from the rest of the design. Think about the basics first: White text on a black background or black text on a white background. Once you have found the right mix, then you can tweak the colors. It’s important to keep in mind that some users will be out in the sun and not sitting in a dark room.

  • Space – When designing for the mobile environment, you are dealing with a smaller screen. You should always add spacing between the letters vertically and horizontally. Yes, people use their tablets and phones differently than their desktops and laptops. With this in mind, you should use a larger font size than what would be used on a typical website. This will help the user read and understand the message you are trying to get across. Use this same principal for other design elements as well. Let the design breathe and flow naturally.

  • Responsiveness – Since device screens vary in size, it’s important to consider the responsiveness of your typography. Responsive type is designed so that the type is resizeable by the screen size and user control. Planning with a responsive grid in mind will give the users the best experience because it will adapt to their screen regardless of the size.

Good Typography in Mobile Apps

You can find many examples of good and bad typography in mobile apps on the web. Here are some companies that are doing it right:

TeeVee 2

TeeVee 2 utilizes good readability, contrast, and space. Fans of TV shows like The Walking Dead can easily see what an upcoming episode is about, information about the cast, and when to watch. The app also does a good job of using white text on a black background.

 

Mashable

Mashable.com is a prime example of great typography with its focus on responsiveness, space, and readability. You can easily read through tech news and find the navigation links on a small screen.

Airbnb

With Airbnb, the app uses good contrast, space, and readability for people looking for somewhere to stay. You can find out about the cabin in Topanga Canyon, CA easily and book the place with a click of a button. The content displayed on the app has good spacing and isn’t too cluttered.

Conclusion

Even though typography is under-appreciated, it still plays a huge part in design. In some situations, typography can make or break a design. It is always a good idea to spend the time to explore different kinds of typefaces. Always check your designs on multiple devices or browsers as this will help you see exactly what the type will look like to the users. If you can’t find a font that works, you can always
use Helvetica.

ux_design

Share this Article