---

Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.

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.

---

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader

h6.subheader

---

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.

h6. Small segment 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, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap around type to make it bold!. You can also you to italicize your words.

---

Links

Links are very standard, and the color is preset to the Foundation primary color.

---

Lists

Lists are helpful for, well, lists of things.

---

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. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov

---

V-Cards

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

• Gaius Baltar
• 123 Colonial Ave.
• Caprica City
• Caprica, 12345
• g.baltar@cmail.com

---

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 attach .print-only to an element to only show when printing, and .hide-on-print to hide something when printing.

---

Inline Lists

You can use this simple construct when you just need a horizontal list of links, like in a footer, and want more control than just spaces between them.

• Link 1
• Link 2
• Link 3
• Link 4
• Link 5

---

Labels

Labels are useful inline styles that can be dropped into body copy to call out certain sections or to attach metadata. Examples might be noting when something was updated or that something is new.

Regular Label
Radius Secondary Label
Round Alert Label
Success Label

---

Keystrokes

If you have keyboard affordances, you might need to explain them. To that end, there's a simple keystroke character affordance in Foundation.

For example, to close your browser hit Cmd + Q. Don't actually do it. There's more docs to read.

There are two ways to build keystrokes in Foundation 4: with our predefined HTML or with our mixins. Building keystrokes using our predefined classes is simple, you simply wrap kbd or .keystroke around whatever you want to call out.

---