gentux-style-guide
Version:
<http://gentuxdesign.com>
280 lines (251 loc) • 6.86 kB
HTML
---
title: Typography
---
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Main<br>Headlines</h3>
</div>
<div class="col-sm-9">
<p class="h1 h1-lg domd">Domain Display</p>
</div>
</div><!-- /row -->
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Sub<br>Headlines</h3>
</div>
<div class="col-sm-9">
<p class="h2">Roboto Condensed Bold</p>
</div>
</div><!-- /row -->
<div class="row align-vertical mb-4">
<div class="col-sm-3">
<h3 class="h4">Body<br>Copy</h3>
</div>
<div class="col-sm-9">
<p class="">Roboto Regular</p>
</div>
</div><!-- /row -->
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Quotes</h3>
</div>
<div class="col-sm-9">
<blockquote>
<q class="h3 domd readable-line mb-3">Here in the 21st century, the modern man need never compromise.</q>
<cite class="small text-right">George Zimmer</cite>
</blockquote>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Typesetting</h3>
</div>
<div class="col-sm-9">
<h4 class="mb-3">Typography Scale</h4>
<p class="readable-line">
The Gentux typography system is built on a 1.25 / major 3rd modular scale based on a 16px body copy size.
</p>
<p>
In cases where larger or smaller type sizes are needed, you can reference the full scale at: <a href="http://www.modularscale.com/?16&px&1.25&web&text">http://www.modularscale.com/?16&px&1.25&web&text</a>. While we recommend sticking to the base options, any size picked from this scale will fit the brand standards.
</p>
<p>
Domain Display has been scaled by a factor of 1.2 so it's lighter visual weight balances with Robot Condensed Bold at each heading level.
</p>
<h4 class="mb-3">Letterspacing</h4>
<p>
All uppercase and small body copy typesetting should have some letterspacing. Our base amount is .03em with extra space added at smaller sizes.
</p>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Specs</h3>
</div>
<div class="col-sm-9">
<h4 class="mb-3">Domaine Display</h4>
<table class="table table-hover mb-4">
<thead>
<tr>
<th>Scale</th>
<th>Typeface</th>
<th>Size</th>
<th>Letterspacing</th>
<th>Line Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>Domaine Display Regular</td>
<td>46.875px</td>
<td>0</td>
<td>1.2</td>
</tr>
<tr>
<td>h2</td>
<td>Domaine Display Regular</td>
<td>30px</td>
<td>0</td>
<td>1.2</td>
</tr>
<tr>
<td>Blockquote</td>
<td>Domaine Display Regular</td>
<td>24px</td>
<td>0</td>
<td>1.2</td>
</tr>
</tbody>
</table>
<h4 class="mb-3">Roboto</h4>
<table class="table table-hover">
<thead>
<tr>
<th>Scale</th>
<th>Typeface</th>
<th>Size</th>
<th>Letterspacing</th>
<th>Line Height</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1</td>
<td>Roboto Condensed Bold</td>
<td>39.0625px</td>
<td>1.17px / .03em</td>
<td>1.2</td>
</tr>
<tr>
<td>h2</td>
<td>Roboto Condensed Bold</td>
<td>25px</td>
<td>0.75px / .03em</td>
<td>1.2</td>
</tr>
<tr>
<td>h3</td>
<td>Roboto Condensed Bold</td>
<td>20px</td>
<td>0.6px / .03em</td>
<td>1.3</td>
</tr>
<tr>
<td>h4</td>
<td>Roboto Condensed Bold</td>
<td>16px</td>
<td>0.64px / .04em</td>
<td>1.3</td>
</tr>
<tr>
<td>h5</td>
<td>Roboto Condensed Bold</td>
<td>12.8px</td>
<td>0.77px / .06em</td>
<td>1.35</td>
</tr>
<tr>
<td>h6</td>
<td>Roboto Condensed Bold</td>
<td>10.24px</td>
<td>0.82px / .08em</td>
<td>1.35</td>
</tr>
<tr>
<td>p</td>
<td>Roboto Regular</td>
<td>16px</td>
<td>0</td>
<td>1.5</td>
</tr>
<tr>
<td>p - small</td>
<td>Roboto Regular</td>
<td>12.8px</td>
<td>0.128px / .01em</td>
<td>1.7</td>
</tr>
</tbody>
</table>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row mb-4">
<div class="col-sm-3">
<h3 class="h4">Usage</h3>
</div>
<div class="col-sm-9">
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Hero<br> Headlines<br> with Sub-Head</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h4">Sub Heading</div>
<div class="h1 domd">Main Headline</div>
</div>
<p>
Hero headlines use an h4 set in Roboto Condensed Bold as a sub-head or lead-in heading. The main headline is set as an h1 in Domaine.
</p>
<p>
The sub-head is usually informative while the large headline is more brand voice focused and stylistic e.g. for the customer service webpage, Sub-head: "Customer Service", Main-head: "Are you ready to feel the love?".
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Hero<br> Headlines<br> no Sub-Head</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h1 domd">Main Headline</div>
</div>
<p>
If no sub-head or lead-in line is available, hero headlines use Domaine only.
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Non-Hero<br> Heading</h3>
</div>
<div class="col-sm-9">
<div class="mb-3">
<div class="h2 domd">Headline Level 2</div>
</div>
<div class="mb-3">
<div class="h2">Headline Level 2</div>
</div>
<p>
Non-hero main headlines (h2s) can be optionally set in Domaine or Roboto Condensed.
</p>
</div>
</div><!-- /row -->
<div class="row mb-5">
<div class="col-sm-3">
<h3 class="h4">Sub-Headings</h3>
</div>
<div class="col-sm-9">
<div class="h3 mb-3">Heading Level 3</div>
<div class="h4 mb-3">Heading Level 4</div>
<div class="h5 mb-3">Heading Level 5</div>
<div class="h6 mb-3">Heading Level 6</div>
<p>
All sub-headings (h3-h6) are set in Roboto Condensed Bold.
</p>
</div>
</div><!-- /row -->
<hr class="my-5">
<div class="row my-5">
<div class="col-sm-3">
</div>
<div class="col-sm-9">
<p>
Full example breakdown and further technical information can be found in the typography section of the developer docs: <a href="{{ baseurl }}/atoms/#Typography">{{ baseurl }}Web Typography</a>
</p>
</div>
</div><!-- /row -->