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

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$global-font-color Color $black

Global font color.

$body-font-family Font Helvetica, Arial, sans-serif

Global font family.

$global-font-weight Keyword normal

Global font weight.

$header-color Keyword inherit

Global font weight.

$global-line-height Number 1.3

Global line height.

$global-font-size Number 16px

Font size of body text.

$body-line-height Number $global-line-height

Line height of body text.

$header-font-family List $body-font-family

Font family of headings.

$header-font-weight List $global-font-weight

Font family of headings.

$h1-font-size Number 34px

Font size of <h1> elements.

$h2-font-size Number 30px

Font size of <h2> elements.

$h3-font-size Number 28px

Font size of <h3> elements.

$h4-font-size Number 24px

Font size of <h4> elements.

$h5-font-size Number 20px

Font size of <h5> elements.

$h6-font-size Number 18px

Font size of <h6> elements.

$header-margin-bottom Number 10px

Margin bottom of <h1> through <h6> elements.

$paragraph-margin-bottom Number 10px

Margin bottom of paragraphs.

$small-font-size Number 80%

Default font size for <small>.

$small-font-color Color $medium-gray

Color of <small> elements when placed inside headers.

$lead-font-size Number $global-font-size * 1.25

Font size of lead paragraphs.

$lead-line-height Number 1.6

Line height of lead paragraphs.

$text-padding Number 10px

Padding inside paragraphs.

$subheader-lineheight Number 1.4

Default line height for subheaders.

$subheader-color Color $dark-gray

Default font color for subheaders.

$subheader-font-weight String $global-font-weight

Default font weight for subheaders.

$subheader-margin-top Number 4px

Default top margin for subhheaders.

$subheader-margin-bottom Number 8px

Default bottom margin for subheaders.

$hr-width Number $global-width

Maximum width of a divider.

$hr-border List 1px solid $black

Default border for a divider.

$hr-margin Number or List 20px auto

Default margin for a divider.

$anchor-text-decoration Keyword none

Text decoration for anchors.

$anchor-color Color $primary-color

Text color of anchors.

$anchor-color-visited Color $anchor-color

Text color of anchors to visited links.

$anchor-color-hover Color darken($primary-color, 10%)

Text color of anchors on hover.

$anchor-color-active Color $anchor-color-hover

Text color of active anchors.

$stat-font-size Number 40px

Default font size for statistic numbers.