Merge pull request #2678 from alphagov/replace-ex-with-em

Replace ex units with ems for input lengths

CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ### Fixes
 
-We’ve made fixes to GOV.UK Frontend in the following pull requests:
+In [pull request 2678: Replace ex units with ems for input lengths](https://github.com/alphagov/govuk-frontend/pull/2678), we changed how we define input lengths in our CSS. Browsers might now display these inputs as being slightly wider than before. The difference is usually fewer than 3 pixels.  
+
+We’ve also made fixes in the following pull requests:
 
 - [#2668: Fix Summary List action link alignment](https://github.com/alphagov/govuk-frontend/pull/2668)
 

src/govuk/components/input/_index.scss

@@ -59,36 +59,35 @@
     }
   }
 
-  // The ex measurements are based on the number of W's that can fit inside the input
-  // Extra space is left on the right hand side to allow for the Safari prefill icon
-  // Linear regression estimation based on visual tests: y = 1.76 + 1.81x
+  // em measurements are based on the point size of the typeface
+  // Extra space is added on the right hand side to allow for the Safari prefill icon
 
   .govuk-input--width-30 {
-    max-width: 56ex + 3ex;
+    max-width: 29.5em;
   }
 
   .govuk-input--width-20 {
-    max-width: 38ex + 3ex;
+    max-width: 20.5em;
   }
 
   .govuk-input--width-10 {
-    max-width: 20ex + 3ex;
+    max-width: 11.5em;
   }
 
   .govuk-input--width-5 {
-    max-width: 10.8ex;
+    max-width: 5.5em;
   }
 
   .govuk-input--width-4 {
-    max-width: 9ex;
+    max-width: 4.5em;
   }
 
   .govuk-input--width-3 {
-    max-width: 7.2ex;
+    max-width: 3.75em;
   }
 
   .govuk-input--width-2 {
-    max-width: 5.4ex;
+    max-width: 2.75em;
   }
 
   .govuk-input__wrapper {