MUSIC ON

Typography

Foundation 3 uses a modular scale to generate typography. That means a great, logical relationship for your copy whether you use the Scss version or just download the CSS.

Header Styles

Foundation 3 includes a number of different styles and treatments for typographic elements, such as subheaders or small header segments.
  • Basic Headers

    h1 header

    h2 header

    h3 header

    h4 header

    h5 header
    h6 header

    Headers with <small>

    Small header text.

    Small header text.

    Small header text.

    Small header text.

    Small header text.
    Small header text.

    Subheaders

    h1.subheader header

    h2.subheader header

    h3.subheader header

    h4.subheader header

    h5.subheader header
    h6.subheader header
  • 
    
    <!-- Basic Headers -->
    
    <h1>h1 header</h1>
    
    <h2>h2 header</h2>
    
    <h3>h3 header</h3>
    
    <h4>h4 header</h4>
    
    <h5>h5 header</h5>
    
    <h6>h6 header</h6>
    
    <!-- Headers with small text -->
    
    <h1>h1 header <small>Small header text.</small></h1>
    
    <h2>h2 header <small>Small header text.</small></h2>
    
    <h3>h3 header <small>Small header text.</small></h3>
    
    <h4>h4 header <small>Small header text.</small></h4>
    
    <h5>h5 header <small>Small header text.</small></h5>
    
    <h6>h6 header <small>Small header text.</small></h6>
    
    <!-- Subheaders -->
    
    <h1 class="subheader">h1.subheader header</h1>
    
    <h2 class="subheader">h2.subheader header</h2>
    
    <h3 class="subheader">h3.subheader header</h3>
    
    <h4 class="subheader">h4.subheader header</h4>
    
    <h5 class="subheader">h5.subheader header</h5>
    
    <h6 class="subheader">h6.subheader header</h6>
    
    

Paragraphs

In Foundation, paragraphs fall within the modular scale. This includes their line-height, giving the page a feeling of harmony as you scroll.
  • It’s really easy to add emphasis to copy in Foundation. We’ve implemented some standards like bold and

    italics

    , as well as, our own nifty styles, such as

    <code>

    ,

    <kbd>

    and <small>

  • 
    
    <div class='six columns'>
    
        <p>It's really easy to add emphasis to copy in Foundation. We've implemented some standards like <strong>bold</strong> and <em>italics</em>, as well as, our own nifty styles, such as <code>&lt;code&gt;</code>, <kbd>&lt;kbd&gt;</kbd> and <small>&lt;small&gt;</small></p>
    
      </div>
    
      <div class='six columns'>
    
        <aside><p>You can also put text into and <strong>&lt;aside&gt;</strong> element to give it some hierarchy on the page. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla.</p></aside>
    
      </div>
    
    </div>
    
    

Links

Where would we be without links? Not in hypertext, that’s for sure! Ah, nerd humor. Anyways. Links are very standard, and the color is preset or controlled via the _settings.scss file as the main color.

Lists

Lists are helpful for, well, lists of things. Foundation 3 uses

Normalize.css so lists won’t be reset as they were in previous versions. However, we still provide a few simple affordances for lists.

  • Unordered Lists

    ul.disc
    • 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
    ul.circle
    • 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
    ul.square
    • 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
  • 
    
    <!-- Disc Lists -->
    
    <h5>ul.disc</h5>
    
    <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>
    
    <!-- Circle Lists -->
    
    <h5>ul.circle</h5>
    
    <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>
    
    <!-- Square Lists -->
    
    <h5>ul.square</h5>
    
    <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>
    
    <!-- Ordered Lists -->
    
    <ol>
    
      <li>Ordered List Item</li>
    
      <li>Ordered List Item</li>
    
      <li>Ordered List Item</li>
    
      <li>Ordered List Item</li>
    
    </ol>
    
    <!-- Definition Lists -->
    
    <dl>
    
      <dt>Definition Title</dt>
    
      <dd>Definition text, you can add as many of these as you need. The line-height matches paragraphs.</dd>
    
    </dl>
    
    

Ordered Lists

  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3

Definition Lists

Definition Title
Definition text, you can add as many of these as you need. The line-height matches paragraphs.

Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We’ve got you covered.
  • I do not fear computers. I fear the lack of them.

    Isaac Asimov

     

  • 
    
    <blockquote>
    
      <p>I do not fear computers. I fear the lack of them.
    
      <cite>Isaac Asimov</cite></p>
    
    </blockquote>
    
    

Print Styles

Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes:

  • Clearing out backgrounds, box shadows, and text shadows
  • Appending link URLs after the anchor text
  • Bordering blockquotes and pre elements
  • Page cleanup and window minimization

On top of that, Foundation includes a couple of simple classes you can use to control elements printing, or not printing. Simply attached

.print-only

on an element to only show when printing, and

.hide-on-print

to hide something when printing.


Buttons Galore

We know people love buttons, so do we. With that in mind, we made sure Foundation includes everything you need when it comes to building buttons.

Learn about our buttons ยป

Our Partners