The short answer
A screen makes color with light (red, green, blue added together); print makes color with ink (cyan, magenta, yellow, black subtracting light). They cover different ranges, measure resolution differently, and need different file setups. A design that ignores the difference looks great in the app and disappoints on paper.
Color: RGB vs CMYK
RGB is additive - screens emit red, green, and blue light, which combine toward white. It has a wide, vivid range. CMYK is subtractive - ink absorbs light, and the four process colors combine toward a muddy near-black. CMYK covers a smaller range, so the most saturated on-screen colors (bright neons especially) simply cannot be printed and will shift when converted. Design print work in CMYK from the start so you never fall in love with a color that will not print.
Resolution: PPI vs DPI
- PPI (pixels per inch) describes a screen image. Screens are low-resolution in absolute terms; web images are typically 72-144 PPI and sized in pixels.
- DPI (dots per inch) describes print. Press work wants 300 DPI at final size - an image that looks fine on screen can be far too few pixels to print sharply.
- The practical trap: a 500px-wide logo fills a screen but prints barely two inches at 300 DPI. Print needs far more pixels than the screen suggests - or a vector that sidesteps resolution entirely.
Size and bleed
Screens are measured in pixels and viewed at many sizes; print has a fixed physical size in inches or millimeters. Print also needs bleed - artwork extended a few millimeters past the trim edge - so that when the paper is cut, no white slivers show. And a safe margin keeps important content away from the cut. None of this exists on screen.
Side by side
| Screen | ||
|---|---|---|
| Color model | RGB (light, additive) | CMYK (ink, subtractive) |
| Color range | Wide, vivid | Narrower - neons shift |
| Resolution | 72-144 PPI | 300 DPI at final size |
| Sizing | Pixels, fluid | Inches / mm, fixed |
| Edges | Fill the viewport | Bleed + safe margin |
| Export | PNG, JPG, WEBP, SVG | PDF/X, CMYK, with crop marks |
Exporting right
- For screen: RGB, sized in pixels, PNG/JPG/WEBP (or SVG for vector). Keep files light for load speed - see Core Web Vitals.
- For print: CMYK, 300 DPI at final size, exported as press-ready PDF with bleed and crop marks.
- When in doubt, ask the printer for their spec sheet - bleed size, color profile, and file format vary by press.