typography adjustments

Author: johnpolacek

css/sass/utilities.typography.scss

@@ -11,11 +11,11 @@ em, .italic { font-style:italic; }
 .text-14, small {font-size:14px;}
 .text-16, body, p, h6, h5 {font-size:16px;}
 .text-18, h4 {font-size:18px;}
-.text-20, h3 {font-size:24px;}
-.text-24, h2 {font-size:36px;}
-.text-32, h1 {font-size:48px;}
+.text-24, h3 {font-size:24px;}
+.text-36, h2 {font-size:36px;}
+.text-48, h1 {font-size:48px;}
 
 .uppercase { text-transform:uppercase; }
 .lowercase { text-transform:lowercase; }
 
-.letter-space-1 { letter-spacing:1px; }
+.lineheight-1 { line-height: 1; }

css/style.min.css

@@ -41,17 +41,17 @@ em, .italic { font-style: italic; }
 
 .text-18, h4 { font-size: 18px; }
 
-.text-20, h3 { font-size: 24px; }
+.text-24, h3 { font-size: 24px; }
 
-.text-24, h2 { font-size: 36px; }
+.text-36, h2 { font-size: 36px; }
 
-.text-32, h1 { font-size: 48px; }
+.text-48, h1 { font-size: 48px; }
 
 .uppercase { text-transform: uppercase; }
 
 .lowercase { text-transform: lowercase; }
 
-.letter-space-1 { letter-spacing: 1px; }
+.lineheight-1 { line-height: 1; }
 
 /* Color Utils */
 .bgr-blue-lt { background-color: #75c5df; }

css/style.min.css.map

@@ -36,7 +36,7 @@ <h1 class="marg-3-bottom text-blue-lt text-light border-bottom">Modal</h1>
         <div class="overlay abs wide bgr-trans-dark hidden" id="modalSuccess">
             <div class="abs pos-top pos-left wide tall clickable" data-modal-close></div>
             <div class="modal rel pos-top pos-left bgr-white box-center box-400 pad-3 rounded shadow" id="modalSuccessContent">
-                <span href="#" class="abs pos-top pos-right pad-btn-large clickable text-gray" data-modal-close>&times;</span>
+                <span href="#" class="abs pos-top pos-right pad-btn-large clickable text-gray text-24" data-modal-close>&times;</span>
                 <h3 class="pad-1-bottom">All Set!</h3>
                 <p>Congratulations. You did it.</p>
                 <div class="pad-2-top text-right">

css/stylesheets/utilities.css

@@ -76,7 +76,7 @@ <h3 class="marg-2-bottom bgr-green-dk text-white text-light pad-2-sides">Typogra
                     <p>Maintain consistency by using utility classes for font size, weight and styling. Margin and padding are 0 for <code>h1-h6</code>.</p>
                 </div>
                 <div class="grid-12 pad-3-bottom">
-                    <h3 class="grid-12 text-32 text-light marg-3-bottom">Titillium</h3>
+                    <h3 class="grid-12 text-48 text-light marg-3-bottom">Titillium</h3>
                     <div class="grid-12 pad-3-bottom">
                         <div class="grid-3 m-grid-4 s-grid-12 pad-3-right">
                             <p>Regular<br/><code class="text-small-2">.text-reg</code></p>
@@ -129,9 +129,9 @@ <h3 class="grid-12 text-32 text-light marg-3-bottom">Titillium</h3>
                 <div class="grid-12 pad-3-bottom">
                     <div class="grid-12 pad-3-bottom">
                         <div class="grid-12 pad-2-bottom">
-                            <span class="text-32">text-32, h1</span><br/>
-                            <span class="text-24">text-24, h2</span><br/>
-                            <span class="text-20">text-20, h3</span><br/>
+                            <span class="text-48">text-48, h1</span><br/>
+                            <span class="text-36">text-36, h2</span><br/>
+                            <span class="text-24">text-24, h3</span><br/>
                             <span class="text-18">text-18, h4</span><br/>
                             <span class="text-16">text-16, body, p, h6, h5</span><br/>
                             <span class="text-14">text-14, small</span><br/>