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