Point vs Pixel

Points and pixels are measurement units used in digital design, but they serve different purposes in modern design systems. Points are abstract units used by iOS that maintain consistent physical sizes across different display densities. Pixels are the actual light-emitting elements on screens. Understanding this distinction is essential for creating cross-platform design systems that work correctly on high-density displays.

What Is Point vs Pixel

Points (pt) are the unit of measurement in iOS design. One point represents a consistent size regardless of screen density. On non-Retina displays, 1 point equals 1 pixel. On Retina displays with 2x density, 1 point equals 4 pixels (2x2). On 3x displays like iPhone Pro models, 1 point equals 9 pixels (3x3).

Pixels are the physical picture elements that make up digital displays. More pixels in the same physical area create higher density displays with sharper images. Modern smartphone displays pack significantly more pixels per inch than older displays, requiring the point abstraction to maintain usable interface sizes.

The pixel-to-point ratio is called the scale factor. iOS devices use 1x (legacy), 2x, and 3x scale factors. Design systems must account for these factors when creating assets and specifying sizes.

How Point vs Pixel Affects Design Systems

Design specifications should use points for iOS, not pixels. A 44pt touch target maintains adequate size across all iOS devices. A 44px specification would be too small on 2x and 3x displays (appearing as 22pt and ~15pt respectively).

Scale Factor Examples:

1x (Non-Retina, legacy):
- 44pt button = 44px
- 1pt line = 1px

2x (Retina):
- 44pt button = 88px (44 × 2)
- 1pt line = 2px (1 × 2)
- Hairline (0.5pt) = 1px

3x (Super Retina):
- 44pt button = 132px (44 × 3)
- 1pt line = 3px (1 × 3)
- Hairline (~0.33pt) = 1px

Asset creation requires multiple resolution versions. A 24pt icon needs 24px (@1x), 48px (@2x), and 72px (@3x) versions. Asset catalogs organize these versions, and iOS selects the appropriate version for each device.

Vector assets simplify multi-resolution support. PDF or SVG assets scale mathematically, generating appropriate pixel output at any scale factor. This approach reduces asset management complexity compared to maintaining multiple raster versions.

Hairline borders demonstrate scale factor considerations. A true 1-pixel line appears as 0.5pt on 2x displays and ~0.33pt on 3x displays. Specifying 1pt creates 2px or 3px lines, which may appear thicker than intended. Design systems must decide whether to specify visual intent (hairline) or exact points.

Key Considerations

• Always use points for iOS specifications, not pixels
• Asset exports must include @2x and @3x versions for raster images
• Vector assets scale automatically but may need alignment adjustment
• Sub-point values enable pixel-perfect hairlines on high-density displays
• Android uses different terminology (dp) for the same concept
• Web design increasingly uses similar abstraction with rem/em units

Common Questions

How do design tools handle points versus pixels?

Figma, Sketch, and other design tools work in points by default when designing for iOS. A design created at “1x” scale uses point values directly. The canvas units correspond to points, not pixels.

Export settings generate multi-resolution assets. Exporting at 1x, 2x, and 3x produces assets at appropriate pixel dimensions for each scale factor. Design tools multiply canvas dimensions by scale factors to calculate export pixel dimensions.

Some designers prefer working at 2x scale for additional detail control. This requires dividing measurements by 2 when communicating point values to developers. A 96px element at 2x scale equals 48pt.

How does point vs pixel relate to Android dp?

Android dp (density independent pixels) serves the same purpose as iOS points. Both abstract away physical pixel counts to maintain consistent physical sizes across display densities.

Cross-platform design systems can use either terminology in their internal specifications. A spacing value of 16 translates to 16pt on iOS and 16dp on Android. The underlying concept is identical.

Transformation pipelines add appropriate units when generating platform-specific outputs. A unitless token value of 16 becomes “16pt” or “16dp” depending on target platform.

When should designs specify sub-point values?

Sub-point values like 0.5pt enable pixel-perfect hairlines on 2x displays. This creates true 1-pixel lines that appear crisp and light.

However, sub-point values require careful consideration. A 0.5pt line on 3x displays would need 1.5px, which requires antialiasing and may appear blurry. Either accepting the blur or using ~0.33pt for 3x devices (true 1px) addresses this.

Design systems should document their approach to sub-point values. Some systems avoid them entirely, accepting that 1pt lines appear as 2px or 3px. Others provide specific guidance for achieving hairline effects on different devices.

Platform APIs sometimes provide convenience values. iOS offers hairline widths through constants like UIScreen.main.scale that calculate appropriate sub-point values for the current device.

Summary

Points are abstract units for iOS design that maintain consistent physical sizes across display densities, while pixels are physical screen elements. Design systems must specify iOS sizes in points, not pixels, and provide assets at multiple resolutions. Understanding scale factors (1x, 2x, 3x) enables correct asset creation and proper handling of edge cases like hairline borders.