Why Web Typography Matters Pt. 1

January 30th, 2015 - Posted by: in Design/UX

Fundamentals of web typography

As designers, one of our greatest tools is Typography. It is the primary vehicle we use as designers to communicate, inform or educate. Good typography gives character and life to words; narrative and excitement to paragraphs; importance and emphasis to headlines. If the typography is bad, so will be the design. When it is done correctly, it is powerful. Through typography, we are able to communicate our message and create a tone, mood, and tenor to the design. With typography we can grab readers and pique their interest.

We’ve all written something we wanted someone else to read, but have we ever considered what that person’s reading experience would be? One of the main purposes of design is to entice and delight, but in order to effectively grasp the readers’ attention we must first understand how we read, and what affects the reading process. Here are some things to consider.

Readability

Just because something is legible that doesn’t necessarily mean it’s readable. Legibility means text is easy and clear enough to read. Readability combines the emotional impact of a design with the amount of effort it presumably takes to read and understand.

Readbility

“The term readability doesn’t ask simply, “Can you read it?” but “Do you want to read it?” – Stephen Coles


Saccades and Fixations

Reading isn’t a simple linear process. Instead, our eyes perform a series of back and forth movements called saccades, or really really fast hops across lines of text. Sometimes it’s a big hop; sometimes it’s a small hop. Saccades help us understand a lot of information in a short amount of time. The length of saccades depends on the proficiency of our reading ability and the familiarity of the topic.

Saccades

Saccades are series of back and forth eye movements that help in the processing of information.

Between saccades our eyes stop for a fraction of a second, this action is called a fixation. When our eyes stop in these fixations, a couple characters become clear and focused while the rest of the text becomes blurred out. Similar to how the aperture or focus works on a camera.

fixations

Between saccades, letters become clear and focused during fixations.


Letter Contrast & Texture

If you take an average line of text and cover the top halves of the letters, it becomes very difficult to read. But if you do the opposite and cover the bottom halves, you can decipher the text and read without much effort. This happens because letters carry their identifying characteristics on the top halves. These unique characteristics applied together create contrast and the whitespace between each letter and characteristic is considered texture.

Texture

Letters hold their characteristics on their top halves. Making them easier to identify.

If you look at a line of All Caps letters you can somewhat decipher the line, but try reading a paragraph in all caps. It is very difficult. This happens because there isn’t much contrast or unique characteristics between them and the texture and whitespace around them is minimal. The word shape unfortunately becomes a plain rectangle.

All caps are not wrong but situational. Typographic texture will always aid readability, so keeping this in mind is a good practice when designing.

All caps are not wrong but situational. Typographic texture will always aid readability, so keeping this in mind is a good practice when designing.


Conclusion

As designers, the choices we make with typography can have a great impact on the reader. Understanding how we read and what affects our reading process is an important skillset. These fundamental skills can aid in pairing the proper typefaces for any design. The smallest details of a typeface such as size and spacing, weight and styles, contrast and x-height, special characters and ligatures only to name a few, can have great advantages for readers. When the reader doesn’t notice these typographic choices, we’ve done our job.

Stay on the look out for Why Typography Matters Pt. 2, where we look into typographic choices, pairing typefaces, and messaging with typefaces. Make sure to subscribe to be notified.

Subscribe to our Blog
Related Posts

Copyright ® 2018. SmartAcre. All Rights Reserved

CONTACT US | PRIVACY POLICY | MI DIGITAL AGENCY IS NOW SMARTACRE