Why Should We Optimize Mobile Website Typography

A lot has already been said about mobile web design; numerous battles took place considering the necessity of this type of websites. Still there is no clear answer if we need them or not. Those who got used to them still provide constant updates of their mobile web resources. Others consider them simply time killers, because we can all benefit from an amazing responsive website designs that nipped in the bud the necessity to build mobile websites.

We can say that mobile websites simply evolved into apps. Nowadays all large websites have their own apps developed for specific mobile platforms. Simply downloading this app and logging in you get “almost full” access to your content preserving original fonts and their readability. Top 5 downloaded apps are the following:

  1. Facebook
  2. Google Earth
  3. Shazam
  4. Nettflix
  5. Twitter

Still, when designing a responsive website you need to be sure that your typography is responsive and will perfectly fit in smartphone layout remaining fully legible. Here web designers can benefit from some plugins and tools that will make texts fully responsive:

Slabtext

Simply adding this plugin into your website your headlines will become responsive.

***

FitText

Fittext is a lightweight jQuery plugin that allows to turn website typography from static to responsive.

***

Mobile Fonts

MobileFonts protect your brand and help set your app apart from the crowd.Optimized for the device screen, Mobile FontFonts enhance the user experience.

***

Mobile fonts optimization is not that hard as it is thought to be. There are few basic rules for mobile optimization that will help you make all fonts readable on any portable device with any screen resolution.

Basic rules for mobile fonts optimization

  1. Make sure that your website is readable on a small screen, pay attention to the font face and it’s size
  2. Reduce load times to make sure that your website loads seamlessly even on slower mobile connections, get rid of hi-resolution images
  3. Apply automatic redirection to the mobile version of your website when a mobile user visits your web resource

With that amount of screen options, and pixel densities some fonts can become scrambled when the website layout shrinks to the smartphone size. When making fonts responsive keep in mind following tips:

  1. PC: System fonts look fine in most cases. Custom fonts turn into a nightmare if they’re not hinted.
  2. OSX: System fonts look good on low resolution screens (e.g. the old PowerBook G4 12 inch), they look too bold on high resolution screens (MacBook Air) and they look okay on Retina displays (next MacBook Pro). Lighter fonts look excellent on high resolution screens, but they are too light for Retina displays.
  3. iOS: System fonts look too bold on high resolution screens (iPhone 1-3, iPad 1-2) and they look perfectly fine on Retina Displays (iPad 3). For perfect HTML performance on Retina displays, you need a bolder font on portrait mode and a regular weight in landscape mode. For perfect performance on high resolution screens, you need a lighter typeface.

I bet this list have confused you, but let’s put it in simpler words. For optimal performance beyond low resolution, and outside of the PC world (where system fonts still perform adequately), you need three font grades:

  • Lighter (for high resolution screens)
  • Regular (for Retina landscape HTML mode)
  • Bolder (for Retina portrait HTML mode)

You might ask “Why not just allow the user to choose the type size?” Well, adjusting type size is not a matter of taste, but a matter of reading distance. For example the same font that is read on the screen of an iPhone and iPad should vary in size. Font for iPad should be bigger than the one for iPhone it all depends from the distance you read the text on the screen. The text on the screen of an iPad should be fully legible because most users read from their knees. The font for an iPhone should be smaller because the distance from eyes to the screen is lesser than with iPad.

***

2012 is the year of raise of tablets. Let’s have a brief statistics: for the last six months the number of activated Android devices increased from 600000 devices to 900000 devices daily! [Source: pcworld.com] Android took a great share of mobile user overestimating the popularity of Apple. Great part of these devices are the tablets with high-res displays offering up to 177ppi and even more. These screens allow to display even the tiniest fonts making them legible only when zooming. The tips mentioned above are also good for tablets, most of them are “finger-controlled” (no stylus or mouse’ precise-clicking) that is why larger fonts will reduce the necessity of constant page zooming.

***

Just for a reference, recently there was provided a survey among web designers considering websites they build most often, and it showed following results:

Separate mobile websites 26.28% (522 votes)
Responsive websites 67.32% (1,337 votes)
Separate mobile apps 5.14% (102 votes)
Other: 1.26% (25 votes)
Total Votes: 1,986

According to these results it feels like mobile websites soon will turn into an extinct species.

***

To find out more about the responsive web design feel free to browse through the responsive wed design interactive guide.

***

Users don’t want to limit their access to just desktops and/or laptops. In today’s world people are on the go more and more and they want to have the web at their finger tips. A huge number of portable devices gives this possibility to their owners. Still not always it is possible to surf freely using a smartphone due to low connection speed or the functional capabilities of the device itself. That is why it is still essential to build mobile optimized websites. Couple years will pass and we will forget about mobile websites as they will become obsolete as it happened to IE6.

Comments are closed.