Typography classification and user interface design


In this Qikkwit we will look how typography classification is important in rich user interface design. Any application with rich content should be designed properly to use correct typefaces. Design should highlight the content as content is king.

Following are three parameters that affect design:

1. Audience : Age,Gender, Race, Culture

2. Tone: Casual, Formal, Friendly, Sarcastic

3. Purpose: Informative, Conversasional

While fixing typography for we need to fix the style for following attributes of the page or window

Headline, Sub head, Navigation ,Body and Bi line : We have to create fonts, weights and styles for all of these before head, so that user interface should look smooth and aligned all over the application or website.

User interface is generally of verbal and visual type. Reader first sees the patterns on your page and then reads pages. Hence its equally important to have nice structures as well as nice typography on the website or application.

Classification of typography is mainly divided in 3 types:

1. Serif: Small line tailing from edges of letters. This is further divided in four parts.

  1. Humanist: Classic and traditional, Some contrast in the strokes, good for journalism or historical apps
  2. Transitional: Strong, Stylish and dynamic, more contrast than humanist, good for legal, academia apps
  3. Modern: Structured, Clear, Elegant, more contrast and thin horizontal serif, good for arts and cultures
  4. Egyptian or Slab: Authoritative yet firendly, less contrast,heavy boxy serif, marketing and promotional apps

2. San serif: Font without serif. This is further divided in three parts.

  1. Humanist: Tension between perfect and not perfect, less contrast, good for goverment or educational
  2. Transitional: unassuming and modern, upright and uniform chars, strong strokes, good for technology and transportation apps
  3. Geometric : Strict,Objective and universal, geometric shapes form backbone, good for architecture apps

3. Script: Mimic handwriting

  1. Comic sans is script font, not to be used for body

How to use typography so that it enhances user experience:

1. Use serif for header and sans serif body or vice-a-versa.

2. Do not use same style e.g two humanist serifs

3. Do not choose same fonts from same class e.g. two serifs or two sans

4. Find similar trait but different class. E.g. Humanist sans and humanist sans serif

Single type face is enough for start of your website or application journey. As it is fine to have just single font face.

Leave a Reply

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