add: typography to /brand

brand/content/visual-identity.php

@@ -26,13 +26,38 @@
     </div>
     <h3 id="typography" class="heading-2">4.2. Typography</h3>
     <h4 id="primary-selection" class="heading-3">Primary Selection</h3>
+    <div class="preview">
+        <figure>
+            <img src="imgs/biotif-type-sample.png" style="max-height:100px; width:auto;">
+        </figure>
+    </div>
     <p><a href="https://www.myfonts.com/collections/biotif-font-degarism-studio" target="_blank" rel="nofollow" data-emoji="link">Biotif</a> is the preferred typographic family for all headings, captions, and buttons.</p>
+    <div class="preview">
+        <figure>
+            <img src="imgs/freight-type-sample.png" style="max-height:100px; width:auto;">
+        </figure>
+    </div>
     <p>We use <a href="https://www.myfonts.com/collections/freight-text-pro-font-freight-collection" target="_blank" rel="nofollow" data-emoji="link">Freight Text Pro</a> for body text elements, like paragraphs, quotes, and lists.</p>
     <p>The font files of our Primary Selection (Biotif &amp; Freight Text Pro) are bound to usage licenses and distribution models which may not be available in all cases. If you don't have access to the fonts of our Primary Selection, then you can fallback to the Google Fonts from the Secondary Selection.</p>
     <h4 id="secondary-selection" class="heading-3">Secondary Selection</h3>
+    <div class="preview">
+        <figure>
+            <img src="imgs/figtree-type-sample.png" style="max-height:100px; width:auto;">
+        </figure>
+    </div>
     <p>If Biotif is not available, then use <a href="https://fonts.google.com/specimen/Figtree" target="_blank" rel="nofollow" data-emoji="link">Figtree</a> for headings, captions, and buttons.</p>
+    <div class="preview">
+        <figure>
+            <img src="imgs/lora-type-sample.png" style="max-height:100px; width:auto;">
+        </figure>
+    </div>
     <p>If Freight Text Pro is not available, then use <a href="https://fonts.google.com/specimen/Lora" target="_blank" rel="nofollow" data-emoji="link">Lora</a> for body text.</p>
     <h4 id="tertiary-selection" class="heading-3">Tertiary Selection</h3>
+    <div class="preview">
+        <figure>
+            <img src="imgs/verdana-type-sample.png" style="max-height:100px; width:auto;">
+        </figure>
+    </div>
     <p>The last bastion of our typographic identity falls back to font files present universally in all operating systems. The most common use for the Tertiary Selection is in email clients, since they only support system fonts.</p>
     <p>If the font files from the Primary or Secondary selections are not available you should fallback to Verdana.</p>
     <h3 id="color-scheme" class="heading-2">4.3. Color scheme</h3>