Wide enough to expose the layout problems a 1280 canvas hides, narrow enough that the result still fits a 1600px browser window. Then check the design at 1280 and at 1920 before you hand it over — those two are where it breaks.
| Canvas | Width | Argument for it | Argument against |
|---|---|---|---|
| 1440 | 1440 px | Fits inside almost every laptop browser window, so the design is seen roughly as drawn. Divides cleanly by 12, 8, 6, 4, 3 and 2. | Slightly narrower than the most common desktop monitor, so ultra-wide behaviour has to be reasoned about rather than seen. |
| 1280 | 1280 px | The smallest common desktop width. Designing here guarantees it fits everywhere. | Too forgiving. Layouts that are cramped at 1280 look fine; layouts that fall apart at 1600 are never discovered. |
| 1512 | 1512 px | The literal default logical width of a 14″ MacBook Pro — what many designers actually see. | An Apple-specific number. Divides badly (1512 ÷ 12 = 126, but ÷ 8 = 189, ÷ 16 = 94.5). |
| 1920 | 1920 px | Matches the most common physical monitor resolution. | Almost nobody browses at 1920 CSS px — the window is smaller, and at 125% Windows scaling the viewport is 1536. Designing here overstates how much room you have. |
The MacBook trap
This is the failure that produces "it looked fine in Figma". macOS ships most Macs in a scaled display mode, so the logical width is not the panel width and is rarely a round number. Across the 22 Macs and Apple displays catalogued here, the default logical widths are:
| Default logical width | Models | Examples |
|---|---|---|
| 1440 px | 4 | MacBook Pro 13″ (M2), MacBook Pro 13″ (M1), MacBook Air 13″ (M1) +1 more |
| 1470 px | 3 | MacBook Air 13″ (M4), MacBook Air 13″ (M3), MacBook Air 13″ (M2) |
| 1512 px | 3 | MacBook Pro 14″ (M4), MacBook Pro 14″ (M3), MacBook Pro 14″ (M1) |
| 1710 px | 3 | MacBook Air 15″ (M4), MacBook Air 15″ (M3), MacBook Air 15″ (M2) |
| 1728 px | 3 | MacBook Pro 16″ (M4), MacBook Pro 16″ (M3), MacBook Pro 16″ (M1) |
| 1792 px | 1 | MacBook Pro 16″ (2019) |
| 2240 px | 2 | iMac 24″ (M4), iMac 24″ (M1) |
| 2560 px | 2 | iMac 27″ 5K, Studio Display |
| 3008 px | 1 | Pro Display XDR |
Note what is not in that list: 1440. A designer on a 14″ MacBook Pro is working at 1512, sees their 1440 canvas with 72px to spare, and concludes the design has breathing room. A developer on a 13″ Air is at 1470. A user on an external 27″ display is at 2560. None of them are looking at the same thing, and the browser window is narrower than all of these because of the OS chrome.
The fix is not to change the canvas. It is to stop treating the canvas as the delivery width.
What to actually check
Design at 1440. Then resize the browser and look at three things:
- 1280 px — does anything wrap that should not? This is the narrowest desktop you owe support to.
- 1920 px — does the content stretch into an unreadable measure, or does the max-width hold? If your layout has no
max-width, this is where you find out. - The seam — the width where your last breakpoint fires. Layouts break at the seam, not in the middle of a range.
Why 1440 and not 1512 or 1366
Divisibility, again. 1440 = 2⁵ × 3² × 5, which means it divides evenly by 2, 3, 4, 5, 6, 8, 9, 10, 12, 16, 18, 20, 24 and more. 1512 divides by 12 but not by 16. 1366 divides by 2 and not much else. When your canvas divides cleanly, column widths come out as whole numbers and your spacing scale does not drift.
It is also the reason this site is called what it is called.
Questions
Should I design mobile-first at 390px instead?
Design the hard case first, which is usually mobile — 390px is the sensible phone canvas (55% of phones released since 2020 sit between 390 and 440 CSS px). But "mobile-first" is a CSS authoring order, not a rule about which artboard you open first. Most teams need both files.
What is the most common desktop screen resolution?
1920 × 1080 physically. But the CSS viewport is smaller: a maximised browser on a 1920 screen at 100% scaling reports roughly 1920 × 950, and at the 125% scaling Windows recommends on most 15″ laptops it reports 1536 × 760. See display resolutions.
Does the design canvas affect my breakpoints?
It should not. Breakpoints belong where the content breaks, not where your artboard ends. See breakpoint strategy.