Right Typography for Smart Phones

August 1, 2011 · 1 comment

by Jason Angus

Right Typography for Smart Phones

From user interfaces to advertisements – type is all about communication. Typefaces evoke emotions and establish hierarchy. Typefaces entice audiences, make products more impressive, and engage readers.

They are not just important in hard copy or web, but on mobile devices as well. They can bring emotion and drama to theme-based applications and games. Type can harmonize multimedia effects as it takes the smart phone experience to the next level.


ElegantThemes
ThemeForest

Advertisement

Getting the right typography

clip_image002

The best font for any mobile device, for any application, should have these attributes:

Open counters

  • Adequate lowercase x height
  • Reasonable contrast in stroke thickness
  • Distinguishing character shapes
  • Marked difference between bold and medium weights of the same type family
  • Recognizable design qualities

Open counters

White space between letters like ‘e’, ’c’, ’o’, etc. helps in defining a character. It has a powerful sway on the ease of identification. Typefaces that have open large counters are easier to read- especially in hard copy. This is true for small digital screens of smart phones as well.

clip_image004

Adequate lowercase x height

In typography, the x height means the distance between top of the main body of the lower case letters and the baseline of the type (not counting the ascenders and descenders). X height is an important factor in readability and identification of typeface. It is important for legibility- especially when the pixels and screen size are limited. It’s recommended for lowercase x height to be between 60% and 80% of the cap height.

clip_image006

Reasonable contrast in stroke thickness

Typefaces that have strong contrast in stroke thickness do not work best on smart phones. There are fewer pixels on mobile screens than on computer screens and thus the contrast is not reproduced effectively.

clip_image008

Distinguishing character shapes

The shapes of individual letters also influence the legibility of the typeface. For instance, double storied ‘a’ is more legible than a single-storied design. The lowercase ‘g’ that is based on roman letters is more understandable than simple, gothic ‘g’.

clip_image010

clip_image012

Marked difference between bold and medium weights of the same type family

Typefaces that can be easily distinguished from others are good to use on smart phones. They help in making a hierarchy. They also establish a brand image and enhance themes, games and other multimedia applications. Typeface families that have marked differences between proportions and weights help with communication.

clip_image014

Recognizable design qualities

Fonts that are used exclusively for certain user interfaces or operating systems should have remarkably legible numbers, and they must be present in many proportions and weights. They are supposed to be distinctive, and they must be capable of creating a brand identity, but they shouldn’t be too idiosyncratic, else their use would be limited.

clip_image016

Not all theme-based or decorative typeface designs would be effective on smart phones. While there are many trade-offs when talking about small-sized communication, establishing a different look and feel is important, but basic needs of smart phone functionality are still relevant.

 

Author : Jason Angus

Like most writers Jason Angus leads a double life.  During the day he is an IT Manager for a college.  In the evenings, he writes technology articles and runs a consulting business.  He often writes for Wix.com, the free website builder that lets you create customized websites with ease.

 

 

{ 1 comment… read it below or add one }

Web Designer Chris August 3, 2011 at 1:03 pm

With so much variation in screen size / resolution on mobile devices, choosing a readable font (especially when scaled down) is definitely an important choice.

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post:

Next post:


Web Analytics