Upload
nick-whitmoyer
View
706
Download
0
Tags:
Embed Size (px)
Citation preview
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