Typography In Mobile Design – Beginner’s Guide
    Typography in mobile design

    As we all know the use of mobile phones are rising every year. Each year new innovations are brought to the market and they are all widely accepted too. This raises the importance of typography in mobile design and mobile friendly websites too. Because mobile phones are the new way of reaching out to people, typography can never be neglected. The challenges faced by mobile typography are the small sizes of mobile screens and the bright light conditions that they are used in. If used wisely, typography can be used to express ideas without being tied to the challenges listed above.

    One of the crucial terms about typography is readability. It is the amount of effort a user spends to read and understand the text. A major part of usability is comprised of readability. A user will be interested in the content only if the content is readable. Otherwise it will be neglected even though how much valuable it is holding. The main components of typography are;

    Font size and spacing:

    The font size for mobile design should not be too small. It’s true that every mobile device is capable of zooming. But that is not something you should make them do. When the users are forced to zoom in order to read, they won’t be feeling so good about it. It will be a wise choice to use text size that is bigger than on a typical website. Other than text size, number of characters used in a line too matters.  If there are too many words in a line it will be hard to follow the lines. This will affect the reader’s rhythm of reading. Even though how big the letters are, it would still be hard to read when letters are kept too close.


    Creating good contrast is very important. One of the main differences between mobile and desktop is the places at which they are used. A desktop screen will be used indoor, where the light is always controlled. But mobile phones are supposed to work in multiple lighting conditions. They will be used in the scorching sun as well as in no light conditions. Because of this reason a good contrast has to be used to increase readability. Font with light colors should not be used over background of light color; a darker color will do fine. The idea is to make the font stand out by using colors.

     Also Read: How To Use White Space Effectively In Design


    Typefaces and text styles:

    A single typeface with few font variants and sizes are the most preferred. While using lot of different typefaces, the app will look fragmented and clumsy. Usually, an app or brand has its own default font. Nokia Pure is the name of the font used by Nokia, Apple uses San Francisco and Google uses Roboto. Using the built-in text styles is more preferred. They will help in displaying content with maximum legibility even when expressed in ways which are visually distinct. Extra care has to be taken to keep the UI as simple as possible. The design should be clear and the navigation should be easy.


    Visual hierarchy is a technique used to organize content in interfaces. This helps users to distinguish layout objects based on their physical differences. Some of those physical differences are size, color, contrast, alignment, etc. Hierarchy in mobile typography is smaller than web interfaces. Normally web interfaces are of three layers, but in mobiles it is limited to two layers. This is because of the limited screen space of mobile phones. By using just a heading and a body, a clean mobile UI design can be made which can maintain contrast and hierarchy.



    The common view in print typography is than serif fonts provide better readability by helping the eyes to slide over them in horizontal direction. In fonts, as we all know the main classification is serif fonts and sans serif fonts. Serif fonts will be having small lines at the end of each stroke and sans serif fonts don’t. Lot of studies examining the practical differences between these two fonts have taken place, but the results are mostly inconclusive. No font can be called as the best font for mobile devices because the selection of font is completely based on the feel of the content that you are offering.


    You would have heard this multiple times that “you should be very careful with text while designing user interface”. But the real trick is to treat text itself as UI. They say good designers treat text as content, the great ones treat text as UI. Sometimes the text will be placed over an image and there are multiple ways to do that.

    The most common method is applying the text directly to the image. Before applying this technique, you have to make sure that the image in background is dark. Because the only font color which look clean in this technique is white. This white font will only be legible if the image in background is dark. While using this technique testing them in different screen size for legibility, will be a good idea. If used carefully, we can create beautiful effects with it.

    Another method is to overlay the whole image. This is one of the easiest methods to place text over image. Overlay is used over images which are not dark enough; overlaying these kinds of images with translucent black makes them more acceptable and readable. This method can also be used on thumbnails and small images. The same logic is used in text-in-box method. In this method the overlay is not applied to the whole image, it’s only used around the text. So the overlay will feel like a box kept behind the text.

    Blurring the background image is an alternative method used to accomplish good UI typography. By blurring the portion of the image where the text has to be placed, legibility can be achieved. The text can be placed on the blurred side of the picture to achieve this but the chances for it to move off the blurred space is high when user view through devices of different screen sizes. The method that you would have seen many times will be floor fade. A subtle fade towards black is used at the bottom of the picture. The text is written in this black space.

    Generally it can be said that typography is one of the main ingredients of web designing.  Typography cannot be learned quickly, but it is a fun journey to experiment with new and strange ideas. Like the old saying ‘practise makes perfect’. This is how the best practices of mobile typography took shape through mobile apps. Keep on doing, and you will master it.

    ColorMean is one of the top digital marketing and web design agency in Dubai. Our services include designing websites and mobile applications. We can help u create the best website for your needs. Contact us now to know more about our services.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

    three × two =