Font Size Converter

Font size is measured differently depending on whether you're in print design, web development, or graphic software — and the units don't always mean what they look like they mean. A 12pt font in a word processor and a 12px font in a web browser are not the same size. Understanding why requires a brief trip into the history of type measurement, but the practical payoff is the ability to specify text sizes consistently across platforms.

Relative Units for Responsive Design

Modern web design uses relative font size units that scale appropriately across different device sizes and user preferences. Em, rem, percentage, and viewport units are all relative to some reference size rather than fixed physical dimensions.

Em: 1em equals the computed font size of the parent element. If a parent container has font-size: 16px and a child has font-size: 1.5em, the child renders at 24px. Em units are useful for padding and margin sizes that should scale with font size, but nested elements compound: a child with 1.5em inside a parent with 1.5em inside a container with 16px renders at 16 × 1.5 × 1.5 = 36px. This compounding can produce unexpected results.

Rem (root em): 1rem equals the font size of the root HTML element, regardless of nesting. If the root is 16px, 1.5rem is always 24px regardless of where it's used in the document. Rem units avoid the compounding problem of em units. Many designers set a base rem size (often 16px or 10px for calculation convenience) and express all font sizes as rem values.

Viewport units (vw, vh) size type relative to the viewport dimension. 1vw = 1% of viewport width. A font at 3vw appears at 3% of the current screen width — scaling smoothly on all screen sizes. This is useful for responsive headlines that should fill available width proportionally. A 3vw font on a 1440px wide screen is 43.2px; on a 375px mobile screen it's 11.25px — automatically appropriate for each context.

Related Calculators

• Screen Resolution Calculator
• Unit Converter
• Length & Distance Converter

Points, Picas, and the Print Tradition

The point is the traditional typographic unit, inherited from the age of physical metal type. In the modern DTP standard, 1 point (pt) = 1/72 inch. 1 pica = 12 points = 1/6 inch. These units come from the print world: a 12pt font (called "pica" historically) is 1/6 inch tall from the top of an ascender to the bottom of a descender — roughly 1/6 inch, in theory.

In practice, font "size" in points refers to the size of the metal block that held the letter in hot-metal typesetting, not the visible letter height. Two 12pt fonts from different typefaces might have very different apparent visual sizes because the design fills the block differently. A 12pt Garamond appears noticeably smaller than 12pt Impact at the same declared size. This is a persistent source of confusion that has no clean resolution — font size in points is a nominal measurement, not a direct measurement of visible letter height.

Microsoft Word's default body text at 11pt or 12pt is a convention from the print world. Professional typography for body text typically falls in the 9pt to 12pt range depending on the typeface and line length. Display fonts (headlines) in print are set at 18pt to 72pt and above.

Accessible Font Size Guidelines

Web Content Accessibility Guidelines (WCAG) recommend minimum body text sizes of 14pt (18.7px) for normal text and 18pt (24px) for large text in accessibility calculations for contrast ratios. Many UX designers recommend even larger defaults — 16px (12pt) minimum for body text, with 18px to 20px common in modern interfaces.

The average reading distance affects legible font size. Text on a desktop monitor at 24 inches: 16px body text is readable. Text on a large-format display viewed from 10 feet: dramatically larger pixel sizes are needed for readability. Text at the top of a presentation slide needs to be large enough for the back of the room. A basic rule: in presentations, nothing should be smaller than 28pt; 32pt and above is safer for large venues.

Mobile design specifically requires larger minimum font sizes because viewing distance is closer but screens are smaller and text often shares space with more interface elements. iOS Human Interface Guidelines recommend minimum body text of 17pt. Google's Material Design guidelines suggest 16sp (scale-independent pixels, similar to dp) for body text on Android.

CSS Pixels and the Web

The web uses pixels (px) as a common font size unit, but a CSS pixel is not necessarily a physical pixel on the device. On standard displays (96 DPI), 1 CSS pixel = 1 physical pixel = 1/96 inch. On retina/high-DPI displays, 1 CSS pixel = 2 or more physical pixels, but it still represents the same visual size because the browser renders at the physical resolution for sharpness.

The point-to-pixel conversion depends on this 96 DPI assumption: 1 point = 1/72 inch, and at 96 DPI, 1 inch = 96 pixels. So 1 point = 96/72 pixels = 1.333... pixels. 12pt = 16px. 10pt ≈ 13.3px. 14pt ≈ 18.7px. This is why 16px is such a ubiquitous browser default font size — it equals 12pt in the print world's standard body text size.

CSS also supports points (pt), inches (in), centimeters (cm), and other units for font sizing. These are all absolute units that map to specific pixel sizes: 12pt = 16px, 1in = 96px, 1cm = 37.8px. However, using absolute units in web CSS is generally discouraged for body text because it overrides user font size preferences in the browser — a real accessibility issue for users who've enlarged their base font size.

Converting Between Font Size Units

The key conversions: Pixels to points: px ÷ 1.333 = pt (or equivalently, px × 0.75 = pt). Points to pixels: pt × 1.333 = px. Pixels to em/rem: divide by the base font size (often 16px). 24px = 24÷16 = 1.5em.

Quick reference table for common font sizes: 10pt = 13.3px ≈ 0.83rem, 11pt = 14.7px ≈ 0.92rem, 12pt = 16px = 1rem, 14pt = 18.7px ≈ 1.17rem, 16pt = 21.3px ≈ 1.33rem, 18pt = 24px = 1.5rem, 24pt = 32px = 2rem, 36pt = 48px = 3rem, 48pt = 64px = 4rem, 72pt = 96px = 6rem.

Typography Hierarchy and Size Scales

Effective typography uses a consistent size scale that creates clear hierarchy. Common approaches: modular scale (each level multiplied by a fixed ratio like 1.25 or 1.333), major second scale (×1.125), perfect fourth scale (×1.333), golden ratio scale (×1.618). These create visually harmonious proportional relationships between heading and body sizes.

Using a 1.25 (major third) scale with a 16px base: body = 16px, h3 = 20px, h2 = 25px, h1 = 31.25px. In rem: body = 1rem, h3 = 1.25rem, h2 = 1.563rem, h1 = 1.953rem. This approach ensures heading sizes feel proportionally related rather than arbitrary — a subtle but real contributor to professional visual design quality.