---
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&nbsp;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 -->