19 Typography Tips That Will Change the Way You Design for the Mobile Web
The typography of the mobile web requires special attention. This article shares 19 tips that will help improve the UX of your mobile web design.
Join the DZone community and get the full member experience.Join For Free
More than 90% of all information on the web consists of text. Although designers spend a lot of time deciding the graphics, interface, and style of the page, an equal amount of time is required for choosing the perfect typography. Especially when it comes to mobile devices, the typography of the mobile web requires special attention since it comes with two major challenges – available space and typographic size. This article will relay 19 typography tips that will help you unlock an impressive UI for your mobile web design.
Give Some Space
Mobile typography is not about arranging letters on the screen; it is about arranging them in a way that will make them easily readable to users. Utilize white space properly and give adequate room between the letters, lines, and paragraphs so the user can read the content properly without the need to zoom in.
Appropriate Font Size
You can keep your desktop fonts at a size of 14px, but when the same is done in mobile, it may result in smaller or larger content depending on the resolution of the device. Check the font size across all resolution and use media queries so that the resultant typography of mobile web is readable across all handheld devices of different resolutions.
Use Proper Measuring Units
For the font size of the mobile web, typography doesn’t use points (pt). Instead, use ems or rems. This is preferred by most designers since these units make the content scalable since they are based on percentage and not any static size.
Choose Contrasting Colors
Better contrast ensures better readability. While thinking about the color of mobile web typography, think about the comparison between bright and dark. If the background of the page is dark-colored, use bright-colored fonts. For example, white fonts on a black background and vice versa.
Ensure Better Readability
There are many free and exciting fonts available today, but if you are planning to use them in your content, you should check each and every alphabet to ensure that the font family and size you are using makes that content readable. There is no point in using cool fonts if the reader cannot understand your content.
Align Texts Properly
Alignment is an important factor when it comes to mobile web typography. The human brain likes to read the text in blocks on a small screen. Usually, texts are left aligned, which means there is a ragged edge on the right side of the block. Adjust it properly and make sure if you are using ‘justified’ alignment, it does not result in inconsistent white space.
Set the Leading
Typography in mobile web demands consistent leading (the space between the lines). When it is too small, in a large content, the end of one line and beginning of next one is difficult to follow. If too large, it results in unnecessary white space. Make sure not to interrupt the smooth flow of a line.
Finding Your Sweet Spot
All fonts have a "sweet spot:" the combination of font size and leading where they ensure the best readability and least distortion caused by the default anti-aliasing of the browser. Experiment with the typeface you are using and find that sweet spot.
White Space Utilization
White space is often usable. In the case of CTAs or clickable links, use white space so they can be distinguished and clicked using the index finger or thumb. Since the user does not have a mouse like on a desktop, the thumb or index finger is considered to be the cursor, which is about a millimeter in thickness. Think about that and use white space effectively.
Take the Screen Width Into Account
While designing the typography on the mobile web, you have to think about how people read text. Usually, there are two kinds of width in a mobile device, vertical and horizontal. Hence, while designing the typography, take both the widths into consideration and set the alignment and spacing accordingly.
Make Your Typography Distinguishable
Typography of your mobile web page should have a distinct feature, either in appearance or in color or additional effects. Especially, in blocks of content that you want the users to read, carefully choose typefaces for the headings that make them stand out from the rest.
Check Scaling and Proportions
Check the content on different mobile devices of different resolutions. Also, zoom in and zoom out to ensure that your mobile web typography scales and fits the entire screen width. Responsiveness of your content is a must, and you must test it and write media queries in case there is any disruption for any certain resolution.
Take Functionality Into Account
There are many text elements in a mobile website that allow the user to perform certain actions, like sending a message or making a call. Typography of the mobile web should be designed carefully to ensure that users understand that a specific text is actually a CTA or executes a certain functionality.
Is the Page Text-Heavy?
If your page is heavy in terms of text, like a blog or a news article, very little interaction is needed. The primary purpose of the user is to read. Ensure that the typography of this page is designed accordingly.
Is The Page Interaction-Heavy?
If your page involves more hover and clicks actions along with typing, editing, and so on, adjust your text accordingly. Make sure the font size is no less than 18px so that users can understand that some action is supposed to happen once they click or hover on the text.
Responsive Web Design
As mentioned earlier, pixels should be avoided in designing the typography of the mobile web. The mobile web has a fixed dimension standard. Use em or rem instead. These designations are based on percentages, and are scalable. When the content is viewed on a mobile device with a different resolution, they adjust their size accordingly. Remember, text content of your responsive web page should be scalable and adjust its size automatically according to screen width. You can use LambdaTest to perform your responsive testing. With a single click, you can check the responsiveness of your site across more than 44 types of mobile devices with different resolutions.
Pairing Multiple Fonts
While designing the typography of mobile web, you may combine different fonts for heading and paragraph, labels, and so on. But make sure that they match each other. Mixing Algerian for heading and Comic Sans MS in a single paragraph, for example, is a bad idea.
Font Weight: Heavy Or Light?
Mobile fonts are relatively smaller when compared to desktops. Care must be taken to make them readable — and clickable when necessary. The key to deciding the font weight is experimenting. Although currently, bold and big typography for the mobile web is a trend, you should use multiple font weights and test them across different resolutions to ensure there is no disruption anywhere.
Keep the Background in Mind
If the background is static and monochromatic, as mentioned earlier, you can use contrasting font colors. But when a background is an image or a video, the ideal choice would be to experiment with different colors and check which one fits properly and makes the content the most readable.
Typography is a delicate craft. Designers often spend a lifetime sharpening their typographic skills. With every new typeface bringing in a new challenge, we are sure the above-mentioned mobile typography tips will be handy the next time you design a new mobile web age. Also, remember to perform cross-browser compatibility tests to ensure that the typefaces or styles you are using work properly in all browsers. LambdaTest can be used to perform cross-browser compatibility tests on more than 2000 different browsers and their versions. Ensure that the typeface is supported on all the required browsers and present your users the rich UX they deserve.
Published at DZone with permission of Arnab Roy. See the original article here.
Opinions expressed by DZone contributors are their own.