More than 90% of all the web information 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 mobile web requires special attention since it comes with 2 major challenges – available space and typographic size. This article will relay 19 typography tips required for unlocking an impressive UI to your mobile web design with a rich user experience.
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 readable to the users. Utilize white space properly and give adequate space between the letters, lines, and paragraphs so that 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 the 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 those contents readable. There is no point in using those cool fonts if the reader cannot understand your content.
Align The Texts Properly
Alignment is an important factor when it comes to mobile web typography. The human brain likes to read the text in blocks in 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 a white space that is not consistent.
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 whitespaces. 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 less distortion caused by the default anti-aliasing of the browser. Experiment with the typeface you are using and find that sweet spot.