diff --git a/UNRELEASED-V4.md b/UNRELEASED-V4.md
index 0f8011d885c..257c808d86c 100644
--- a/UNRELEASED-V4.md
+++ b/UNRELEASED-V4.md
@@ -26,6 +26,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Updated translation.yml with the new locales path ([#1649](https://github.com/Shopify/polaris-react/pull/1649))
+- Fixed a bug that affected sizing and spacing of elements in some writing systems (notably Chinese, Japanese, and Korean) ([#1590](https://github.com/Shopify/polaris-react/pull/1590))
+- Fixed a bug when converting `em` units to `rem` units ([#1590](https://github.com/Shopify/polaris-react/pull/1590))
 
 ### Documentation
 
diff --git a/src/components/Sheet/README.md b/src/components/Sheet/README.md
index 154abe94cda..a9c40a87707 100644
--- a/src/components/Sheet/README.md
+++ b/src/components/Sheet/README.md
@@ -151,7 +151,7 @@ class SheetExample extends React.Component {
       : null;
 
     return (
-      <div style={{maxHeight: '640px', overflow: 'visible'}}>
+      <div style={{maxHeight: '40rem', overflow: 'visible'}}>
         <AppProvider
           theme={theme}
           i18n={{
@@ -205,7 +205,7 @@ class SheetExample extends React.Component {
                       borderBottom: '1px solid #DFE3E8',
                       display: 'flex',
                       justifyContent: 'space-between',
-                      padding: '1.6rem',
+                      padding: '1rem',
                       width: '100%',
                     }}
                   >
@@ -217,7 +217,7 @@ class SheetExample extends React.Component {
                       plain
                     />
                   </div>
-                  <Scrollable style={{padding: '1.6rem', height: '100%'}}>
+                  <Scrollable style={{padding: '1rem', height: '100%'}}>
                     <ChoiceList
                       title="Select a sales channel"
                       name="salesChannelsList"
@@ -234,7 +234,7 @@ class SheetExample extends React.Component {
                       borderTop: '1px solid #DFE3E8',
                       display: 'flex',
                       justifyContent: 'space-between',
-                      padding: '1.6rem',
+                      padding: '1rem',
                       width: '100%',
                     }}
                   >
diff --git a/src/styles/foundation/utilities.scss b/src/styles/foundation/utilities.scss
index 7a061337a30..3c91addb01a 100644
--- a/src/styles/foundation/utilities.scss
+++ b/src/styles/foundation/utilities.scss
@@ -1,8 +1,8 @@
-$default-browser-font-size: 16px;
-$base-font-size: 10px;
+$root-font-size: 16px;
 
-/// Returns the value in rem for a given pixel value.
-/// @param {Number} $value - The pixel value to be converted.
+/// Returns the value in rem for a given length value.
+/// Note: converting ems only works for elements that have had no font-size changes.
+/// @param {Number} $value - The value (em, rem, or px) to be converted.
 /// @return {Number} The converted value in rem.
 
 @function rem($value) {
@@ -13,15 +13,18 @@ $base-font-size: 10px;
   } @else if $unit == 'rem' {
     @return $value;
   } @else if $unit == 'px' {
-    @return $value / $base-font-size * 1rem;
+    // e.g. 16px × 1rem/16px = 1rem
+    @return $value * (1rem / $root-font-size);
   } @else if $unit == 'em' {
-    @return $unit / 1em * 1rem;
+    // This is a fudge; it assumes 1em == 1rem
+    @return $value / 1em * 1rem;
   } @else {
     @error 'Value must be in px, em, or rem.';
   }
 }
 
-/// Returns the value in pixels for a given rem value.
+/// Returns the value in pixels for a given length value.
+/// Note: converting ems only works for elements that have had no font-size changes.
 /// @param {Number} $value - The rem value to be converted.
 /// @return {Number} The converted value in pixels.
 
@@ -33,17 +36,20 @@ $base-font-size: 10px;
   } @else if $unit == 'px' {
     @return $value;
   } @else if $unit == 'em' {
-    @return ($value / 1em) * $base-font-size;
+    // This is a fudge; it assumes 1em == 1rem
+    // e.g. 1em × 16px/em = 16px
+    @return $value * ($root-font-size / 1em);
   } @else if $unit == 'rem' {
-    @return ($value / 1rem) * $base-font-size;
+    // e.g. 1rem × 16px/rem = 16px
+    @return $value * ($root-font-size / 1rem);
   } @else {
     @error 'Value must be in rem, em, or px.';
   }
 }
 
-/// Returns the value in ems for a given pixel value. Note that this
-/// only works for elements that have had no font-size changes.
-/// @param {Number} $value - The pixel value to be converted.
+/// Returns the value in ems for a given length value.
+/// Note: only works for elements that have had no font-size changes.
+/// @param {Number} $value - The value (em, rem, or px) to be converted.
 /// @return {Number} The converted value in ems.
 
 @function em($value) {
@@ -54,9 +60,12 @@ $base-font-size: 10px;
   } @else if $unit == 'em' {
     @return $value;
   } @else if $unit == 'rem' {
-    @return $value / 1rem * 1em * ($base-font-size / $default-browser-font-size);
+    // This is a fudge; it assumes 1em == 1rem
+    @return $value / 1rem * 1em;
   } @else if $unit == 'px' {
-    @return $value / $default-browser-font-size * 1em;
+    // This is a fudge; it assumes 1em == 1rem
+    // e.g. 14px × 1em/16px = 0.875em
+    @return $value * (1em / $root-font-size);
   } @else {
     @error 'Value must be in px, rem, or em.';
   }
diff --git a/src/styles/global/elements.scss b/src/styles/global/elements.scss
index cb216641cff..d8ca4a3b850 100644
--- a/src/styles/global/elements.scss
+++ b/src/styles/global/elements.scss
@@ -16,7 +16,7 @@ button {
 
 html {
   position: relative;
-  font-size: ($base-font-size / $default-browser-font-size) * 100%;
+  font-size: ($root-font-size / 16px) * 100%;
   -webkit-font-smoothing: antialiased;
 
   // This needs to come after -webkit-font-smoothing