Recommended
More Related Content
Similar to NPR Design Research: Story Page Legibility
Similar to NPR Design Research: Story Page Legibility (17)
More from Nick Whitmoyer
More from Nick Whitmoyer (8)
Recently uploaded
Recently uploaded (20)
NPR Design Research: Story Page Legibility
- 1. Research Project Story Page Legibility
- 2. “71% of all sessions land on story pages” - Dan Frohlich via HipChat on 9/11/14
- 3. Primary Focus • Improve reading experience of a plain text story • Improve reading experience of a story that has images
- 4. Legibility is a measure of how easy it is for the reader to distinguish one letter or character in text from another.
- 5. Reading Tools Pocket, Readability, Safari Reader
- 6. Pocket Paragraph Specs Chaparral Pro 21px/31.5px 640px Width 31.5px Margins Roughly 70-75 characters per line
- 7. Readability Paragraph Specs Sentinel 21px/36.39px 787.53px Width 49.9px Margins Roughly 70-75 characters per line
- 8. Safari Reader Paragraph Specs Georgia 17px/27px 660px Width 27px Margins Roughly 85-90 characters per line
- 9. Online News New York Times, Washington Post, The Atlantic, Medium
- 10. New York Times Paragraph Specs Georgia 16px/23px 540px Width 16px Margins Roughly 68-72 characters per line
- 11. Medium Paragraph Specs Freight Text Pro 22px/33px 700px Width 30px Margins 0.16px Letterspacing Roughly 75 characters per line
- 12. Small Breakpoint New York Times, Safari Reader, Medium
- 13. New York Times Paragraph Specs Georgia 16px/23px 288px Width 16px Margins Roughly 35-40 characters per line
- 14. Safari Reader Paragraph Specs Helvetica Neue 17px/24px 286px Width 17px + 28px Margins Roughly 35-40 characters per line
- 15. Medium Paragraph Specs Freight Text Pro 20px/28px 286px Width 25+ 30px Margins 0.16px Letterspacing Roughly 28-35 characters per line
- 16. NPR Helvetica 16px/24px 480-690px Width 20.8px Margins Max: Roughly 80-90 characters per line Min: Roughly 60 characters per line
- 18. 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
- 19. Where does the first paragraph start?
- 20. Where does the first paragraph start?
- 21. Recommendations Rebalancing is needed on a story page’s: • Headline • Audio control • Featured image • Initial paragraph
- 22. 1000-1200px
- 23. 1201-1760px
- 24. Tablet
- 25. 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
- 26. 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