Pixel Density, Demystified

How pixel density works and how it affects your designs.

Peter Nowell
Jun 10, 2016 · 9 min read
Image for post
Image for post

This article & video were originally created as part of the UX course in Sketch Master.

Check out the top pixel density resources for designers.

Image for post
Image for post
Icons for the original Mac, designed by Susan Kare.
Image for post
Image for post
Notice the difference the Mail icon’s envelope and the clarity of text labels.
Image for post
Image for post

PT & DP

Controlled Chaos

Image for post
Image for post

Design in vector. Design at 1x.

Image for post
Image for post

Fake it ’till ya make it!

Image for post
Image for post
Design for the iPhone Plus as though it was truly 3x. The device will scale it 87% for you.

Image for post
Image for post

Your Eye’s Perception of Scale

Image for post
Image for post
Image for post
Image for post

Lower Pixel Density

Different Dimensions

Image for post
Image for post

Sanity Check?

Image for post
Image for post

Essential Resources


Thanks to Nathan Manousos, Rasmus Andersson, and Jeff Frazier

Peter Nowell

Written by

Designer working across UX, web, branding, & traditional graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com

Peter Nowell

Written by

Designer working across UX, web, branding, & traditional graphic design. Creator of Sketch Master — online training courses for Sketch. pnowell.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store