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>

<html>

<head></head>

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

</html>

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>

<html>

<head></head>

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

</html>

DEMO

Links

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.

<h-line></h-line>

Sass Reference

Variables

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

Name	Type	Default Value	Description
`$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`	Color	`inherit`	Header color
`$global-line-height`	Number	`130%`	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	`floor($global-font-size * 2.125)`	Font size of `<h1>` elements.
`$h2-font-size`	Number	`floor($global-font-size * 1.875)`	Font size of `<h2>` elements.
`$h3-font-size`	Number	`floor($global-font-size * 1.75)`	Font size of `<h3>` elements.
`$h4-font-size`	Number	`floor($global-font-size * 1.5)`	Font size of `<h4>` elements.
`$h5-font-size`	Number	`floor($global-font-size * 1.2)`	Font size of `<h5>` elements.
`$h6-font-size`	Number	`floor($global-font-size * 1.125)`	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	`160%`	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`	Default margin for a divider.
`$hr-align`	String	`center`	Default alignment 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.
`$remove-ios-blue`	Boolean	`true`	Removing the iOS telephone and address styling

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

h-line

@include h-line($align, $width, $border, $margin);

Create a divider/horizontal rule.

Parameter	Type	Default Value	Description
`$align`	String	`None`	Left, center, or right
`$width`	String	`None`	Width of divider
`$border`	String	`None`	Shorthand border style for divider
`$margin`	String	`None`	Margin above and below divider

Typography

Paragraphs

Header

Header Sizes

Small Header Segments

Links

Dividers

Sass Reference

Variables

Mixins

h-line

ZURB MASTER CLASS Responsive Emails

Foundation for Emails

Want more?

Talk to us

Stay Updated