Design and Typography Calculators
These calculators handle the numbers behind screen and print design: converting pixel values to rem and em units for responsive CSS, finding a display's pixel density from its resolution and diagonal, working out how large an image can be printed at a given DPI or how many pixels a print needs, dividing a layout by the golden ratio and generating a modular type scale with ready-to-paste CSS.
5 free tools · no sign-up · no ads
All Design Calculators (5)
PX to REM Converter
Convert pixels to rem and em for CSS, with a conversion tablePPI Calculator
Pixel density of a screen from resolution and diagonal sizePrint Size Calculator
Maximum print size from image pixels and DPI, and pixels needed for a printGolden Ratio Calculator
Golden ratio sections for layouts, typography and designType Scale Calculator
Modular type scale for headings and body text, with CSS output
Which tool do I need?
Convert a design's pixel sizes to rem
Set the root font size and paste pixel values to get rem and em equivalents and a conversion table.
Check whether a photo is big enough to print
Enter the image's pixel size and the DPI to get the largest print size, or the pixels a print size needs.
Build a type scale for a website
Pick a base size and ratio to get heading sizes with CSS variables you can copy.
About Design Calculators
They pair with the colour and CSS tools in Design Tools and the image tools for resizing and converting files. The type scale and rem tools output CSS custom properties, so the results go straight into a stylesheet.
Print guidance uses the common 300 DPI target for close viewing and lower values for large prints seen from a distance; printers and paper differ, so check with your print shop for critical jobs.
Guides
- PX vs REM vs EM: Choosing CSS Units for Accessible SizingWhat rem and em are relative to, why 16 px is the default root, how compounding em catches people out, the 62.5% trick and its cost, and where px is still the right unit.
- Pixel Density Explained: PPI, Dot Pitch and the Retina ThresholdWhy PPI is the diagonal pixel count over the diagonal size, how one arcminute of visual acuity sets the distance at which pixels vanish, and what that means when choosing a monitor, phone or TV.
- Print Resolution: How Many Pixels You Need at 300 DPIPixels, inches and DPI in one relation, why 300 DPI is the rule for photos and 150 is fine for posters, the ISO 216 paper sizes in pixels, and how viewing distance changes what counts as sharp.
- The Golden Ratio in Design: The Maths, the Myths and Real UsesWhere φ = 1.618 comes from, its link to the Fibonacci sequence, how to split a length or a layout into golden sections, and which famous "golden" claims do not survive measurement.
Frequently asked questions
Why use rem instead of px for font sizes?
rem scales with the user's browser font-size setting, so text stays readable for people who enlarge their default size. Pixel values ignore that preference.
Is DPI the same as PPI?
Strictly, PPI is pixels per inch in a digital image or screen and DPI is ink dots per inch from a printer, but the terms are used interchangeably when setting image print resolution.
What ratio should a type scale use?
Common choices are 1.125 or 1.2 for dense interfaces and 1.25 to 1.333 for editorial pages. Larger ratios give more dramatic headings but run out of room quickly on small screens.
What pixel density counts as a retina display?
Apple uses the term for screens dense enough that pixels are not visible at normal viewing distance, roughly 220 PPI or more on laptops and over 300 PPI on phones. The PPI calculator shows the density for any screen.