Typography Helpers

Our helper classes allow you to scaffold certain typographic styles faster.

Text Alignment

You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.

Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, .medium-text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.

Watch this part in video

edit on codepen button
<p class="text-left"><!-- ... --></p>
<p class="text-right"><!-- ... --></p>
<p class="text-center"><!-- ... --></p>
<p class="text-justify"><!-- ... --></p>

This text is left-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is right-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is center-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.

This text is justified. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.


Subheader

Lighten up your headers by adding a class of .subheader to any header element.

Watch this part in video

edit on codepen button
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader

Lead Paragraph

A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.

Watch this part in video

edit on codepen button
<p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p>

What are your cats really dreaming about while they sleep?


Un-bulleted List

In Foundation, the <ul> is a bulleted list and <ol> is a numbered list by default, but you can add the class .no-bullet to remove the bullets and numbers respectively.

Unordered List

Watch this part in video

edit on codepen button
<ul class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
  • List item with a much longer description or more content.
  • List item
  • List item
    • Nested list item
    • Nested list item
    • Nested list item
  • List item
  • List item
  • List item

Ordered List

<ol class="no-bullet">
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ol>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ol>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
  1. List item with a much longer description or more content.
  2. List item
  3. List item
    1. Nested list item
    2. Nested list item
    3. Nested list item
  4. List item
  5. List item
  6. List item

Typescale

Adjust font-size by overriding an element’s default size. This can be useful to size a <p> or <h1> through <h6> using Foundation's existing header sizes.

Especially useful because: It's important to 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.

For headers:

<h2 class="h1">Lorem Ipsum Dolor</h2>
<h3 class="h2">Lorem Ipsum Dolor</h3>
<h4 class="h3">Lorem Ipsum Dolor</h4>
<h5 class="h4">Lorem Ipsum Dolor</h5>
<h6 class="h5">Lorem Ipsum Dolor</h6>

For text:

<p class="h1">Lorem Ipsum Dolor</p>
<p class="h2">Lorem Ipsum Dolor</p>
<p class="h3">Lorem Ipsum Dolor</p>
<p class="h4">Lorem Ipsum Dolor</p>
<p class="h5">Lorem Ipsum Dolor</p>
<p class="h6">Lorem Ipsum Dolor</p>

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor

Lorem Ipsum Dolor


Statistics

If you're building a dashboard, you might need to display some important numbers real big. Just add the .stat class to any element to amp up the font size.

Watch this part in video

edit on codepen button
<p>Days without merge conflict</p>
<div class="stat">128</div>

Days without merge conflict

128

Sass Reference

Variables

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

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

Default font size for lead paragraphs.

$lead-lineheight String 1.6

Default line height for lead 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-weight-normal

Default font weight for subheaders.

$subheader-margin-top Number 0.2rem

Default top margin for subheaders.

$subheader-margin-bottom Number 0.5rem

Default bottom margin for subheaders.

$stat-font-size Number 2.5rem

Default font size for statistic numbers.

$cite-color Color $dark-gray

Text color for .cite-block component.

$cite-font-size Number rem-calc(13)

Font size for .cite-block component.

$cite-pseudo-content String '\2014 \0020'

Pseudo content for .cite-block component.

$code-color Color $black

Text color of .code-inline and .code-block components.

$code-font-family String or List $font-family-monospace

Font family of .code-inline and .code-block components.

$code-font-weight String $global-weight-normal

Font weight of text in .code-inline and .code-block components.

$code-background Color $light-gray

Background color of .code-inline and .code-block components.

$code-border List 1px solid $medium-gray

Border around .code-inline and .code-block components.

$code-padding Number or List rem-calc(2 5 1)

Padding around text of the .code-inline component.

$code-block-padding Number or List 1rem

Padding around text of the .code-block component.

$code-block-margin-bottom Number 1.5rem

Margin under the .code-block component.


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.

code-style

@include code-style;

Add basic styles for a code helper. See code-inline and code-block mixins.


code-inline

@include code-inline;

Make code helper from the code-style mixin inline. Used to generate .code-inline


code-block

@include code-block;

Make code helper from the code-style mixin a block. Used to generate .code-block