Visual design & handoff

Pixels vs points

Ludovic Delmas
October 15, 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 vault

404

Back to vault

404

What is UX?

2
Getting started

Why is UX important?

3
Getting started

What is the UX process?

4
Getting started

What is design thinking?

5
Getting started

What do UX designers do?

6
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