25. 04. 2018
In following text we describe basic principles every graphic designer should respect when designing mobile app.
Default fonts
You should consider using one of the default fonts available in operating system. Here are some good reasons for it:
- Reducing app size – custom fonts have to be baked directly in app and therefore increase app size.
- Less work for developers.
- Users are used to see default fonts.
- Avoiding licensing problems (more details follows).
Default fonts for Android and iOS are briefly mentioned here.
Android
| Available since | Font name |
|---|---|
| 1.5 | Droid Sans |
| 1.5 | Droid Serif |
| 1.5 | Droid Sans Mono |
| 4.0 | Roboto Regular |
| 4.0 | Roboto Light |
| 4.0 | Roboto Condensed |
| 4.2 | Roboto Thin |
| 5.0 | Roboto Medium |
All above listed fonts could be used as normal, bold, or italic.
iOS
iOS has much wider palette of default fonts and the table would be longer than the whole article. Luckily there is a website iosfonts.com where iOS fonts are listed.
Font licensing
Mobile app font licensing is definitely something that deserves your attention. You cannot use fonts bought for websites or prints. Almost all fonts have different licensing for mobile apps, which is usually similar to that for embedded usage, because custom fonts have to be distributed inside of the app as part of its binary. The price per platform is usually in hundreds of dollars.
You should always carefully go through licence agreement prior to using some font in your design and eventually discuss the cost with a customer.
Examples of licensing fees:
| Font name | Websites | Mobile apps |
|---|---|---|
| VAG Rounded | $49 | $490 per 50 000 instalations |
| ProximaNova | $29 | $290 per app |
Respect minimal font size
Before stating the minimal font size for mobile platforms you have to realize how font sizes work in this world where users have lots of display types with different densities and resolutions. What we expect is to have stable physical font size across all available devices.
The solution is really simple. Font sizes are defined in pixels for 160 DPI display. When font is drawn on for example retina display (320), its size will be multiplied by two, for 240 DPI it is multiplied by 1,5 and so on.
Recommended minimal font size for 160 DPI displays is 14 px. Smaller font will be difficult to read on low-density displays as well as for users with poor eyesight. So it is enough for your design to use minimal size according to its density. When you follow recommendation from our article about design for mobile apps where 480 DPI canvas is recommended, your minimal size will be 42 px.
In Photoshop you could define your font sizes in pt with the same values as for px. You only need to keep your Photoshop canvas with default density 72 DPI. This topic is described in more detail in article about font sizes on Android.