From 9d192d00d67e2f75271d52a7cadcfb155c1345a9 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Wed, 28 Feb 2018 06:17:18 +1000
Subject: [PATCH 1/2] fix: use px values for pretty text underline

---
 snippets/pretty-text-underline.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md
index e1a45c062..171fe9d80 100644
--- a/snippets/pretty-text-underline.md
+++ b/snippets/pretty-text-underline.md
@@ -14,13 +14,13 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 ```css
 .pretty-text-underline {
   display: inline;
-  font-size: 1.25rem;
+  font-size: 18px;
   text-shadow: 1px 1px 0 #f5f6f9,
     -1px 1px 0 #f5f6f9,
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -49,7 +49,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 1.04em;
+  background-position: 0 18px;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }

From 0971e0f45b9aa8895b93b8f00050e724ff99a79c Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Fri, 2 Mar 2018 20:08:04 +1000
Subject: [PATCH 2/2] Use Arial and 0.98em

---
 snippets/pretty-text-underline.md | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/snippets/pretty-text-underline.md b/snippets/pretty-text-underline.md
index 171fe9d80..aa768666c 100644
--- a/snippets/pretty-text-underline.md
+++ b/snippets/pretty-text-underline.md
@@ -13,6 +13,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 
 ```css
 .pretty-text-underline {
+  font-family: Arial, sans-serif;
   display: inline;
   font-size: 18px;
   text-shadow: 1px 1px 0 #f5f6f9,
@@ -20,7 +21,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 18px;
+  background-position: 0 0.98em;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -42,6 +43,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 
 <style>
 .snippet-demo__pretty-text-underline {
+  font-family: Arial, sans-serif;
   display: inline;
   font-size: 18px !important;
   text-shadow: 1px 1px 0 #f5f6f9,
@@ -49,7 +51,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
     -1px -1px 0 #f5f6f9,
     1px -1px 0 #f5f6f9;
   background-image: linear-gradient(90deg, currentColor 100%, transparent 100%);
-  background-position: 0 18px;
+  background-position: 0 0.98em;
   background-repeat: repeat-x;
   background-size: 1px 1px;
 }
@@ -78,7 +80,7 @@ Natively implemented as `text-decoration-skip-ink: auto` but it has less control
 
 #### Browser support
 
-<span class="snippet__support-note">⚠️ Firefox requires a vendor prefix for the selection pseudo-selector to work.</span>
+<span class="snippet__support-note">⚠️ The distance of the underline from the text depends on the internal metrics of a font, so you must ensure everyone sees the same font (i.e. no system fonts which will change based on the OS).</span>
 
 * https://caniuse.com/#feat=css-textshadow
 * https://caniuse.com/#feat=css-gradients