Foundation
Jump to Nav

Typography

Typography in Foundation for Emails 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 female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the <strong> and <em> tags to denote text that should be displayed or read with emphasis. Browsers will bold and italicize them, while screen readers will read the words with emphasis.

<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 female Giant Squids on average are around twice the size of (and around 10 feet longer than) their potential mates? Pretty cool. Use the `<strong>` and `<em>` tags to denote text that should be displayed or read with emphasis. Browsers will <strong>bold</strong> and <em>italicize</em> them, while screen readers will read the words with <em>emphasis</em>.</p>

Foundation includes styles for all headings.

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

DEMO


Header Sizes

The framework includes two typographic scales—one uses a narrow range of sizes for small- and medium-sized screens, and the other uses a wider range of sizes for large-sized screens. You can change these scales, or add new ones for other breakpoints, by editing the $hx-font-size variables in your project's Settings File.

Header Default
<h1> 34px
<h2> 30px
<h3> 28px
<h4> 24px
<h5> 20px
<h6> 18px

Small Header Segments

By inserting a <small> element into a header Foundation will scale the header font size down for an inline element, allowing you to use this for subtitles or other secondary header text.

HTML
<h3>Foundation for Emails <small>Version 2</small></h3>
<h3>Foundation for Emails <small>Version 2</small></h3>

DEMO


Links are very standard, and the color is preset to the Foundation primary color. Learn more about Foundation's global colors.

<p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>

Dividers

Use dividers to define thematic breaks between paragraphs or sections of your email.

<hr/>

Sass Reference