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.

  • 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. Commented Feb 26, 2014 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. Commented Feb 26, 2014 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 Commented Feb 26, 2014 at 4:24
  • @CodeMaverick - I edited the question to include a screenshot.
    – Hynes
    Commented Feb 26, 2014 at 4:38
  • 2
    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
    Commented Feb 26, 2014 at 8:13

3 Answers 3


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.


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.

  • A great answer, +1! The second part also explains why I can't see any difference between the two on my system. Commented Feb 26, 2014 at 4:22
  • Hynes, that was a great answer! Thank you very much. The links are very useful too!
    – user41353
    Commented Feb 26, 2014 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
    Commented Feb 26, 2014 at 8:08

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


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.


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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