Typography

Foundation 3 uses a modular scale to generate typography. That means a great, logical vertical rhythm whether you use the SCSS version, or just download the CSS.

How a Modular Scale Works

Based on some stellar work by Tim Brown, the idea of a modular scale is that the size and spacing of all of the typography in the framework is derived from an initial value, another arbitrary "important"" value, and a particular ratio. We chose to use the golden ratio, but there are others available.

We then use Sass to generate sizes based on those values, in an ascending scale of size and spacing. If you use the SCSS version of Foundation you can easily change these values, otherwise we default to a 14px base with a 44px important value (based on common UI element size).

General Typography

These are the basic elements of typography and rhythm in Foundation 3.

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 small header.
h6. This is very small header.

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, let's see...did you know that there are storms occurring on Jupiter that are larger than the Earth? That's pretty cool.

Header Styles

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

This is a very large main header.

This is a smaller subheader.

This is a large header. This is a small segment of that header.

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 _base.scss file as the main color.

This is a header link.

This is a header link.

This is a header link.

This is a header link.

This is a standard inline paragraph link.

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.

ul.disc
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
  • List item
  • List item
ul.circle
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
  • List item
  • List item
ul.square
  • List item with a much longer description or more content.
  • List item
  • List item
  • List item
  • List item
  • List item

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

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 widow 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.

Get Yii Foundation

Download Yii Foundation here to get started quickly. Includes everything you need to get your proyects up and running, take a look at the Setup Guide.

Download Yii Foundation

Yii Foundation 2

Looking for Yii Foundation 2 Documentation?

Yii Foundation 2 Documentation