<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/mdn/css-examples/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 2bad398715b6a34acc5be8f1e923b36df5be95da Mon Sep 17 00:00:00 2001
From: Jason Pamental <jason@rwt.io>
Date: Tue, 28 Aug 2018 09:34:57 -0400
Subject: [PATCH] Updates to widths and spacing

---
 variable-fonts/grade.html          |  52 ++++----
 variable-fonts/italic.html         |  72 +++++------
 variable-fonts/optical-sizing.html | 102 +++++++--------
 variable-fonts/sample-page.html    | 198 ++++++++++++++---------------
 variable-fonts/slant.html          |  72 +++++------
 variable-fonts/weight.html         |  90 ++++++-------
 variable-fonts/width.html          |  76 +++++------
 7 files changed, 331 insertions(+), 331 deletions(-)

diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html
index bf5d9cc0..6234da04 100644
--- a/variable-fonts/grade.html
+++ b/variable-fonts/grade.html
@@ -35,8 +35,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(28rem,1fr));
-        grid-gap: 2rem;
+        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -96,7 +96,7 @@
     }
   </style>
   <style class="editable2">

-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container2 * {
       font-size: 64px;
       font-variation-settings: 'GRAD' var(--text-axis);
@@ -112,17 +112,17 @@
             <p>Grade</p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        /* grade (GRAD) range is 88 (default) up to 150 */
-        .container1 * {
-          font-size: 64px;
-          font-variation-settings: 'GRAD' 88;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <p>Grade</p>
-        </div>
+<textarea class="playable-css1">
+  /* grade (GRAD) range is 88 (default) up to 150 */
+  .container1 * {
+    font-size: 64px;
+    font-variation-settings: 'GRAD' 88;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <p>Grade</p>
+  </div>
       </textarea>
     </div>
     <div class="demo2">
@@ -131,18 +131,18 @@
             <p>Grade</p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        /* Adjusted with slider and custom property */
-        .container2 * {
-          font-size: 64px;
-          font-variation-settings: 'GRAD' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <p>Grade</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  /* Adjust with slider & custom property */
+  .container2 * {
+    font-size: 64px;
+    font-variation-settings: 'GRAD' var(--text-axis);
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <p>Grade</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
         <label for="controls__slider">Adjust Grade: </label><input type="range" name="range-slider" value="88" id="text-axis" class="controls--slider" min="88" max="150"> 
       </div>
diff --git a/variable-fonts/italic.html b/variable-fonts/italic.html
index bfaccb34..d3e51093 100644
--- a/variable-fonts/italic.html
+++ b/variable-fonts/italic.html
@@ -35,8 +35,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -103,7 +103,7 @@
     }
   </style>
   <style class="editable3">

-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container3 * {
       font-variation-settings: 'ital' var(--text-axis);
     }
@@ -118,17 +118,17 @@
             <p>Italic</p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        /* italic can only be italic or normal */
-        .container1 * {
-          font-style: italic;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <p>Italic</p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">
+  /* italic can only be italic or normal */
+  .container1 * {
+    font-style: italic;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <p>Italic</p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
@@ -136,17 +136,17 @@
             <p>Italic</p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        /* italic can only be italic or normal */
-        .container2 * {
-          font-variation-settings: 'ital' 1;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <p>Italic</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  /* italic can only be italic or normal */
+  .container2 * {
+    font-variation-settings: 'ital' 1;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <p>Italic</p>
+  </div>
+</textarea>
     </div>
     <div class="demo3">
       <section class="section section3">
@@ -154,17 +154,17 @@
             <p>Italic</p>
         </div>
       </section>
-      <textarea class="playable-css3">
-        /* Adjusted with slider and custom property */
-        .container3 * {
-          font-variation-settings: 'ital' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code3" class="playable-html3">
-        <div class="container container3">
-          <p>Italic</p>
-        </div>
-      </textarea>
+<textarea class="playable-css3">
+  /* Adjust with slider & custom property */
+  .container3 * {
+    font-variation-settings: 'ital' var(--text-axis);
+  }
+</textarea>
+<textarea id="code3" class="playable-html3">
+  <div class="container container3">
+    <p>Italic</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
         <label for="controls__slider">Adjust Italic: </label><input type="range" name="range-slider" value="1" id="text-axis" class="controls--slider" min="0" max="1"> 
       </div>
diff --git a/variable-fonts/optical-sizing.html b/variable-fonts/optical-sizing.html
index fa4929b7..efb8fecb 100644
--- a/variable-fonts/optical-sizing.html
+++ b/variable-fonts/optical-sizing.html
@@ -35,8 +35,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(29rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -111,7 +111,7 @@
     }
   </style>
   <style class="editable3">

-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container3 * {
       font-size: 64px;
       font-variation-settings: 'opsz' var(--text-axis);
@@ -127,18 +127,18 @@
             <p>Optical Size</p>
         </div>
       </section>
-      <textarea class="playable-css0">
-        /* font-optical-sizing can be auto or none */
-        .container0 * {
-          font-size: 64px;
-          font-optical-sizing: none;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html0">
-        <div class="container container0">
-          <p>Optical Size</p>
-        </div>
-      </textarea>
+<textarea class="playable-css0">
+  /* font-optical-sizing can be auto or none */
+  .container0 * {
+    font-size: 64px;
+    font-optical-sizing: none;
+  }
+</textarea>
+<textarea id="code1" class="playable-html0">
+  <div class="container container0">
+    <p>Optical Size</p>
+  </div>
+</textarea>
     </div>
     <div class="demo1">
       <section class="section section1">
@@ -146,18 +146,18 @@
             <p>Optical Size</p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        /* font-optical-sizing can be auto or none */
-        .container1 * {
-          font-size: 64px;
-          font-optical-sizing: auto;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <p>Optical Size</p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">
+  /* font-optical-sizing can be auto or none */
+  .container1 * {
+    font-size: 64px;
+    font-optical-sizing: auto;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <p>Optical Size</p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
@@ -165,18 +165,18 @@
             <p>Optical Size</p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        /* optical size range is from 8 to 144 */
-        .container2 * {
-          font-size: 64px;
-          font-variation-settings: 'opsz' 64;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <p>Optical Size</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  /* optical size range is from 8 to 144 */
+  .container2 * {
+    font-size: 64px;
+    font-variation-settings: 'opsz' 64;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <p>Optical Size</p>
+  </div>
+</textarea>
     </div>
     <div class="demo3">
       <section class="section section3">
@@ -184,18 +184,18 @@
             <p>Optical Size</p>
         </div>
       </section>
-      <textarea class="playable-css3">
-        /* Adjusted with slider and custom property */
-        .container3 * {
-          font-size: 64px;
-          font-variation-settings: 'opsz' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code3" class="playable-html3">
-        <div class="container container3">
-          <p>Optical Size</p>
-        </div>
-      </textarea>
+<textarea class="playable-css3">
+  /* Adjust with slider & custom property */
+  .container3 * {
+    font-size: 64px;
+    font-variation-settings: 'opsz' var(--text-axis);
+  }
+</textarea>
+<textarea id="code3" class="playable-html3">
+  <div class="container container3">
+    <p>Optical Size</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
         <label for="controls__slider">Adjust Optical Sizing: </label><input type="range" name="range-slider" value="64" id="text-axis" class="controls--slider" min="8" max="144"> 
       </div>
diff --git a/variable-fonts/sample-page.html b/variable-fonts/sample-page.html
index fae53b9f..0cb459cb 100644
--- a/variable-fonts/sample-page.html
+++ b/variable-fonts/sample-page.html
@@ -163,56 +163,56 @@ <h2>CHAPTER 1. Loomings.</h2>
           </p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        .container1 h1 {
-          font-optical-sizing: auto;
-          font-size: 5rem;
-          font-stretch: 85%;
-          font-weight: 450;
-        }
-        .container1 h2 {
-          font-optical-sizing: auto;
-          font-size: 2.25rem;
-          font-stretch: 90%;
-          font-weight: 575;
-        }
-        .container1 p {
-          font-optical-sizing: auto;
-          font-size: 1rem;
-          font-stretch: 100%;
-          font-weight: 375;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <h1>Moby Dick</h1>
-          <h2>CHAPTER 1. Loomings.</h2>
-          <p>
-            Call me Ishmael. Some years ago—never mind how long precisely–having
-            little or no money in my purse, and nothing particular to interest me on
-            shore, I thought I would sail about a little and see the watery part of
-            the world. It is a way I have of driving off the spleen and regulating the
-            circulation. Whenever I find myself growing grim about the mouth; whenever
-            it is a damp, drizzly November in my soul; whenever I find myself
-            involuntarily pausing before coffin warehouses, and bringing up the rear
-            of every funeral I meet; and especially whenever my hypos get such an
-            upper hand of me, that it requires a strong moral principle to prevent me
-            from deliberately stepping into the street, and methodically knocking
-            people’s hats off then, I account it high time to get to sea as soon
-            as I can. This is my substitute for pistol and ball. With a philosophical
-            flourish Cato throws himself upon his sword; I quietly take to the ship.
-            There is nothing surprising in this. If they but knew it, almost all men
-            in their degree, some time or other, cherish very nearly the same feelings
-            towards the ocean with me.
-          </p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">
+  .container1 h1 {
+    font-optical-sizing: auto;
+    font-size: 5rem;
+    font-stretch: 85%;
+    font-weight: 450;
+  }
+  .container1 h2 {
+    font-optical-sizing: auto;
+    font-size: 2.25rem;
+    font-stretch: 90%;
+    font-weight: 575;
+  }
+  .container1 p {
+    font-optical-sizing: auto;
+    font-size: 1rem;
+    font-stretch: 100%;
+    font-weight: 375;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <h1>Moby Dick</h1>
+    <h2>CHAPTER 1. Loomings.</h2>
+    <p>
+      Call me Ishmael. Some years ago—never mind how long precisely–having
+      little or no money in my purse, and nothing particular to interest me on
+      shore, I thought I would sail about a little and see the watery part of
+      the world. It is a way I have of driving off the spleen and regulating the
+      circulation. Whenever I find myself growing grim about the mouth; whenever
+      it is a damp, drizzly November in my soul; whenever I find myself
+      involuntarily pausing before coffin warehouses, and bringing up the rear
+      of every funeral I meet; and especially whenever my hypos get such an
+      upper hand of me, that it requires a strong moral principle to prevent me
+      from deliberately stepping into the street, and methodically knocking
+      people’s hats off then, I account it high time to get to sea as soon
+      as I can. This is my substitute for pistol and ball. With a philosophical
+      flourish Cato throws himself upon his sword; I quietly take to the ship.
+      There is nothing surprising in this. If they but knew it, almost all men
+      in their degree, some time or other, cherish very nearly the same feelings
+      towards the ocean with me.
+    </p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
         <div class="container container2">
           <h1>Moby Dick</h1>
-          <h2>CHAPTER 1. Loomings. (hover here)</h2>
+          <h2>CHAPTER 1. (hover here)</h2>
           <p>
             Call me Ishmael. Some years ago—never mind how long precisely–having
             little or no money in my purse, and nothing particular to interest me on
@@ -233,60 +233,60 @@ <h2>CHAPTER 1. Loomings. (hover here)</h2>
           </p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        .demo2 {
-          --text-wght: 375;
-          --text-wdth: 100;
-          --text-opsz: 16;
-          --text-GRAD: 88;
-        }
-        .container2 > * {
-          font-size: 5rem;
-          font-variation-settings: 'wght' var(--text-wght), 'wdth' var(--text-wdth), 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
-        }
-        .container2 h1 {
-          --text-wght: 450;
-          --text-wdth: 85;
-          --text-opsz: 80;
-          font-size: 5rem;
-        }
-        .container2 h2 {
-          --text-wght: 575;
-          --text-wdth: 95;
-          --text-opsz: 36;
-          font-size: 2.25rem;
-        }
-        .container2 h2:hover {
-          --text-GRAD: 130;
-        }
-        .container2 p {
-          font-size: 1rem;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <h1>Moby Dick</h1>
-          <h2>CHAPTER 1. Loomings. (hover here)</h2>
-          <p>
-            Call me Ishmael. Some years ago—never mind how long precisely–having
-            little or no money in my purse, and nothing particular to interest me on
-            shore, I thought I would sail about a little and see the watery part of
-            the world. It is a way I have of driving off the spleen and regulating the
-            circulation. Whenever I find myself growing grim about the mouth; whenever
-            it is a damp, drizzly November in my soul; whenever I find myself
-            involuntarily pausing before coffin warehouses, and bringing up the rear
-            of every funeral I meet; and especially whenever my hypos get such an
-            upper hand of me, that it requires a strong moral principle to prevent me
-            from deliberately stepping into the street, and methodically knocking
-            people’s hats off then, I account it high time to get to sea as soon
-            as I can. This is my substitute for pistol and ball. With a philosophical
-            flourish Cato throws himself upon his sword; I quietly take to the ship.
-            There is nothing surprising in this. If they but knew it, almost all men
-            in their degree, some time or other, cherish very nearly the same feelings
-            towards the ocean with me.
-          </p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  .demo2 {
+    --text-wght: 375;
+    --text-wdth: 100;
+    --text-opsz: 16;
+    --text-GRAD: 88;
+  }
+  .container2 > * {
+    font-size: 5rem;
+    font-variation-settings: 'wght' var(--text-wght), 'wdth' var(--text-wdth), 'opsz' var(--text-opsz), 'GRAD' var(--text-GRAD);
+  }
+  .container2 h1 {
+    --text-wght: 450;
+    --text-wdth: 85;
+    --text-opsz: 80;
+    font-size: 5rem;
+  }
+  .container2 h2 {
+    --text-wght: 575;
+    --text-wdth: 95;
+    --text-opsz: 36;
+    font-size: 2.25rem;
+  }
+  .container2 h2:hover {
+    --text-GRAD: 130;
+  }
+  .container2 p {
+    font-size: 1rem;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <h1>Moby Dick</h1>
+    <h2>CHAPTER 1. (hover here)</h2>
+    <p>
+      Call me Ishmael. Some years ago—never mind how long precisely–having
+      little or no money in my purse, and nothing particular to interest me on
+      shore, I thought I would sail about a little and see the watery part of
+      the world. It is a way I have of driving off the spleen and regulating the
+      circulation. Whenever I find myself growing grim about the mouth; whenever
+      it is a damp, drizzly November in my soul; whenever I find myself
+      involuntarily pausing before coffin warehouses, and bringing up the rear
+      of every funeral I meet; and especially whenever my hypos get such an
+      upper hand of me, that it requires a strong moral principle to prevent me
+      from deliberately stepping into the street, and methodically knocking
+      people’s hats off then, I account it high time to get to sea as soon
+      as I can. This is my substitute for pistol and ball. With a philosophical
+      flourish Cato throws himself upon his sword; I quietly take to the ship.
+      There is nothing surprising in this. If they but knew it, almost all men
+      in their degree, some time or other, cherish very nearly the same feelings
+      towards the ocean with me.
+    </p>
+  </div>
+</textarea>
     </div>
   </div>
   <div class="playable-buttons">
diff --git a/variable-fonts/slant.html b/variable-fonts/slant.html
index 2634fb5f..08a9f8ed 100644
--- a/variable-fonts/slant.html
+++ b/variable-fonts/slant.html
@@ -35,8 +35,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -104,7 +104,7 @@
     }
   </style>
   <style class="editable3">

-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container3 * {
       font-variation-settings: 'slnt' var(--text-axis);
     }
@@ -119,17 +119,17 @@
             <p>Slant</p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        /* slant range is from 0deg to 12deg */
-        .container1 * {
-          font-style: oblique 0deg;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <p>Slant</p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">
+  /* slant range is from 0deg to 12deg */
+  .container1 * {
+    font-style: oblique 0deg;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <p>Slant</p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
@@ -137,17 +137,17 @@
             <p>Slant</p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        /* slant range is from 0 to 12 */
-        .container2 * {
-          font-variation-settings: 'slnt' 0;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <p>Slant</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  /* slant range is from 0 to 12 */
+  .container2 * {
+    font-variation-settings: 'slnt' 0;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <p>Slant</p>
+  </div>
+</textarea>
     </div>
     <div class="demo3">
       <section class="section section3">
@@ -155,17 +155,17 @@
             <p>Slant</p>
         </div>
       </section>
-      <textarea class="playable-css3">
-        /* Adjusted with slider and custom property */
-        .container3 * {
-          font-variation-settings: 'slnt' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code3" class="playable-html3">
-        <div class="container container3">
-          <p>Slant</p>
-        </div>
-      </textarea>
+<textarea class="playable-css3">
+  /* Adjust with slider & custom property */
+  .container3 * {
+    font-variation-settings: 'slnt' var(--text-axis);
+  }
+</textarea>
+<textarea id="code3" class="playable-html3">
+  <div class="container container3">
+    <p>Slant</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
         <label for="controls__slider">Adjust Slant: </label><input type="range" name="range-slider" value="0" id="text-axis" class="controls--slider" min="0" max="12"> 
       </div>
diff --git a/variable-fonts/weight.html b/variable-fonts/weight.html
index f8cfd8e6..c2c2ee87 100644
--- a/variable-fonts/weight.html
+++ b/variable-fonts/weight.html
@@ -43,8 +43,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -89,29 +89,29 @@
     }
 
     .container * {
-      font-size: 4rem;
+      font-size: 3rem;
       margin: 1.5rem 0;
     }
 
     .demo3 {
-      --text-axis: 675;
+      --text-axis: 625;
     }
 
   </style>
   <style class="editable1">

-    /* weight range is from 300 to 900 */
+    /* weight range is 300 to 900 */
     .container1 * {
-      font-weight: 675;
+      font-weight: 625;
     }
   </style>
   <style class="editable2">

-    /* weight range is from 300 to 900 */
+    /* weight range is 300 to 900 */
     .container2 * {
-      font-variation-settings: 'wght' 675;
+      font-variation-settings: 'wght' 625;
     }
   </style>
   <style class="editable3">

-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container3 * {
       font-variation-settings: 'wght' var(--text-axis);
     }
@@ -126,17 +126,17 @@
             <p>Weight</p>
         </div>
       </section>
-      <textarea class="playable-css1">
-        /* weight range is from 300 to 900 */
-        .container1 * {
-          font-weight: 675;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">
-        <div class="container container1">
-          <p>Weight</p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">
+  /* weight range is 300 to 900 */
+  .container1 * {
+    font-weight: 625;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">
+  <div class="container container1">
+    <p>Weight</p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
@@ -144,17 +144,17 @@
             <p>Weight</p>
         </div>
       </section>
-      <textarea class="playable-css2">
-        /* weight range is from 300 to 900 */
-        .container2 * {
-          font-variation-settings: 'wght' 675;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">
-        <div class="container container2">
-          <p>Weight</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">
+  /* weight range is 300 to 900 */
+  .container2 * {
+    font-variation-settings: 'wght' 625;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">
+  <div class="container container2">
+    <p>Weight</p>
+  </div>
+</textarea>
     </div>
     <div class="demo3">
       <section class="section section3">
@@ -162,19 +162,19 @@
             <p>Weight</p>
         </div>
       </section>
-      <textarea class="playable-css3">
-        /* Adjusted with slider and custom property */
-        .container3 * {
-          font-variation-settings: 'wght' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code3" class="playable-html3">
-        <div class="container container3">
-          <p>Weight</p>
-        </div>
-      </textarea>
+<textarea class="playable-css3">
+  /* Adjust with slider & custom property */
+  .container3 * {
+    font-variation-settings: 'wght' var(--text-axis);
+  }
+</textarea>
+<textarea id="code3" class="playable-html3">
+  <div class="container container3">
+    <p>Weight</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
-        <label for="controls__slider">Adjust Weight: </label><input type="range" name="range-slider" value="675" id="text-axis" class="controls--slider" min="300" max="900"> 
+        <label for="controls__slider">Adjust Weight: </label><input type="range" name="range-slider" value="625" id="text-axis" class="controls--slider" min="300" max="900"> 
       </div>
     </div>
   </div>
@@ -211,8 +211,8 @@
     section2.innerHTML = textareaHTML2.value;
     editable3.innerHTML = textareaCSS3.value;
     section3.innerHTML = textareaHTML3.value;
-    rangeinput.value = 675;
-    document.querySelector('.demo3').style.setProperty('--text-axis', 675);
+    rangeinput.value = 625;
+    document.querySelector('.demo3').style.setProperty('--text-axis', 625);
   }
 
   reset.addEventListener('click', function () {
diff --git a/variable-fonts/width.html b/variable-fonts/width.html
index a8632b62..aa7c3246 100644
--- a/variable-fonts/width.html
+++ b/variable-fonts/width.html
@@ -43,8 +43,8 @@
     .wrapper {
       width: 100%;
         display: grid;
-        grid-template-columns: repeat(auto-fill,minmax(22rem,1fr));
-        grid-gap: 1.5rem;
+        grid-template-columns: repeat(auto-fill,minmax(15rem,1fr));
+        grid-gap: 1rem;
     }
 
     textarea {
@@ -99,19 +99,19 @@
 
   </style>
   <style class="editable1">

-    /* width range is from 75 to 150 */
+    /* width range is 75 to 150 */
     .container1 * {
       font-stretch: 100;
     }
   </style>
   <style class="editable2">

-    /* width range is from 75 to 150 */
+    /* width range is an integer from 75 to 150 */
     .container2 * {
       font-variation-settings: 'wdth' 100;
     }
   </style>
   <style class="editable3">
</style>
-    /* Adjusted with slider and custom property */
+    /* Adjust with slider & custom property */
     .container3 * {
       font-variation-settings: 'wdth' var(--text-axis);
     }
@@ -126,17 +126,17 @@
             <p>Width</p>
         </div>
       </section>
-      <textarea class="playable-css1">-        /* width range is from 75% to 150% */
-        .container1 * {
-          font-stretch: 100%;
-        }
-      </textarea>
-      <textarea id="code1" class="playable-html1">-        <div class="container container1">
-          <p>Width</p>
-        </div>
-      </textarea>
+<textarea class="playable-css1">+  /* width range is from 75% to 150% */
+  .container1 * {
+    font-stretch: 100%;
+  }
+</textarea>
+<textarea id="code1" class="playable-html1">+  <div class="container container1">
+    <p>Width</p>
+  </div>
+</textarea>
     </div>
     <div class="demo2">
       <section class="section section2">
@@ -144,17 +144,17 @@
             <p>Width</p>
         </div>
       </section>
-      <textarea class="playable-css2">-        /* width range is an integer from 75 to 150 */
-        .container2 * {
-          font-variation-settings: 'wdth' 100;
-        }
-      </textarea>
-      <textarea id="code2" class="playable-html2">-        <div class="container container2">
-          <p>Width</p>
-        </div>
-      </textarea>
+<textarea class="playable-css2">+  /* width range is an integer from 75 to 150 */
+  .container2 * {
+    font-variation-settings: 'wdth' 100;
+  }
+</textarea>
+<textarea id="code2" class="playable-html2">+  <div class="container container2">
+    <p>Width</p>
+  </div>
+</textarea>
     </div>
     <div class="demo3">
       <section class="section section3">
@@ -162,17 +162,17 @@
             <p>Width</p>
         </div>
       </section>
-      <textarea class="playable-css3">-        /* Adjusted with slider and custom property */
-        .container3 * {
-          font-variation-settings: 'wdth' var(--text-axis);
-        }
-      </textarea>
-      <textarea id="code3" class="playable-html3">-        <div class="container container3">
-          <p>Width</p>
-        </div>
-      </textarea>
+<textarea class="playable-css3">+  /* Adjusted with slider and custom property */
+  .container3 * {
+    font-variation-settings: 'wdth' var(--text-axis);
+  }
+</textarea>
+<textarea id="code3" class="playable-html3">+  <div class="container container3">
+    <p>Width</p>
+  </div>
+</textarea>
       <div class="controls range-slider">
         <label for="controls__slider">Adjust Width: </label><input type="range" name="range-slider" value="100" id="text-axis" class="controls--slider" min="75" max="150"> 
       </div>
