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

Question

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.

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.

Answer 1

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:

• Readability & Legibility — Logo Talks: Online Magazine for Logo & Type Designers
• "It's About Legibility" — Fonts.com

---

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.

Answer 2

Hynes' answer is great; I just want to add something.

Accessibility

WCAG 2.0 accessibility guidelines for the web have certain specifications that you must follow in order to have your website fully accessible to people with any number of disabilities. One such specification is in regards to the color contrast of font to it's background color: Full Details Here

The rule states:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

(emphasis mine)

Large scale font is defined as 18pt font or 14pt bold font.

This means a 14pt font that is bold has essentially the same readability as an 18pt regular font. In the same link W3 says:

Text that is larger and has wider character strokes is easier to read at lower contrast. The contrast requirement for larger text is therefore lower. This allows authors to use a wider range of color choices for large text, which is helpful for design of pages, particularly titles.

Answer 3

Keep in mind that in different rendering engines, the result will be different.

In this environment, the result is clearly different from your result.