--- title: Typography Helpers description: Our helper classes allow you to scaffold certain typographic styles faster. video: dq7s3PVpQ7M sass: - scss/typography/_helpers.scss - scss/typography/_alignment.scss tags: - alignment - subheader - lead - statistic --- ## 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.

```html

```

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

```html_example

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

```html_example

What are your cats really dreaming about while they sleep?

``` --- ## Un-bulleted List In Foundation, the `

Watch this part in video

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

List item with a much longer description or more content.
List item
List item
1. Nested list item
2. Nested list item
3. Nested list item
List item
List item
List item

` or `

` through `

` 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: ```html

Lorem Ipsum Dolor

Watch this part in video

Days without merge conflict

128