Readability of the New Nutrition Label

by on 04/01/14 at 9:50 am

Nutrition labels have looked the same for decades. But the FDA plans to redesign them. By comparing the old and new, you can see why the new design is faster to scan and easier on the eyes.

Readability of the New Nutrition Label

Increasing Text Size Increases Visual Acuity

Notice how the title, calories and servings are the first information pieces you see when you look at the new nutrition label. This is because they are the largest text in its space. When you increase the size of a text in relation to the text around it, you increase the user’s visual acuity for the larger text. This makes important information quicker and easier to spot. It’s clear the FDA is putting importance on both calories and servings. But even more so on calories since its text is slightly larger. In the old nutrition label, the text size of every information piece is the same. This lowers the visual acuity for any particular information piece.

Closer Text Alignment Shortens Eye Saccades

When you look at the old nutrition label, you’ll notice that users have long saccades when they move their eyes from nutrients to % daily value. This is because the table aligns the two information pieces across from each other with large whitespace between. The large whitespace lengthens the user’s eye saccades when they scan. The new nutrition label shortens eye saccades by eliminating the whitespace and aligning the two information pieces side by side. Instead of whitespace separating the two, there’s a subtle vertical line. Shorter eye saccades allow users to scan nutrients and % daily value in less time with less effort.

Final Thoughts

Increasing visual acuity and shortening eye saccades improves text readability. Larger text sizes are effective for increasing visual acuity. Closer text alignment is effective for shortening eye saccades. Apply these readability principles to your user interface, and you’ll make it faster and easier for users to scan your information.


Readability of the New Nutrition Label Readability of the New Nutrition Label

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

5 Responses to “Readability of the New Nutrition Label”

  1. Suzanne Amos

    Apr 2nd, 2014

    Bigger font = good.

    One query: I know it’s only a mock-up of a design but surely it’s wrong to include a value for cholesterol.

    Isn’t cholesterol something the body makes when we eat fat rather than something that’s in our food?

  2. Jon

    Apr 2nd, 2014

    Looks like “Calories from fat” is gone. That’s not good. Ah, but “Added Sugars” is a nice improvement.

    • Mike

      Jun 12th, 2014

      Calories are calories, The value of calories from fat is actually very easily obtained with simple math if you *really* want to know it, which is not the general public..

      My wife is in packaging and this will make her life a living hell but I think it all makes sense from a design/UX perspective..

  3. lebailly

    Apr 23rd, 2014

    Thanks for this interesting article. Agree with lot of things but not with the place of the value of servings in the first line. I think it would be better with a vertical alignment with the value of calories in order to make use of Gestalt grouping principles and help the user read.

Leave a Comment