5 Basic Guidelines for Improving Typography in Mobile App Design
Typography is an integral part of the mobile application designing process. Typography in interfaces has undergone massive transformation, in terms of both Material Design for Android as well as Human Interface Guidelines for iOS. If you aspire to nail the ideal mobile app design and get the typography in it right, then below are 5 basic guidelines that you must blindly follow. This guide on typography in app UI design will help get things right.
1. Keep the font size minimum:
Mobile apps are opened and used on mobile devices by people who are always on the move. Certain things that developers and designers of mobile apps consider include screen size of the device, glare from the sun, possible visual impairments that certain users might have and the deteriorating quality of the devices used by people, if the device is in use for some time. Hence, experts behind mobile apps keep in mind the minimum font size for body text. Apple, for that matter, has even defined 17pt as the minimum size for body text in its Human Interface Guidelines. Google has kept it to 16pt for iOS. WCAG 2.0 standards recommend 18pt for Bold Text.
2. Large Headlines and Text Contrast Ratio:
This is common practice in digital typography. Large headlines dominate mobile text. This is done so to show them in stark contrast to the main text and making them the page’s anchor elements. It is completely normal to do this sort of stuff. Its flip side is, that the headline becomes too long and stretches up to 3-4 lines even though each line might hardly contain 2 words. Such headers generally look very messy and are found very hard to read. One must choose a headline which contrasts both with the body text and fits in easily within 2 to 3 lines. As far as the text contrast ratio is concerned, it is suggested that WCAG 2.0 contrast standards be followed and text placed over images for adequate contrast. This is another effective method to improve typography in mobile app design.
3. System, Commercial and Free Fonts:
There are currently two system fonts for iOS, San Francisco and New York. For Android, it is the Roboto font these days. System fonts make the app design more consistent with the operating system. Free fonts also help in saving a project from irrelevant expenses without compromising on the quality of the design. The thing with both system fonts and free fonts is that at some stage, designers find out that the system cannot satisfy their needs for a particular project. In such a case, commercial fonts help. Commercial or customized fonts though, can be very expensive. Prices for a license for an FF DIN font style for desktop or web can cost up to $95 and for an app, up to $950. While buying a customized or commercial font, you must consider all the nuances of the license, learn all the technical nuances of the font, think about how the product will scale in the future and have knowledge of all the weights and styles of a typeface.
4. Baseline:
Text rendering inside design tools is very different to text rendering in mobile operating systems. Because of this, the margin between text blocks and other interface elements also differs visually. To avert this from happening and improve mobile apps typography, all margins relative to baseline must be considered. This approach maximizes the fit between the layouts and implementation. The bad news here for Android users is that it does not support methods for baseline spacings. Hence, this approach is generally recommended for elements that demand utmost accuracy as using the baseline for all text elements of the interface can be very costly to develop.
5. Whitespace and Margins:
Since mobile devices have a limited screen size, the general practice is to try and fit in as much as possible. The worst practice is to cut down on whitespace by cutting down on margins between text blocks. This breaks the hierarchy between different text styles and blocks and makes the text even harder to read. Hence, the layout must be composed such that the part of the content is above the fold and the user gets to see more content and feels good scrolling further. If it is possible for you to do the above, good. If not, it makes sense to outsource mobile app development to India where experts are good at doing these.
Comments
Post a Comment