Sketch uses the macOS coordinates system, measured in points (display points). Everything is measured in points when you work in Sketch, including text layers.
What is a point (display point)?
With the introduction of the Retina Display in 2010, Apple cut all Pixels in half on both x- and y-axis. One pixel is now four physical pixels, while the screen stays the same size. This increased the resolution by two, often written as @2x.
This increase in resolution improved the legibility of text, but it also meant that objects on the screen needed to be twice as big in pixels to appear in the same size. The chosen solution was to abstract the pixel away from the hardware, and one pixel no longer was one pixel on the screen. For clarification, the pixels are points.
An illustration of @1x and @2x resolutions. On the left, we see one square representing one pixel, labeled 1pt = 1px. On the right we see the same square divided into four smaller squares of equal size. The label says 1pt = 2px.
Displays are sorted into resolution categories; this signals the factor that scales their resolution relative to what was common before 2010 (72 ppi).
These categories are @1x (no scaling), @2x (double the pixels), @3x (triple the pixels), etc. Apple devices are always @2x or above, with the iPhone 13 using an @3x display. Sketch automatically renders the Canvas at the resolution your display uses on your Mac.
How does this impact my designs?
A single point in Sketch translates to a single physical pixel on an @1x display, but it refers to four physical pixels on an @2x display. As everything is scaled according to your display, including macOS and Sketch itself, you do not have to pay attention to this while designing — things will just look better.
When you export layers, you can set the scale at which Sketch exports your Artboards. If you export an asset or Artboard @2x, a single point will be equal to four physical pixels, as Sketch will double it along the x- and y-axis. Exporting @3x will equal nine pixels (3x3 physical pixels), and so on.
All of this happens while the dimensions displayed in Sketch stay the same. A great example is the iPhone screen size. The iPhone 13 is 390 by 844 points large with a resolution of 1170 x 2532 pixels — it has an @3x display.
Designing for an @1x display on a Retina Display
Sketch will render your Canvas at the pixel density of your display. When designing for a display with non-retina pixel density (less than @2x) on a modern Mac, you will see more detail than your users. We recommend you turn on View > Canvas > Show Pixels on Zoom. Sketch will render your design at its actual @1x resolution while you zoom to anything but 100%. If you know the physical dimensions of your target hardware, set the zoom level in Sketch so the Artboard on your Mac’s display has the same size as your target hardware — this is unlikely to be 100%.
Points and CSS
If you copy CSS properties from Sketch on Mac or our web app, they will be measured in px (CSS pixels), which work the same way as points on macOS. Properties such as a 3pt border in Sketch will be exported as a 3px border in CSS. 1px in CSS is 1pt (point) in Sketch and macOS.
You can learn more about CSS-Pixels on the W3C website in their article CSS: em, px, pt cm, in…
