npr design research: story page legibility

Research ProjectStory Page Legibility

“71% of all sessions land on story pages” 

- Dan Frohlich via HipChat on 9/11/14

Primary Focus

• Improve reading experience of a plain text story

• Improve reading experience of a story that has images

Legibilityis a measure of how easy it is for the reader to distinguish

one letter or character in text from another.

Reading ToolsPocket, Readability, Safari Reader

PocketParagraph Specs

Chaparral Pro 21px/31.5px 640px Width

31.5px Margins

Roughly 70-75 characters per line

ReadabilityParagraph Specs

Sentinel 21px/36.39px 787.53px Width 49.9px Margins

Roughly 70-75 characters per line

Safari ReaderParagraph SpecsGeorgia 17px/27px

660px Width 27px Margins

Roughly 85-90 characters per line

Online NewsNew York Times, Washington Post, The Atlantic, Medium

New York TimesParagraph SpecsGeorgia 16px/23px

540px Width 16px Margins

Roughly 68-72 characters per line

MediumParagraph Specs

Freight Text Pro 22px/33px 700px Width 30px Margins

0.16px Letterspacing

Roughly 75 characters per line

Small BreakpointNew York Times, Safari Reader, Medium

New York TimesParagraph SpecsGeorgia 16px/23px

288px Width 16px Margins

Roughly 35-40 characters per line

Safari ReaderParagraph Specs

Helvetica Neue 17px/24px 286px Width

17px + 28px Margins

Roughly 35-40 characters per line

MediumParagraph Specs

Freight Text Pro 20px/28px 286px Width

25+ 30px Margins 0.16px Letterspacing

Roughly 28-35 characters per line

NPRHelvetica 16px/24px

480-690px Width 20.8px Margins

Max: Roughly 80-90 characters per line Min: Roughly 60 characters per line

Recommendations

• Serif fonts with adequate margins and sizing are preferred for body copy with high resolution screens

• The line-height and margins in between paragraphs should match

• A max-width should be defined on content areas for ideal typesetting and legibility

Where does the first paragraph start?

Where does the first paragraph start?

Recommendations

Rebalancing is needed on a story page’s:

• Headline

• Audio control

• Featured image

• Initial paragraph

1000-1200px

1201-1760px

Tablet

Recommendations• Desktop left & right margins should continue to have a healthy

amount of space

• Mobile left & right margins should take advantage of the entire viewport for optimal line lengths and font sizes

• Tablet left & right margins should mirror mobile and the max-width should be equal in portrait & landscape modes

• 35-40 Characters per line at small breakpoint

• 70-75 Characters per line at medium & large breakpoint

Recommendations

• We should simplify story page elements at a medium breakpoint range of 768-1200px

• Internal links and pull quotes will be less disruptive to the reading experience when positioned on the right hand side

• A responsive ad unit located at the bottom of the wide multimedia layout could be shared with an ongoing effort for Tumblr sites