Visual design & handoff

Pixels vs points

Ludovic Delmas
November 6, 2020
Let’s first define pixels. 

Pixel is short for picture element and it’s the smallest square sample of an image. The more samples or pixels, the more accurate representation of a picture. 

Each pixel can only be one color at a time. Because they are so small, they seem to blend together to form complex images made of a wide variety of color blends. A 100 x 100px image is made of pixels in a grid 100 wide x 100 high, totaling 10,000 pixels.

With the introduction of high-resolution screens, the number of pixels that could be packed into a physical screen went up, which increased the number of pixels per inch. 

This is where pixels start to get more complicated and where pixel density comes in.

Pixel density is the number of pixels that fit into an inch. To calculate pixel density, divide by 0 and make the universe implode. No, actually, divide the width of a device in pixels by the width of the device in inches. For example, a 100 x 100px image on a 1 x 1 inch screen has a pixel density of 100px per inch. 

High-density screens have more pixels per inch than low-density screens. As a result, UI elements that have the same pixel dimensions appear larger on low-density screens, and smaller on high-density screens. 

This is why Apple introduced logical resolution and its unit of measure, points. 

Logical resolution is essentially what a device’s resolution would be if it didn’t have high resolution. Basically, we design for the smallest, standard screen size to allow us to scale our assets to the corresponding device resolutions. 

Apple uses points as the unit of measure in logical resolution. A point is equal to a specific number of pixels depending on the screen resolution. Put simply, at 1x resolution, 1pt = 1px. At 2x resolution, 1pt = 4px because the resolution doubles both the X and Y values, so 2 x 2px. At 3x resolution, 1pt = 9px, which is 3 x 3px and so on. For example, the iPhone 11 measures at 375 x 812 points. Because it has such a high pixel density, it actually packs in 3 times that many pixels, so the true pixel dimensions are 1125 x 2436px. 

Logical resolution ensures quality across high- and low-pixel density devices. It also prevents designers and developers from going completely insane by trying to figure out the different sizes of elements for different screens. 

Google has a similar unit of measure called density-independent pixels (dps) pronounced dips. They’re not exactly the same as points and have a specific calculation to determine dps for a given screen size. 

Regardless of points or dps, this means that everything you design will be designed at 1x. That way designs and assets for larger resolutions can be easily created from your 1x screens. Some screens call for .75x and 1.5x resolutions. This can be problematic because if an object has an odd number of pixels, it will render on the half-pixel causing blurriness. 

This is why the 8pt grid system has become one of the primary spacing and sizing standards.

Back to library
404
Back to library
404
The UX process for absolute beginners (with free cheatsheet!)
1
Getting started
How to become a UX designer in 2021 (and beyond)
2
Getting started
UX vs UI
7
Getting started
Do UX designers need to know how to code?
8
Getting started
Recommended UX books
9
Getting started
UX university programs: Pros & cons
12
Getting started
UX bootcamps: Pros & cons
13
Getting started
6 brutal truths aspiring UX designers don't want to hear
14
Getting started
Difference Between Graphic Designer vs UX Designer vs UI Designer
15
Getting started
Intro to research & understanding
101
Research & understanding
Finding a problem to solve
102
Research & understanding
SWOT analysis
103
Research & understanding
Competitive analysis
104
Research & understanding
Heuristic evaluation (usability evaluation)
105
Research & understanding
Task analysis
106
Research & understanding
Stakeholder interview
107
Research & understanding
Framing the problem
108
Research & understanding
Research plan
109
Research & understanding
Survey
110
Research & understanding
User interview
111
Research & understanding
Card sorting
112
Research & understanding
Customer journey map
113
Research & understanding
Empathy map
114
Research & understanding
Affinity diagram
115
Research & understanding
Personas
116
Research & understanding
Contextual inquiry
117
Research & understanding
Diary study
120
Research & understanding
Eye tracking
121
Research & understanding
Intro to IA
201
IA & wireframing
Layout + CRAP
203
IA & wireframing
Site map
204
IA & wireframing
Scenarios
205
IA & wireframing
Storyboards
206
IA & wireframing
Low vs high-fidelity
207
IA & wireframing
Sketching
208
IA & wireframing
Wireframes
209
IA & wireframing
User flows
210
IA & wireframing
Intro to usability testing
301
Prototyping & usability testing
Usability testing plan
302
Prototyping & usability testing
Prototypes
304
Prototyping & usability testing
Research report
305
Prototyping & usability testing
Typography basics
401
Visual design & handoff
Color basics
402
Visual design & handoff
Color accessibility
403
Visual design & handoff
Pixels vs points
404
Visual design & handoff
Layout + 8pt grid system
405
Visual design & handoff
Design system
406
Visual design & handoff
UX writing
408
Visual design & handoff
"Final" usability test
409
Visual design & handoff
UX portfolio basics
501
UX portfolio
Your portfolio is just another UX project
502
UX portfolio
Choosing a site builder for your UX portfolio
503
UX portfolio
UX portfolio inspiration
504
UX portfolio
5 tips for junior UXers asking for portfolio feedback
505
UX portfolio

Join hundreds of

designers learning UX

Take our free 7-day UX design course for graphic designers, complete your first UX project in just a few days, and see what you think.
😎 You're awesome! We'll send you an email with the next steps. 🎊
👻 It looks like there's a ghost in the machine. Please try again.