Convert rem to em at any parent font size

Content last reviewed:

1.5rem is 1.2em inside a block with 20px text, because rem follows the html element while em follows the parent's font-size. With the default 16px in both fields, 1.5rem is simply 1.5em. Type your rem value, set both font sizes and the converter gives you the em value ready for your stylesheet.

rem
em

In font-size, em is based on the parent’s font-size. In padding, margin or width it is based on the element’s own font-size, so enter that value here instead.

to

Why convert rem to em?

Rem gives you the same size across the whole document, because it is measured from the html element. Em is measured from the element you use it on, and in the font-size property from the parent[1]. You convert rem to em when a size should follow the text of one part of the page rather than the whole site.

A button is the classic case. Write its padding in em and changing the button's font-size alone makes the whole button, gaps included, larger or smaller. On a button with 14px text, 1rem of padding is 1.1429em and 0.75rem is 0.8571em.

If the size in your design file is in pixels, go straight to the right unit with the px to em converter or the px to rem converter.

A column of text set line by line in individual pieces of lead type on a printing bed
This column of text is set line by line from individual pieces of lead type. Every piece has the same point size, and in typesetting that size is what one em measures. Photo: Etienne Girardet, Unsplash.

How do you convert rem to em? Formula and example

The formula reverses the em to rem route: em = rem × html font size ÷ parent font size. The first step gives you pixels and the second turns them into em.

Say your stylesheet has 1.5rem and you want the same size inside a block with 20px text. That is 1.5 × 16 = 24px, and 24 ÷ 20 = 1.2em. Inside a 24px block, 2rem comes to 1.3333em.

In the Parent font-size field, enter the font size the em should be measured from. For font-size that is the parent, and for padding, margin or width it is the element's own font size[1]. The Base font-size field is the html element. If your stylesheet has html { font-size: 62.5% }, type 62.5% and 1rem inside a 16px parent gives 0.625em.

How many em are common rem values?

The html element is 16px in every column while the parent changes. The columns match small print (12px), a button (14px) and two heading sizes.
Value in rem12px parent14px parent18px parent20px parent
0.25 rem0.3333 em0.2857 em0.2222 em0.2 em
0.5 rem0.6667 em0.5714 em0.4444 em0.4 em
0.625 rem0.8333 em0.7143 em0.5556 em0.5 em
0.75 rem1 em0.8571 em0.6667 em0.6 em
0.875 rem1.1667 em1 em0.7778 em0.7 em
1 rem1.3333 em1.1429 em0.8889 em0.8 em
1.125 rem1.5 em1.2857 em1 em0.9 em
1.25 rem1.6667 em1.4286 em1.1111 em1 em
1.5 rem2 em1.7143 em1.3333 em1.2 em
2 rem2.6667 em2.2857 em1.7778 em1.6 em
2.5 rem3.3333 em2.8571 em2.2222 em2 em
3 rem4 em3.4286 em2.6667 em2.4 em

Why are email templates written in em?

Email clients read CSS far less reliably than browsers. According to Can I email tests, about 69.05 percent of clients support the rem unit[2], while em works in every client with a test result[3].

Rem fails in every tested version of Outlook for Windows from 2003 to 2019, in the Windows Mail app, and in Yahoo Mail and AOL on the web, iOS and Android[2]. If your newsletter template was built in rem, convert its sizes to em before you send it.

Corner of a laptop screen showing a Gmail inbox with 152 messages in the Inbox folder
The laptop shows a Gmail inbox with 152 messages in the Inbox folder. Gmail reads both rem and em, but the same email also lands in clients that ignore rem. Photo: Justin Morgan, Unsplash.

Which email clients read rem, and which read em?

The table collects Can I email results for the clients your subscribers are most likely to use. Most of the tests were run in 2020.
Email clientremem
Outlook for Windows, 2003 to 2019Not supportedSupported
Windows MailNot supportedSupported
Outlook.com on the webSupportedSupported
Gmail on the web, Android and iOSSupportedSupported
Apple Mail on macOS and iOSSupportedSupported
Yahoo MailNot supportedSupported
AOLNot supportedSupported
ThunderbirdSupportedSupported
Samsung EmailSupportedSupported
The result covers the unit alone. Whether the whole template displays correctly also depends on other CSS properties, so send a test to the clients your subscribers use before the real send.

When will you convert rem to em?

  1. Newsletter template

    Sizes from your website written in rem move into the email in em, so Outlook for Windows does not drop them.

  2. Button in several sizes

    Padding and border radius in em grow with the button's text, so the small and large versions differ by a single font-size declaration.

  3. Icon next to text

    An icon with a width and height of 1em always matches the text it sits beside, in a paragraph or in a heading.

  4. Letter spacing

    Letter-spacing written in em, such as 0.05em, keeps the same proportion to the letters at every heading size.

Which number formats does this converter accept?

The field accepts and converts every one of these formats, so there is nothing to tidy up before you paste. The table shows what the converter does with each of them at the default 16px in both fields, and the results were calculated by the converter itself.
What you typeWhat the converter showsNote
1.51.5 emThe point is our decimal separator, so we read the number as one and a half.
1,51.5 emA comma followed by one digit is a European decimal comma, so a value copied from a colleague in Germany or France gives the same result.
font-size: 1.5rem;1.5 emYou can paste a whole declaration from your stylesheet, because we only take the number from it.
margin: -0.5rem;-0.5 emThe minus sign stays, since a negative margin in rem becomes a negative margin in em.
.8750.875 emA value without the leading zero, common in minified CSS, is read as 0.875.
3/40.75 emWe work out the fraction straight away, so there is no need to turn it into 0.75 first.
1½1.5 emThe ½ character is added to the number before it, so one and a half rem gives 1.5em.
1.5em1.5 emAn em value pasted into the rem field is converted to rem using both font-size fields, and a line under the field tells you so.
24px1.5 emPixels are divided by the html element's font size, so 24px at 16px lands in the field as 1.5rem, with a line under the field explaining the change.

Convert other units to em

px to em

Convert rem to other units

rem to px

Sources

  1. CSS Values and Units Module Level 4 — W3C
  2. rem unit — Can I email
  3. em unit — Can I email

Every figure in the tables was computed from the unit definitions and checked arithmetically before publication. Historical values and the names of local units come from the sources listed above.

Content last reviewed: · written and checked by the Arteon team

Frequently asked questions

Won't font-size in em cause trouble when elements are nested?

It can. A font-size in em is multiplied by the parent's font size, so an element set to 1.25em inside another element set to 1.25em ends up 1.5625 times the base size. That is why rem to em conversion is mostly used for a component's padding, margins and widths, while font sizes stay in rem.

Why does the Copy result button copy a number with a point?

CSS only accepts numbers with a decimal point. A browser throws away padding: 1,1429em but applies padding: 1.1429em, so the clipboard gets the CSS-ready number without the unit.

Can I just replace rem with em across my whole email template?

Only if you convert every value from the right font size. The same rem value gives one em value in the header and another in the footer, so swapping the unit in your editor without converting gives sizes that differ from the design.

Are my values sent to a server?

No. The whole calculation runs in your browser and the numbers you type never leave it.

Arteon free tool screenshot: Convert rem to em at any parent font size

Help us improve our tools

Have an idea for a feature, found a bug, or want to suggest another tool? Write to us.