Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

19 Typography Tips That Will Change the Way You Design for the Mobile Web

DZone 's Guide to

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.

· Web Dev Zone ·
Free Resource

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.

space
                                                           Source:  https://bit.ly/2QkVazC

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.

Font Size
                                                    Source:  https://bit.ly/2KA1rlD

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.

Measuring Units

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.

Better Readability
                                                 Source:  https://bit.ly/2P64EKg

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.

alignment
                                                    Souce:  https://bit.ly/2DZWcez

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.

Leading
                                                            Source:  https://bit.ly/2r6oKdV

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.

Sweet Spot
                                                        Source:  https://bit.ly/2DKvgyB

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.

white space
                                                    Sorce:  https://bit.ly/2drOhoF

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.

Screen Width
                                                          Source:  https://bit.ly/1kEb5Uh

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.

Distinguishable Typography

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.

Scaling and Proportions

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.

gif
                                                     Source:  https://bit.ly/2BBM4Gz

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.

Page Text-heavy
                                                        Source:  https://bit.ly/2znh8ID

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.

Page Interaction
                                                         Source:  https://bit.ly/2DZ02oh

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.

Responsive Web Design
                                                         Source:  https://bit.ly/2Bz0Ldh

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.

Multiple Fonts
                                                    Source:  https://bit.ly/2LsrCKy

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.

Font-weight
                                                Source:  https://bit.ly/2FEFyTo

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.

Background

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.

Topics:
typography ,typography design ,typography mistakes ,typography tools ,web design ,web developement ,web testing ,cross browser testing ,ux and ui ,readability

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}