There are a lot of factors that can influence how users experience your app. Typography can play a role in making a good first impression and can set the tone for the overall user experience. So what exactly is typography anyway? It involves arranging and displaying type in a way that is legible and appealing. This includes elements like point sizes, line spacing and font types. The different kinds of fonts and sizes can, therefore, play a large role in the level of readability of the content which then leads to a pleasing user interface. It is important that the user’s interactions with the app are productive.
Text can convey information to users. If the content is cluttered with different point sizes and illegible font types, the users can’t absorb the information in your app. Elements such as improper sizing, spacing and colours can also be a bad reflection of the brand image. And with that, users could give up on using the app if the content is not pleasing to the eye or the message trying to be conveyed is unreadable, which inevitably leads to the app losing value.
Typography has a way of visually communicating and conveying the purpose and message of a mobile app. Having a typographic and visual hierarchy means that the type is presented so that the most important and significant words and content are shown in a way that guides users toward the most relevant information. Without this visual hierarchy and contrast between different content, the information could fall flat to users. When typography is used correctly, it can complement the app design and enhance engagement, retention and responsiveness levels as well as convey tone, mood and voice to add overall texture to the mobile app.
Here are different factors to pay attention to for creating a great user experience with a variety of typographic elements:
Font: Fonts that are over-decorative, like cursive, can be illegible on the small screen of a smartphone. The goal is to find a simple and clean style while also making sure it brings some personality to the app and matches the content. There needs to be a good balance between style and legibility. Some of the safest, readable and most compatible web and mobile fonts include: Arial, Verdana, Helvetica, Times New Roman and Courier. Minimalism is key when working with small mobile screens.
It is also important to avoid using too many typefaces which can make the app busy and unstructured. By having too many on the screen at once, they will all be fighting for the user’s attention, making it difficult to focus on the more important content. Using fonts with distinguishable letters can also help with legibility, for instance, in some cases, fonts will have similar styles for letters like an uppercase “I” can sometimes look the same as a lowercase “L”. It is good to avoid issues like these so people can easily read information on smaller display screens.
Font size: Text that is too small makes the content illegible and can put a strain on the users’ eyes, or having to pinch and zoom in on the text can be quite inconvenient. It is important to take into account the size of the screen and the layout of the interface because mobile screens are limited with what they can do. On the other hand, text that is too big will take up the entire screen and it can be quite distracting. It is important to have a pleasant balance for users, otherwise, they will end up skipping or skimming over important content.
Leading: This is the spacing between lines which allows for the overall visual unity of the text. The spacing is typically tighter on mobile screens compared to desktops.
Line Length: This involves the number of characters per line. The best guideline to follow is 30-40 characters for mobile devices. Font size and line length work together in unison, the more characters per line, the smaller the font size will shrink to fit the screen. For instance, if you have 60 characters per line, the words will be squished together too tightly and it can become difficult for users to read the information. In this case, users would end up having to pinch the screen to zoom in to read the content.
Space: This includes the space between lines, margins and paragraphs. Proper spacing allows for better user interaction with the text. Without the proper amount of space, the content and text will look messy and cluttered. Since mobile screens are small and don’t allow for too much spacing, it is important to find a good balance.
Alignment: This involves choosing left, centered, justified or right alignment for the text. Using justified is not recommended as it leaves inconsistent white spacing between text. Left alignment is typically the most popular choice as it allows users to read the text effortlessly. This type of alignment follows the natural line of sight when reading and people can easily follow the lines of text one after the next.
Colour contrast. Using different contrasting colours can help users with reading and interpreting the information in the app. For instance, if you end up choosing font colours that blend into the background, users will have a hard time reading the content. Or, if you decide to use light coloured text contrasted against a dark background, like white and black, this can cause some strain on the eyes. The following colour contrasting tool can help figure out the best colour combination for the background and foreground so you can find an optimal balance that is pleasing for users.
Organizing content: It is important to prioritize the content in terms of placing what is most important first. Users want to quickly find what they are looking for with minimal effort. On mobile devices there is little room for unnecessary text, therefore it is important to only include the essential content. Prioritizing content is often done through size and font changes.
As you can see, simple typography considerations like the spacing, alignment and font size can have a drastic effect on the user experience of a mobile app and how the interface appears to consumers. When creating your own mobile app, be sure to consult this post to ensure the best possible outcome for success and to guarantee the happiness and engagement from customers!
