By Ahsan Khowaja · Updated 27 October 2026
How to use the font size calculator
The calculator has three modes, chosen in the first box:
- Type scale: set the body (base) font size and a ratio, and read off the sizes for h1 to h5, body, small text and captions, in px and rem, with a copy-ready CSS line for each.
- Fluid font size: give the smallest size and the screen width where it applies, the largest size and its width, and get a CSS
clamp()rule that slides smoothly between them. A fifth box shows what the size will be at any viewport width you want to check. - Points to pixels: type a size in points (the unit Word, Google Docs and print use) and get CSS pixels, inches and millimetres, plus a chart of common point sizes.
None of the modes is a unit converter for existing values: for 24px in rem or em, the px to rem converter and px to em converter do that. This page is for deciding what the sizes should be in the first place.
Type scale calculator: heading sizes from one ratio
A type scale (or modular scale) is a set of font sizes where each step is the previous one multiplied by a fixed ratio. Instead of choosing seven heading sizes by eye, you choose two numbers:
size at step n = base × ratio^n
The base is step 0, your body text. Positive steps are headings; negative steps are small text and captions. With a 16px base and a 1.25 ratio (a "major third"):
| Step | Use | Size | rem |
|---|---|---|---|
| 5 | Heading 1 | 48.83px | 3.0518rem |
| 4 | Heading 2 | 39.06px | 2.4414rem |
| 3 | Heading 3 | 31.25px | 1.9531rem |
| 2 | Heading 4 | 25px | 1.5625rem |
| 1 | Heading 5 | 20px | 1.25rem |
| 0 | Body text | 16px | 1rem |
| −1 | Small text | 12.8px | 0.8rem |
| −2 | Captions | 10.24px | 0.64rem |
The working: 16 × 1.25 = 20, 20 × 1.25 = 25, 25 × 1.25 = 31.25, then 39.0625 and 48.828125. Downwards, 16 ÷ 1.25 = 12.8 and 12.8 ÷ 1.25 = 10.24. Change the ratio to 1.2 and the h1 drops to 39.81px; change it to 1.618 and it jumps to 177.42px, which is why the golden ratio is usually too steep for a six-level heading set on the web.
Which ratio to choose
The ratio names in the menu come from the frequency ratios of musical intervals, a convention popularised by type scale generator tools. Smaller ratios give a tight, bookish scale; larger ones give dramatic, poster-like headings.
| Ratio | Name | h1 from 16px | Good for |
|---|---|---|---|
| 1.067 | Minor second | 22.13px | Dense dashboards and documentation |
| 1.125 | Major second | 28.83px | Long-form reading, mobile-first sites |
| 1.200 | Minor third | 39.81px | General-purpose websites |
| 1.250 | Major third | 48.83px | Marketing pages, blogs |
| 1.333 | Perfect fourth | 67.34px | Landing pages with big headlines |
| 1.414 | Augmented fourth | 90.44px | Editorial and display-led design |
| 1.500 | Perfect fifth | 121.5px | Posters, slides |
| 1.618 | Golden ratio | 177.42px | Print and large-format work |
A common compromise is to use a small ratio on phones (1.125 or 1.2) and a bigger one on desktop (1.25 or 1.333), or to combine the scale with the fluid mode below so the headings grow with the screen. For a golden ratio font size scale that stays usable, start from a larger base (18 or 20px) and use only three or four steps; the golden ratio calculator covers the ratio itself.
Fluid typography calculator: a clamp() font size
Fixed breakpoints make text jump in size when the window crosses 768px or 1024px. A fluid font size grows continuously instead, using CSS clamp(minimum, preferred, maximum), where the preferred value mixes a rem part with a viewport-width (vw) part. Given a smallest size a at viewport width v1 and a largest size b at width v2:
- slope = (b − a) ÷ (v2 − v1) (pixels of font per pixel of viewport; × 100 gives the vw coefficient)
- intercept = a − slope × v1 (the fixed part, converted to rem by dividing by 16)
- font-size: clamp(a, intercept + slope × 100vw, b)
Example: 16px at 320px wide growing to 24px at 1280px wide. The slope is 8 ÷ 960 = 0.008333, so the vw part is 0.8333vw. The intercept is 16 − 0.008333 × 320 = 13.333px, or 0.8333rem. The rule is:
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
At a 768px viewport that resolves to 13.333 + 0.008333 × 768 = 19.73px; below 320px it stays at 16px and above 1280px at 24px. A second example, 18px at 400px to 32px at 1200px, gives clamp(1.125rem, 0.6875rem + 1.75vw, 2rem) and exactly 25px at an 800px viewport.
The rem part matters for accessibility: a font size written purely in vw ignores browser zoom and the user's font-size setting, which works against the WCAG requirement that text can be resized to 200%. Keeping a rem term in the preferred value means the text still scales with the user's preference. clamp() is supported by every current browser (MDN: clamp()). Used this way the fluid mode is a responsive font size calculator for the whole page: apply the same formula to each step of your type scale (small ratio at the narrow width, larger ratio at the wide width) and you have a complete responsive type system in a few lines of CSS.
Points to pixels: the font point size chart
Print and word processors measure type in points: 72 points make an inch. CSS pins a pixel at 1/96 of an inch, so 1pt = 96 ÷ 72 = 1.333px (CSS Values and Units: absolute lengths). That makes the 12pt default in a word processor the same as the 16px default in a browser.
| Points | CSS pixels | Inches | Millimetres | Where you see it |
|---|---|---|---|---|
| 8pt | 10.67px | 0.1111 in | 2.82 mm | Footnotes, legal small print |
| 9pt | 12px | 0.125 in | 3.18 mm | Captions |
| 10pt | 13.33px | 0.1389 in | 3.53 mm | Dense documents, spreadsheets |
| 10.5pt | 14px | 0.1458 in | 3.70 mm | Compact body text |
| 11pt | 14.67px | 0.1528 in | 3.88 mm | Common word-processor body size |
| 12pt | 16px | 0.1667 in | 4.23 mm | Classic document body text |
| 14pt | 18.67px | 0.1944 in | 4.94 mm | WCAG "large text" when bold |
| 18pt | 24px | 0.25 in | 6.35 mm | WCAG "large text"; subheadings |
| 24pt | 32px | 0.3333 in | 8.47 mm | Headings |
| 36pt | 48px | 0.5 in | 12.7 mm | Titles, slide headings |
| 72pt | 96px | 1 in | 25.4 mm | Posters: one inch per 72 points |
How tall is a size 14 font in inches? Nominally 14 ÷ 72 = 0.194 inches, about 4.9 mm, but that is the height of the em box (roughly from the top of the tallest ascender to the bottom of the lowest descender), not of the letters you see. Capital letters in most typefaces are around two thirds of the point size, so 14pt capitals are closer to 3.3 mm tall, and the exact figure depends on the font. The inches column is the one to use when you are sizing text for print or signage; when a design is for a screen, the physical size also depends on the display's pixel density, which the PPI calculator and pixels to inches converter work out.
Font size comparison across units and devices
The same "16px" is not the same size everywhere. On a 96 dpi desktop monitor it is one sixth of an inch, but CSS pixels are abstract: phones pack two or three device pixels into every CSS pixel, and the operating system scales the whole interface, so 16px text on a 6-inch phone is physically smaller than on a 24-inch monitor yet is read from closer. That is why a type scale is defined in CSS px or rem and left to the device to render, and why the body size most sites settle on is 16 to 18px for paragraphs with 1.5 line spacing. Headings get their size from the scale; anything below about 12px (0.75rem) should be rare and never used for text people must read.
