Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Is there any research with respect to how font-weight affects readability?

Obviously, there is some relation there, but I'm struggling to make a decision based on any facts.

I created a jsFiddle that demonstrates my issue or you can view the screenshot below.

Top has font-weight 100. Bottom has 400.

I personally prefer the title with font-weight:100; as it's more slick, modern etc., but I'm worried that others might not be able to read it very well when there are many of these wrappers on a page. Also, it seems to me, that the "content text" under the title is heavier and is taking the eye away from the title.

share|improve this question
1  
Instead of just having the jsFiddle link, your question would read better if you just took screen shots and edited your post to include them. –  Code Maverick Feb 26 at 4:17
3  
Am I the only one who can see absolutely no difference between the two options in the resulting HTML, even if I zoom in? They're rendering exactly the same for me. –  Jessica Yang Feb 26 at 4:21
    
@JessicaYang - I thought the same thing as well and it was probably just me; guess not. Hence, my screen shot statement. It's better if we can actually see the differences! =D –  Code Maverick Feb 26 at 4:24
    
@CodeMaverick - I edited the question to include a screenshot. –  Hynes Feb 26 at 4:38
1  
My guess is that Helvetica actually does contain the lighter font weight, and that people who can't see the difference don't have Helvetica. In which case, zooming in doesn't work. –  Mr Lister Feb 26 at 8:13

1 Answer 1

up vote 17 down vote accepted

I feel like you have very different questions here.

To answer your first question:

is some research in regards to how font-weight affects readability?

Yes, there is. First you have to understand that type/fonts are judged by their "readability" (how easily can words, sentences, and paragraphs be read by an average reader) and their "legibility" (how easily can letter forms be distinguished from one another).

Studies have shown that readability tends to increase when using a "normal" or "regular" font weight (i.e. 400). The reason for this is that it when words and sentences are able to read quickly the reader's eyes will actually slow down their normal blinking rate, which allows the user to not grow weary reading over long periods of time. Yet when lighter or heavier weights are used in large blocks of text, readers tend to blink more because they have to concentrate more while reading. Lighter type weights introduce more negative space and heavier type weights introduce more positive space. Both require readers to concentrate more.

For headlines, your goal should be readability but also legibility. Studies have shown that typefaces with higher x-heights are more legible.

Sources:


To answer your second question:

So here is the fiddle that I'm working on http://jsfiddle.net/T7b6E/

I personally prefer the title with font-weight:100 (more slick, modern etc.)

The first thing to remember is that simply using font-weight: 100; in HTML doesn't actually create a lighter typeface. The weight has to be in the font. Most standard fonts out there, come in 2 weights (4 styles): Regular, Italic, Bold, and Bold Italic. In HTML that's font-weight: 400 and font-weight: 700. If the font that you're trying to apply a different font-weight to doesn't have that weight, the browser is going to try and approximate what it could look like. And it could get it wrong. And depending on the operating systems and even browsers, it could look pretty different.

There are so many great web-type foundry services out there today who are providing type in multiple weights, I would investigate that.

The general rule of thumb I use with type weights are, the larger and shorter the type (i.e. headlines), the easier it is to use lighter weights. The longer and smaller the type, you're better off using regular weights and utilizing heavier weights for emphasis. This approach also falls in line with studies that shows people don't read, they scan copy online.

share|improve this answer
    
A great answer, +1! The second part also explains why I can't see any difference between the two on my system. –  Jessica Yang Feb 26 at 4:22
    
Hynes, that was a great answer! Thank you very much. The links are very useful too! –  user41353 Feb 26 at 4:31
    
I'd like to add that a font weight is not some absolute measure: a weight of 400 for one font may actually look fatter than the 800 of another one. That causes that conclusions drawn from legibility/readability tests on one font are not applicable to other fonts. –  kslstn Feb 26 at 8:08

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.