Add better spacing and fix typo

mrmrs · mrmrs · commit 13e91de7562a · 2016-09-13T15:10:28.000+01:00
diff --git a/docs/font-family/garamond/index.html b/docs/font-family/garamond/index.html
@@ -50,10 +50,10 @@
   </nav>
 </header>
 
-    <main class="bg-white black-70">
+    <main class="bg-white black-70 bt b--black-10">
       <div class="ph3 ph5-ns pt4 pb5">
         <article class="garamond">
-          <h2 class="f6 fw4 f6 mb3 helvetica">Garamond</h2>
+          <h2 class="f6 fw4 f6 mb3 helvetica">Typeface alphabets</h2>
           <div class="overflow-auto">
             <h3 class="f2 f1-m f-subheadline-l fw4 garamond ttu tracked mt0">Garamond</h3>
             <p class="f4 f2-m f1-l tracked-tight">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
@@ -118,7 +118,7 @@ <h3 class="f6 ttu fw4">Italic</h3>
           <p class="f4 f2-m f1-l i ttu tracked-tight">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
         </section>
           <section class="helvetica pv4 mv4 bt b--black-70 measure f2">
-            <p class="f3 lh-copy">
+            <p class="f5 f3-l lh-copy">
               Some distinctive characteristics in Garamond's letters are the small eye of the 'e' and the bowl of the a, which has a sharp hook upwards at top left. The 'M' is slightly splayed. The x-height (height of lower-case letters) is low, especially at larger sizes, making the capitals large relative to the lower case, while the top serifs on the ascenders of letters like 'd' have a downward slope and rise subtly above the cap height. Garamond typefaces are popular and often used, particularly for printing body text and books.
             </p>
             <p class="f5 lh-copy measure-narrow dib mr4-l mt0 v-top">
@@ -142,7 +142,7 @@ <h3 class="f6 ttu fw4">Italic</h3>
             </p>
           </section>
         </article>
-        <div class="mt5 cf">
+        <div class="mt5 cf pt4 bt b--black-10">
           <div class="dib mr4">
             <h1 class="f4 ttu tracked fw6">Previous</h1>
             <a href="/docs/typography/font-weight/" class="link fw6 blue dim">Font Weight</a>
diff --git a/src/templates/docs/garamond/index.html b/src/templates/docs/garamond/index.html
@@ -9,10 +9,10 @@
   </head>
   <body class="w-100 sans-serif">
     <%= siteHeader %>
-    <main class="bg-white black-70">
+    <main class="bg-white black-70 bt b--black-10">
       <div class="ph3 ph5-ns pt4 pb5">
         <article class="garamond">
-          <h2 class="f6 fw4 f6 mb3 helvetica">Garamond</h2>
+          <h2 class="f6 fw4 f6 mb3 helvetica">Typeface alphabets</h2>
           <div class="overflow-auto">
             <h3 class="f2 f1-m f-subheadline-l fw4 garamond ttu tracked mt0">Garamond</h3>
             <p class="f4 f2-m f1-l tracked-tight">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
@@ -77,7 +77,7 @@ <h3 class="f6 ttu fw4">Italic</h3>
           <p class="f4 f2-m f1-l i ttu tracked-tight">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
         </section>
           <section class="helvetica pv4 mv4 bt b--black-70 measure f2">
-            <p class="f3 lh-copy">
+            <p class="f5 f3-l lh-copy">
               Some distinctive characteristics in Garamond's letters are the small eye of the 'e' and the bowl of the a, which has a sharp hook upwards at top left. The 'M' is slightly splayed. The x-height (height of lower-case letters) is low, especially at larger sizes, making the capitals large relative to the lower case, while the top serifs on the ascenders of letters like 'd' have a downward slope and rise subtly above the cap height. Garamond typefaces are popular and often used, particularly for printing body text and books.
             </p>
             <p class="f5 lh-copy measure-narrow dib mr4-l mt0 v-top">
@@ -101,7 +101,7 @@ <h3 class="f6 ttu fw4">Italic</h3>
             </p>
           </section>
         </article>
-        <div class="mt5 cf">
+        <div class="mt5 cf pt4 bt b--black-10">
           <div class="dib mr4">
             <h1 class="f4 ttu tracked fw6">Previous</h1>
             <a href="/docs/typography/font-weight/" class="link fw6 blue dim">Font Weight</a>
