Typography
Typography in Gryff (based on Zurb Foundation) is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.
Headers
Gryff includes styles for all of the header elements that are balanced and based on a modular scale (though modular-scale is not a dependency of Foundation).
HTML
<h1>h1. This is a very large header.</h1><h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
Rendered HTML
h1. This is a very large header.
h2. This is a large header.
h3. This is a medium header.
h4. This is a moderate header.
h5. This is a small header.
h6. This is a tiny header.
Subheaders
Lighten up your headers by adding a class of .subheader to any header element.
HTML
<h1 class="subheader">h1.subheader</h1><h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
Rendered HTML
h1.subheader
h2.subheader
h3.subheader
h4.subheader
h5.subheader
h6.subheader
Small Header Segments
By inserting a small element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.
HTML
<h1>h1. <small>Small segment header.</small></h1><h2>h2. <small>Small segment header.</small></h2>
<h3>h3. <small>Small segment header.</small></h3>
<h4>h4. <small>Small segment header.</small></h4>
<h5>h5. <small>Small segment header.</small></h5>
<h6>h6. <small>Small segment header.</small></h6>
Rendered HTML
h1. Small segment header.
h2. Small segment header.
h3. Small segment header.
h4. Small segment header.
h5. Small segment header.
h6. Small segment header.
Paragraphs
This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content -- so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to make it bold! You can also use em to italicize your words.
HTML
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>Blockquotes
Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.
HTML
<blockquote>Those people who think they know everything are a great annoyance to those of us who do.<cite>Isaac Asimov</cite></blockquote>Rendered HTML
Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov