Foundation
Jump to Nav

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

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

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

    <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 by default, but you can add the class `.no-bullet` to remove the bullets.

    <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

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

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

Name | Type | Default Value | Description
--- | --- | --- | ---
`$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 subhheaders.
`$subheader-margin-bottom` | Number | `0.5rem` | Default bottom margin for subheaders.
`$stat-font-size` | Number | `2.5rem` | Default font size for statistic numbers.