Subscribe to our monthly dose of design. No spamming, we promise.

Back to agilo.co

White space is to be regarded as an active element, not a passive background.—Jan Tschichold

Schiele in Vienna—The Form of a Signature

Array of: Dublin

Type+Vienna, Serving #2

Type+Vienna, Serving #1

Array of: Amsterdam

Web typography: legibility and readability in a nutshell

Posted by | on

Everyday we share information through various types of matter and a large part of it is a reading matter- whether it’s books, newspapers, magazines, signage or writing on a computer screen. When talking about a computer screen, that issue becomes especially important- the most of information we encounter is being communicated through type. We read articles, e-mails, e-books, we chat and write documents and so on, you get the point.

Since most of the information we receive online is written, it becomes clear that web design is largely determined by how good the type aspect of the website is handled.

Since there is a lot of information for user to filter in order to find the point of interest, designing type and with type becomes designer’s major concern.

So, what does the web offer us in terms of design and where does it restrict us? How to ensure our audience consumes our website content easily?

When it comes to fundamental guidelines, web is no different than print. Legibility and readability are two closely related terms that are crucial to successful and functional type design, or should we say- macro-typographic and micro-typographic shaping of the text.

Readability

Let’s start from scratch and think about the reading process and how we actually differ looking from reading. We don’t read letter by letter, but rather scan and recognize word shapes based on their silhouette. Our eyes can only record a few letters at a time, and once a certain group has been recognized, they move on to the next one. The eye actually glimpses across the text and fixates on certain points during that process. Reading process should be pleasing and comfortable so that the reader does not notice the font but easily accesses content and focuses on its comprehension. Readability is what makes paragraphs of text easy to read.

There are several factors in macro-typographic sphere that determine the readability of the text:

  • Font design
  • Font size
  • Spacing
  • Intercharacter spacing
  • Leading
  • Contrast
  • Line length
  • Alignment
  • Justification
  • Background

Legibility

On micro-typographic level, we can talk about legibility. It is undoubtedly closely related to readability in creating a usable type design, but it refers to distinguishing letters within a chosen typeface. The simpler font design is, the better is it’s legibility. However, this should not suggest that choosing a font that is simple in its letterforms is the best solution for the task. The chosen typeface should not attract attention to itself, but rather make text easy to read. Also keep in mind that not every font can be made legible even though every text can be made readable. There are factors that determine the legibility of the typeface:

  • x-height
  • Font weight
  • Character width
  • Character shapes
  • Ascender and descender length
  • Size of the counters
  • Stroke contrast

Why is that important?

Taking care of your type design from both micro-typographic and macro-typographic standpoint lets you create an efficient and productive communication with type. A readable type should attract reader’s attention and a legible one should make it easy to read. Communicating well with type makes sure the end user will access information effortlessly and successfully.

About Zrinka Buljubasic

Zrinka Buljubasic

Zrinka is a type designer working as a Lead designer at Agilo. Type@Cooper 2015 graduate. Has BA in Visual Communication Design and MA in Type Design from Art Academy of Split, Croatia.

Read all posts by .