Base Typography

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

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. Use the <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize the words, while screen readers will read them with emphasis.

If the emphasis of a phrase is important, don't make the emphasis purely visual—use the <em> or <strong> tags to mark it as well. Both of these tags have built-in styles, but there's no harm in adding additional styles in specific contexts.


Header

Foundation includes styles for all headings—they're balanced and sized along a modular scale.

Avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.

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.