Typography

Typography

Typography is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.


Headers

This site includes styles for all of the header elements that are balanced and based on a modular scale.

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 the site 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>

Need to align text? We made some slick utility classes to help you out.
"With Enterprise's continued help, we are now running a newer, more reliable fleet of trucks with fewer breakdowns and service issues."Tony Fiscelli, President, Lifting Gear,
Bridgeview, IL -60 Vehicle Fleet

Links are pretty standard the color is preset to the Enterprise primary color.

HTML

<p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=zT2aVoUkSDg">color is preset</a> to the Enterprise primary color.</p>

Lists

Lists are helpful for, well, lists of things. Didn't see that coming did you! There are baked-in styles for a number of different unordered list styles, as well as ordered and definition lists.

HTML

<ul class="disc">
<li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ul> <li>Nested list item</li> <li>Nested list item</li> <li>Nested list item</li> </ul> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ul>

Rendered HTML

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

HTML

<ul class="circle"> <li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ul> <li>Nested List Item</li> <li>Nested List Item</li> <li>Nested List Item</li> </ul> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ul>

Rendered HTML

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

HTML

<ul class="square"> <li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ul> <li>Nested List Item</li> <li>Nested List Item</li> <li>Nested List Item</li> </ul> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ul>

Rendered HTML

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

HTML

<ul class="no-bullet"> <li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ul> <li>Nested List Item</li> <li>Nested List Item</li> <li>Nested List Item</li> </ul> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ul>

Rendered HTML

  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

HTML

<ol> <li>List item with a much longer description or more content.</li> <li>List item</li> <li>List item <ol> <li>Nested List Item</li> <li>Nested List Item</li> <li>Nested List Item</li> </ol> </li> <li>List item</li> <li>List item</li> <li>List item</li> </ol>

Rendered HTML

  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested List Item
    2. Nested List Item
    3. Nested List Item
  4. List item
  5. List item
  6. List item

HTML

<dl>
    <dt>Definition Title</dt>
    <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
</dl>

Rendered HTML

Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

V-Cards

Here's a handy microformat-friendly list to address all your needs.

HTML

<ul class="vcard">
    <li class="fn">Gaius Baltar</li>
    <li class="street-address">123 Colonial Ave.</li>
    <li class="locality">Caprica City</li>
    <li>
        <span class="state">Caprica</span>,
        <span class="zip">12345</span>
    
</li>
    <li class="email">
        <a href="#">g.baltar@example.com </a>
    </li>
</ul>

Rendered HTML