3 Quick and Simple Typography Tips to Improve User Experience

>>>3 Quick and Simple Typography Tips to Improve User Experience
  • Web Page Typography

3 Quick and Simple Typography Tips to Improve User Experience

Web typography has probably become among the most sought after topic once CSS techniques have been refined again and again in the past three quarters of a decade, and for a good reason. With so many sites to read different types of information, people will only stick with sites that catch their attention and are easy to read on first glance. With that in mind, there are still a few CSS tips that we can do so that we can make your site’s content friendlier to the users, hoping that these will make your readers see your site as a more enticing read.

Take Care of Your Measure

A web study by Human Factors International have found that a longer line length contributes to faster reading with humans, up to 90 to 100 characters, but these do not present any data if the users are digesting the content that was presented to them. For users to understand the content properly for recall, a good line length, called measure, should be around 40 to 80 characters as per Robert Bringhurst’s The Elements of Typographic Style. A good in between would be 60 to 70 characters for desktop browsing.

 

Doing this in CSS would be as simple as using Bringhurst’s method of multiplying the typeface’s size by 30 for the value of max-width, so if your typeface is at 12px, your max-width should be 360px. This measurement also applies for em. There’s a longer way to do this by using progressive padding, where it balances the container width according to the font size, but we’re aiming for simple here

font size to width ratio CSS

Get Your Leading Just Right

The one thing that irks readers the most is having a wall of text for content. Being presented a big block of tightly spaced paragraph makes the information not only annoying, but is a major no-no. It discourages continuous reading and distracts the user’s focal points. Making this too wide also doesn’t help, making the font look too small. This means that a properly balanced line space, called leading, is important.

 

the good the bad and the ugly on line height CSS

 

A good leading is at least 120% and up to 160% of the typeface’s font size, or around 2 to 5 points larger in type size. A good measure for this is to think of an imaginary letter d or h sideways. It should be able to thread the gap between the ascender letters (d,t,b) and the descender letters (p,y,q) with relative ease.  The code for this would look like this:

 

line height CSS

 

Choose Clean, Scaled Fonts

If there’s something I learned in newspaper journalism, that’s to make sure your fonts are clean and properly to make sure that everything lines up and look neat when lumped together. The same concept works with web pages. Get fonts with a wide range of scales, weights, caps and variants so that you can play around the final looks of your page. The idea is to take advantage of the white space so that when the font is combined with your measure and your leading, it will look crisp. Two different fonts are usually the minimum – one for the headlines and one for the body.

 

National Geographic - Pyramids

 

A good example of this is from Simon Collison, where he uses a traditional strong sans serif for the headline and a clean serif font for the body and the smaller headings. It communicates what the person is trying to say to the reader in a very clear manner without the clutter.

 

Simon Collison Website

By | 2018-02-09T21:17:29+00:00 January 30th, 2017|Web Basics|0 Comments

About the Author:

Apple Certified Engineer. Content Writer. Your friendly neighborhood SEO and Digital Marketing guy who cooks a new recipe each week.

Leave A Comment