The typography in this style-guide is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.
Included are styles for all of the header elements that are balanced and based on a modular scale.
<!-- Header styles -->
<h1>This is a very large header.</h1>
<h2>This is a large header.</h2>
<h3>This is a medium header.</h3>
<h4>This is a moderate header.</h4>
<h5>This is a small header.</h5>
<h6>This is a tiny header.</h6>
Lighten up your headers by adding a class of .subheader to any header element.
<!-- Subheader styles -->
<h1 class="subheader">Subheader</h1>
<h2 class="subheader">Subheader</h2>
<h3 class="subheader">Subheader</h3>
<h4 class="subheader">Subheader</h4>
<h5 class="subheader">Subheader</h5>
<h6 class="subheader">Subheader</h6>
By inserting a small element into a header, the toolkit will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
<h1>Main header <small>Header segment</small></h1>
<h2>Main header <small>Header segment</small></h2>
<h3>Main header <small>Header segment</small></h3>
<h4>Main header <small>Header segment</small></h4>
<h5>Main header <small>Header segment</small></h5>
<h6>Main header <small>Header segment</small></h6>
Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm.
Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.
<p>Lorem ipsum dolor sit amet, eu est tamquam meliore. Sed id graeco partiendo reprehendunt, vel at corrumpit appellantur, ius debet semper deserunt ut. Ex duo mundi nostro, pri ex mentitum offendit laboramus, ut his quas nulla error.</p>
Wrap <strong> around type to make it bold! You can also use <em> to
italicize your words.
This is bold and this is italicized.
<p>This is <strong>bold</strong> and this is <em>italicized</em>.</p>
Links are very standard.
This is a link.
<p>This is a <a href="#">link</a>.</p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.