狠狠撸

狠狠撸Share a Scribd company logo
Research Project
Story 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
Legibility
is a measure of how easy it is for the reader to distinguish?
one letter or character in text from another.
Reading Tools
Pocket, Readability, Safari Reader
Pocket
Paragraph Specs
Chaparral Pro 21px/31.5px
640px Width
31.5px Margins
Roughly 70-75 characters per line
Readability
Paragraph Specs
Sentinel 21px/36.39px
787.53px Width
49.9px Margins
Roughly 70-75 characters per line
Safari Reader
Paragraph Specs
Georgia 17px/27px
660px Width
27px Margins
Roughly 85-90 characters per line
Online News
New York Times, Washington Post, The Atlantic, Medium
New York Times
Paragraph Specs
Georgia 16px/23px
540px Width
16px Margins
Roughly 68-72 characters per line
Medium
Paragraph Specs
Freight Text Pro 22px/33px
700px Width
30px Margins
0.16px Letterspacing
Roughly 75 characters per line
Small Breakpoint
New York Times, Safari Reader, Medium
New York Times
Paragraph Specs
Georgia 16px/23px
288px Width
16px Margins
Roughly 35-40 characters per line
Safari Reader
Paragraph Specs
Helvetica Neue 17px/24px
286px Width
17px + 28px Margins
Roughly 35-40 characters per line
Medium
Paragraph Specs
Freight Text Pro 20px/28px
286px Width
25+ 30px Margins
0.16px Letterspacing
Roughly 28-35 characters per line
NPR
Helvetica 16px/24px
480-690px Width
20.8px Margins
Max: Roughly 80-90 characters per line
Min: Roughly 60 characters per line
NPR Design Research: Story Page Legibility
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 de?ned on content areas for ideal
typesetting and legibility
Where does the ?rst paragraph start?
Where does the ?rst 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
Ad

Recommended

Monits - Creative Services
Monits - Creative Services
Monits
?
Monits - Three stories
Monits - Three stories
Monits
?
Responsive Web Design & Typography
Responsive Web Design & Typography
Danny Calders
?
8 Typography Notes
8 Typography Notes
Program in Interdisciplinary Computing
?
Week 12 CSS Font - size
Week 12 CSS Font - size
Katherine McCurdy-Lapierre, R.G.D.
?
Multimedia chapter 2
Multimedia chapter 2
PrathimaBaliga
?
Multimedia chapter 2
Multimedia chapter 2
PrathimaBaliga
?
Content strategy for mobile
Content strategy for mobile
Karolina Szczur
?
Practical Typography or Typography vs Design
Practical Typography or Typography vs Design
Ravi Bhadauria
?
Font new edit
Font new edit
Attaporn Ninsuwan
?
VA1160 - Class 11
VA1160 - Class 11
Bryan Chung
?
Neoito — Typography for the web
Neoito — Typography for the web
Neoito
?
Marketing· Product or Service · If product Product, Price, P.docx
Marketing· Product or Service · If product Product, Price, P.docx
infantsuk
?
Midterm review
Midterm review
Briana VanBuskirk
?
Going responsive
Going responsive
Robert Cochran
?
Chapter 2 : TEXT
Chapter 2 : TEXT
azira96
?
Chapter 2
Chapter 2
nooramirahazmn
?
Paragraph formatting
Paragraph formatting
RobinPickles
?
Designing on a grid
Designing on a grid
Kaitlin Hanger, Ph.D.
?
Content Workshop - Creating Effective Content for Your Website
Content Workshop - Creating Effective Content for Your Website
Chance Bliss
?
Text
Text
Debdatta Chakraborty
?
Designing for words: elements of typography style for the web
Designing for words: elements of typography style for the web
Luke Murphy
?
Making social media work, building on line community
Making social media work, building on line community
Archdiocese of Cincinnati, Office of Evangelization and Catechesis
?
Ppt guidelines
Ppt guidelines
KathyAlstrin
?
Unit 2 graphics
Unit 2 graphics
Arnav Chowdhury
?
Rethinking the news: An insider's look at NPR's responsive redesign
Rethinking the news: An insider's look at NPR's responsive redesign
Nick Whitmoyer
?
Refresh Baltimore: Slicing up the design process
Refresh Baltimore: Slicing up the design process
Nick Whitmoyer
?
Design Huddle: Basic Design Principles
Design Huddle: Basic Design Principles
Nick Whitmoyer
?
Designing a Better Process for UX
Designing a Better Process for UX
Nick Whitmoyer
?
Small Teams, Big Conversations
Small Teams, Big Conversations
Nick Whitmoyer
?

More Related Content

Similar to NPR Design Research: Story Page Legibility (17)

Practical Typography or Typography vs Design
Practical Typography or Typography vs Design
Ravi Bhadauria
?
Font new edit
Font new edit
Attaporn Ninsuwan
?
VA1160 - Class 11
VA1160 - Class 11
Bryan Chung
?
Neoito — Typography for the web
Neoito — Typography for the web
Neoito
?
Marketing· Product or Service · If product Product, Price, P.docx
Marketing· Product or Service · If product Product, Price, P.docx
infantsuk
?
Midterm review
Midterm review
Briana VanBuskirk
?
Going responsive
Going responsive
Robert Cochran
?
Chapter 2 : TEXT
Chapter 2 : TEXT
azira96
?
Chapter 2
Chapter 2
nooramirahazmn
?
Paragraph formatting
Paragraph formatting
RobinPickles
?
Designing on a grid
Designing on a grid
Kaitlin Hanger, Ph.D.
?
Content Workshop - Creating Effective Content for Your Website
Content Workshop - Creating Effective Content for Your Website
Chance Bliss
?
Text
Text
Debdatta Chakraborty
?
Designing for words: elements of typography style for the web
Designing for words: elements of typography style for the web
Luke Murphy
?
Making social media work, building on line community
Making social media work, building on line community
Archdiocese of Cincinnati, Office of Evangelization and Catechesis
?
Ppt guidelines
Ppt guidelines
KathyAlstrin
?
Unit 2 graphics
Unit 2 graphics
Arnav Chowdhury
?

More from Nick Whitmoyer (8)

Rethinking the news: An insider's look at NPR's responsive redesign
Rethinking the news: An insider's look at NPR's responsive redesign
Nick Whitmoyer
?
Refresh Baltimore: Slicing up the design process
Refresh Baltimore: Slicing up the design process
Nick Whitmoyer
?
Design Huddle: Basic Design Principles
Design Huddle: Basic Design Principles
Nick Whitmoyer
?
Designing a Better Process for UX
Designing a Better Process for UX
Nick Whitmoyer
?
Small Teams, Big Conversations
Small Teams, Big Conversations
Nick Whitmoyer
?
Refresh DC: Data-Driven Design Decisions
Refresh DC: Data-Driven Design Decisions
Nick Whitmoyer
?
Setting Up Shop
Setting Up Shop
Nick Whitmoyer
?
Mobile Web Design - The Basics
Mobile Web Design - The Basics
Nick Whitmoyer
?
Rethinking the news: An insider's look at NPR's responsive redesign
Rethinking the news: An insider's look at NPR's responsive redesign
Nick Whitmoyer
?
Refresh Baltimore: Slicing up the design process
Refresh Baltimore: Slicing up the design process
Nick Whitmoyer
?
Design Huddle: Basic Design Principles
Design Huddle: Basic Design Principles
Nick Whitmoyer
?
Designing a Better Process for UX
Designing a Better Process for UX
Nick Whitmoyer
?
Small Teams, Big Conversations
Small Teams, Big Conversations
Nick Whitmoyer
?
Refresh DC: Data-Driven Design Decisions
Refresh DC: Data-Driven Design Decisions
Nick Whitmoyer
?
Mobile Web Design - The Basics
Mobile Web Design - The Basics
Nick Whitmoyer
?
Ad

Recently uploaded (20)

Quectel M10 AT commands Arduino Microcontroller
Quectel M10 AT commands Arduino Microcontroller
AdamSunusiHaruna1
?
research proposal on IDA By dr waleed zaheen.pptx
research proposal on IDA By dr waleed zaheen.pptx
waleedzaheen1
?
Guildford Flames Adam Long Helmet Design Challenge 2025
Guildford Flames Adam Long Helmet Design Challenge 2025
Tom Hutchinson
?
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
?
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Ayesha khan
?
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
mbkl05cctjv
?
pre test uncertainty, conflictbnnnmnb mn
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
?
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
?
3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...
3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...
huyth14
?
LAVIELACE - Collections portfolio showcase
LAVIELACE - Collections portfolio showcase
Geo Lupascu
?
最新版意大利布雷西亚自由美术学院毕业证(尝础叠础毕业证书)原版定制
最新版意大利布雷西亚自由美术学院毕业证(尝础叠础毕业证书)原版定制
taqyea
?
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The Lifestyle Editor
?
ART & FUNDAMENTALS OF DESIGN CHAPTER -01.pptx
ART & FUNDAMENTALS OF DESIGN CHAPTER -01.pptx
riteshsahdev2
?
Bahan kuliah tambahan perpandsebagai pengganti liburan.ppt
Bahan kuliah tambahan perpandsebagai pengganti liburan.ppt
Kristyadi Daripada Paidi
?
the sigma cafe a b c d e f g h i j k l i
the sigma cafe a b c d e f g h i j k l i
kamalpavlov
?
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels
?
The Gardens Between - A moment breakdown
The Gardens Between - A moment breakdown
ScorpGrd
?
The power of storytelling in design.pdf
The power of storytelling in design.pdf
Zohaib421
?
Architect list in Bangalore. Architects list in Bangalore.pdf
Architect list in Bangalore. Architects list in Bangalore.pdf
Tejas758706
?
AI-Driven-Personalization-in-UX-Designing-for-One-in-a-Million.pdf
AI-Driven-Personalization-in-UX-Designing-for-One-in-a-Million.pdf
Sultan Shalakhti
?
Quectel M10 AT commands Arduino Microcontroller
Quectel M10 AT commands Arduino Microcontroller
AdamSunusiHaruna1
?
research proposal on IDA By dr waleed zaheen.pptx
research proposal on IDA By dr waleed zaheen.pptx
waleedzaheen1
?
Guildford Flames Adam Long Helmet Design Challenge 2025
Guildford Flames Adam Long Helmet Design Challenge 2025
Tom Hutchinson
?
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
?
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Capcut Pro Crack For PC Latest Version {Fully Unlocked}
Ayesha khan
?
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
roadsafety_training_manual_unit_1_magnitude_and_impact.ppt
mbkl05cctjv
?
pre test uncertainty, conflictbnnnmnb mn
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
?
overview visual graphic design for SHS.pptx
overview visual graphic design for SHS.pptx
KarlVincentNonog
?
3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...
3D-IC Design Kits for Drop-in Chiplets MDK, ADK, TDK - 20250121_PreConH_Wong_...
huyth14
?
LAVIELACE - Collections portfolio showcase
LAVIELACE - Collections portfolio showcase
Geo Lupascu
?
最新版意大利布雷西亚自由美术学院毕业证(尝础叠础毕业证书)原版定制
最新版意大利布雷西亚自由美术学院毕业证(尝础叠础毕业证书)原版定制
taqyea
?
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The-Future-of-Fashion-in-Singapore-Moushumi-Khara.pdf
The Lifestyle Editor
?
ART & FUNDAMENTALS OF DESIGN CHAPTER -01.pptx
ART & FUNDAMENTALS OF DESIGN CHAPTER -01.pptx
riteshsahdev2
?
Bahan kuliah tambahan perpandsebagai pengganti liburan.ppt
Bahan kuliah tambahan perpandsebagai pengganti liburan.ppt
Kristyadi Daripada Paidi
?
the sigma cafe a b c d e f g h i j k l i
the sigma cafe a b c d e f g h i j k l i
kamalpavlov
?
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels Master of Architecture Thesis 2025
Bethany Michels
?
The Gardens Between - A moment breakdown
The Gardens Between - A moment breakdown
ScorpGrd
?
The power of storytelling in design.pdf
The power of storytelling in design.pdf
Zohaib421
?
Architect list in Bangalore. Architects list in Bangalore.pdf
Architect list in Bangalore. Architects list in Bangalore.pdf
Tejas758706
?
AI-Driven-Personalization-in-UX-Designing-for-One-in-a-Million.pdf
AI-Driven-Personalization-in-UX-Designing-for-One-in-a-Million.pdf
Sultan Shalakhti
?
Ad

NPR Design Research: Story Page Legibility