Examples of foundational typographic elements like headings, paragraphs and lists.
As Tim Brown put it:
Modular scales[…] help us achieve a visual harmony not found in compositions that use arbitrary, conventional, or easily divisible numbers.
This project uses a minor third (5:6) modular scale.
Headings are set in Industry Bold (700) or Black (800).
<h1>This Is Heading Level 1</h1>
<h2>This Is Heading Level 2</h2>
<h3>This Is Heading Level 3</h3>
<h4>This Is Heading Level 4</h4>
<h5>This Is Heading Level 5</h5>
<h6>This Is Heading Level 6</h6>Body copy is set in Helvetica Neue, falling back to Helvetica or Arial. This promotes consistency with use of Helvetica in packaging while also reducing the number of typefaces to load.
Champion’s totally automatic solution provides security, convenience, health and safety — all things that every homeowner holds dear. Don’t put these things at risk during a power outage. Millions of individuals suffer from the effects of a power outage annually.
Blockquotes include a slight indentiation and lowered opacity.
This is an example of a blockquote.
Champion’s totally automatic solution provides security, convenience, health and safety — all things that every homeowner holds dear. Don’t put these things at risk during a power outage. Millions of individuals suffer from the effects of a power outage annually.
<blockquote>
<p>
This is an example of a blockquote.
</p>
<p>
Champion’s totally automatic solution provides security, convenience, health and safety — all things that every homeowner holds dear. Don’t put these things at risk during a power outage. Millions of individuals suffer from the effects of a power outage annually.
</p>
<footer>
<cite>
Lorem McIpsum, Example Citation
</cite>
</footer>
</blockquote>To promote the use of semantic elements in blog post and other dynamic content, light styling is applied to list elements by default.
<ol>
<li>Ordered Item</li>
<li>Ordered Item</li>
<li>Ordered Item</li>
</ol>
<ul>
<li>Unordered Item</li>
<li>Unordered Item</li>
<li>Unordered Item</li>
</ul>