Stax

Font Size Converter

Convert CSS font sizes between px, rem, em, pt, vw, vh, and %.

UnitValueNotes
px16absolute pixels
rem1base 16px
em1parent 16px
pt12at 96 dpi
vw1.1111viewport 1440px wide
vh1.7778viewport 900px tall
%100parent 16px

Click any row to use that unit as the new input.

Settings (base font size, viewport, parent)
px
px
px
px

CSS units quick reference

  • px — absolute pixels; consistent but ignores user browser preferences
  • rem — relative to root font size (default 16px); best for accessible typography
  • em — relative to parent element font size; useful for component-scoped sizing
  • pt — print unit (1pt = 1/72 inch); use in print stylesheets
  • vw / vh — percentage of viewport width/height; good for fluid typography with CSS clamp()
  • % — percentage of parent font size; equivalent to em when used for font-size

Best practice: use rem for font sizes

The accessibility community recommends using rem units for font sizes so that users who have increased their browser’s default font size (a common accessibility need) will see text scale accordingly. Setting html { font-size: 62.5% } makes 1rem = 10px, simplifying the mental math: 1.6rem = 16px, 2.4rem = 24px.

Fluid typography with clamp()

Modern CSS allows fluid font sizes that scale between a minimum and maximum: font-size: clamp(1rem, 2.5vw, 2rem) means the font will be at least 1rem, grow with the viewport at 2.5vw, and cap at 2rem. Use this calculator to find the vw value that matches your target size at a given viewport.

Frequently asked questions

What is the difference between px and rem?
px (pixel) is an absolute unit — 16px is always 16 pixels regardless of context. rem (root em) is relative to the root element's font size, which defaults to 16px in browsers. 1rem = 16px by default, 2rem = 32px. rem is preferred for font sizes in responsive design because users can scale their browser's base font size for accessibility.
When should I use rem vs em?
Use rem for global font sizes, spacing, and layout — it stays consistent relative to the root. Use em for component-specific sizing that should scale with the component's own font size, such as padding inside a button. For example, padding: 0.5em means 'half the button's font size', which scales correctly if you change the font size.
How do I convert px to rem?
Divide the px value by the root font size (usually 16px). For example: 24px ÷ 16 = 1.5rem. If you change the root font size to 18px, then 1rem = 18px and 1.5rem = 27px. This calculator lets you set any base font size for accurate conversion.
What is the difference between vw/vh and %?
vw (viewport width) and vh (viewport height) are relative to the browser viewport dimensions. 1vw = 1% of the viewport width. % is relative to the parent element's value for that property. For font-size, 100% = the parent's font size. vw/vh units do not depend on the parent element and always refer to the browser window.
What is pt and when is it used?
pt (point) is a print unit: 1pt = 1/72 inch. At the standard screen resolution of 96 DPI, 1px = 0.75pt, so 16px = 12pt. Points are mainly used in print stylesheets (@media print), word processors, and PDF generation. For web typography, use px or rem instead.

Related tools