px, rem and em converter

The field is empty: paste your styles here, and the converted snippet will appear on the right.

• 1–2 px — border thickness and focus outline. Do not convert them to rem: a line should not thicken with the text.
• 4 px — small radius, gap between an icon and its label, fine spacing adjustment increment.
• 8 px — base spacing grid increment in most layouts; 4, 12, 16, and 24 are also its multiples.
• 12–14 px — captions, footnotes, system text. Do not go below 12 px: it is already unreadable on a phone.
• 16 px — body text. This is exactly what browsers use by default, and exactly what 1rem will be.
• 24–32 px — H3 and H2 headings, spacing between blocks within a section.
• 40–64 px — H1 heading on desktop and spacing between sections.
• 72–96 px — whitespace between large landing page sections; on mobile, such spacing is usually cut in half.

How to use it

1. Choose the base font size with a button or enter your own. If you have not overridden the font-size of html, leave it at 16 px—that is what browsers use.

2. Then edit any of the five fields. If you know the size from a design, enter pixels. If you are reading someone else's CSS and want to understand its actual size, enter rem, em, or percentages, and the pixel value will be calculated automatically.

3. Read the “what the reader will see” line as an accessibility check: it includes the full range of browser font-size settings, not just one step. The “How it looks” section shows the same thing visually.

4. If you need more than one size and the entire file, paste a piece of CSS into the “Recalculate an entire piece of CSS” section. The borders and shadows checkbox leaves in pixels anything that would be harmful to convert to rem.

5. The table of common sizes is recalculated for the selected base. Clicking a value copies it; the button next to it exports the entire table as --size-* variables or a file.

6. The “Copy link” button puts all fields into the URL. You can send the link in a chat, and your colleague will see the same calculation. The settings are also saved in the browser until next time.

The formula and what it includes

• Base font size — font-size of the html element; rem is calculated from this and only this
• Parent font size — font-size of the nearest parent; em and percentages are calculated from this
• Percentages — the same as em, multiplied by one hundred: 1.2em and 120% produce the same result
• Points — in CSS, one inch equals 96 px and 72 pt, so one pixel is exactly 0.75 pt
• vw and vh — the percentage of the viewport's width and height; vmin uses the smaller of the two sides
• clamp — a lower limit, a straight line between two widths, and an upper limit—three arguments instead of three media queries

Example breakdown: 24 px with a 16 px base

The input data is the same as the default field values: you can calculate it mentally and confirm that the tool is telling the truth.

• Size from the design: 24 px
• Page base font size: 16 px
• Parent font size: 20 px
• Screen width: 1440 px; narrow screen: 375 px

1. In rem: 24 ÷ 16 = 1.5.

2. In em: 24 ÷ 20 = 1.2. The percentage is the same: 1.2 × 100 = 120%.

3. In points: 24 × 0.75 = 18 pt. In vw at a width of 1440: 24 ÷ 1440 × 100 = 1.66667.

4. If the reader increases the base font size to 20 px, an element set in rem will become 1.5 × 20 = 30 px, and at 24 px it will become 36 px.

5. The reverse: to find out how many pixels are in 1.375rem, enter this number in the rem field—it will produce 22 px.

24 px with a 16 px base equals 1.5 rem. In styles: font-size: 1.5rem.

Frequently asked questions

• How do I calculate the reverse: how many pixels are in 1.375rem?

  Enter 1.375 in the “rem” field—the “Pixels” field will recalculate automatically. All five fields are interchangeable: any of them can be the source, including em, percentages, and points.

• Why use a period instead of a comma as the separator?

  Because the result is copied into styles, and CSS only understands a period. The notation 1,5rem is a syntax error, so the entire rule will be discarded. A comma is allowed in the input field; it will be replaced for you.

• How is rem different from em?

  As the reference point. rem is always calculated from the font-size of the html element, while em is calculated from the font-size of the nearest parent. That is why em compounds with nesting: three nested blocks at 1.2em produce 1.728 times the original size, while three nested blocks at 1.2rem are each exactly 1.2 times the base size.

• What is wrong with the font-size: 62.5% technique?

  It sets the base font size to 10 px, so 1.6rem reads as 16 px. But someone who increases the font size in their browser settings will get the same 62.5% of their chosen value—in other words, the text will still be smaller than requested. Mental calculations are easier, but reading the site becomes harder. The preset is available here, but the button includes a warning.

• What exactly changes when recalculating a piece of CSS?

  Only numbers with the px unit inside declarations: padding, font-size, gap, and so on. Widths in @media and @container remain in pixels—there, px means the viewport width rather than the font size, and converting it to rem would change the condition's meaning. Text in quotes and URLs in url() are also left untouched. The “leave borders, outlines, shadows, and radii smaller than 4 px in px” checkbox applies to the border*, outline*, box-shadow, and text-shadow properties.

• Where are pixels more appropriate than rem?

  Values that should not grow with the text: border thickness, shadow offset and blur, and small corner radii. A 1 px border should remain a border when the font size increases, not turn into a frame.

• Why use points on the web?

  Almost nowhere: pt is useful for print styles, where physical size matters. In a browser, pt is converted to pixels anyway using the formula 1 pt = 96 ÷ 72 px, so there is no benefit, and familiar sizes become harder to read at a glance.

• Can I set the font size in vw?

  Not with vw alone. A size set only in viewport units does not respond to the browser's font-size setting, so someone with poor vision will not be able to enlarge the text. The practical option is clamp() with a rem component: the line from here is built that way, and you can break it down into a scale and check it against WCAG in the clamp() generator.

• Is any data sent anywhere?

  No. The browser does all the calculations: after the page loads, it makes no requests, the inserted CSS stays on your device, and files are built there as well. Settings (base font size, parent font size, screen sizes, and checkboxes) are stored in your browser's localStorage so you do not have to enter them every time.