Archive | Content RSS feed for this section

Are you Really Creating your Website Content for Smartphone Users?

18 Jun

“Does your website content look the same in a mobile as it does on a desktop???”

Mobile Typography

Recently one of the major challenges that web designers have been facing is related to the typography used in a website that works pretty well even in the mobile environment. It may seem to be an easy thing to deal with but believe me that’s not the case. Before understanding the importance of typography, first let us know what the typography is all about. ‘Typography’ is the art of arranging space between letters, space between words, space between lines, the length of a line, the size of a point and typefaces, in order to enhance the visibility of the language and make it more readable.

Good typography has the potential to make your website cross compatible, visually engaging and legible to read. But on the other hand bad typography can actually force people to divert their attention from your website for the simple reason that they don’t feel like reading anything because of too many complexities involved in the appearance. In order to avoid the bad and go for a good one, you should consider certain factors before actually deciding on the website typography from a mobile user perspective. These factors are responsiveness, spacing, contrast and readability.


Typography should be responsive enough to different screen sizes so that it gets adjusted as per varied display widths and lengths. Therefore display units such as rems, ems, or pixels should be wisely used to create a responsive grid layout. There are multiple options and templates for a responsive grid available in the market. It is just an individual preference of a designer as to what properties should be kept intact while making a selection, like letting a mobile website have the similar kind of flair and looks as that of a desktop website.


Another important factor is the website space distribution. When you are dealing with a website for smaller screens, it is crucial to keep as much space as possible between letters even if it requires more scrolling horizontally or vertically. Add margins to the same so that the user can know where a particular screen text begins or ends. Also around 20% space should be added between lines. Instead of using 16 as the space size between lines of font size 12, go for 14 as the line space between lines of font size 12.


Users always prefer scrolling over congestion of words. Hence, keep a good amount of space between characters, words and lines, as this will entice users to read interestingly even if it requires a lot of scrolling. The same logic applies to website elements and components as well such as navigational bars, tabs, menus, etc. Mobile browsing always supports the vertical format rather than a horizontal one as in the case of desktops. Therefore text, images, videos, and others should be stacked accordingly.


color contrastContrast is the use of different colors integrated with each other. Adjusting a contrast parameter is really important if you want the users to read content with ease with different color combinations overlapping. For example, a user would not be able to read anything if something is typed with pink on a background which is red. Therefore it is always best to start with black text/white background or white text/black background combination. You can thus experiment with different colors by keeping black and white as the fixed ones throughout.


Words convey in a stronger than actions and it is rightly said, “The pen is mightier than the sword!” As written in 2006 by Oliver Reichenstein, Information Architect, “95% of the information on the web is a written language.” This statement shows the readability importance. It is highly advisable to work with Sans Serif or Helvetica font which is soothing to the eyes. Select a font size matching the maximum characters present in a line.

Readability60-75 characters are the average length of a line which also includes punctuations and blank spaces. For a mobile version it goes down to around 35-50 characters. Lines should not have over-the-top characters as it becomes difficult to read. If too many characters are present then font size should be kept adequately small. Even lines with a few characters can become cumbersome for a user to read everything. Hence, in this case, large fonts should be used accordingly.

Some Useful Tips/Suggestions

After looking at the vital factors, I have got some useful recommendations for you in order to enhance your mobile typography design:

  • Start with small text and make adjustments to accommodate large screen dimensions.
  • Multiple columns of text should be used in order to accommodate content in an organized manner.
  • Fonts with narrow or wide strokes should not be used. Normal appearing fonts should be used rather than condensed or skinny fonts.
  • Do not be creative with your typefaces. Avoid striking through, curves, scripts, or other such novelties in your text.
  • Keep the content as simple as possible due to the smaller screen size and easy readability.
  • Once completed, the typography should be checked on multiple operating systems and browsers.

“Follow these simple rules and design your website text for mobile viewing…”

Are you looking for a professional web design company that will help you build your online presence and help you to target your mobile users with effective mobile website design? Visit us for best service.

If you have got anything more to add, you can send in your comments on the same.