<commit_before>---
title: Typography
---

<h3 class="subheader">Typography in Foundation 5 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.</h3>

***

### Headers

Foundation includes styles for all of the header elements that are balanced and based on a modular scale (though modular-scale is not a dependency of Foundation).

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
{{> examples_typography_basic}}
	```
	{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_basic}}
		</div>
  </div>
</div>

***

### Subheaders

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

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
{{> examples_typography_subheader}}
	```
	{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_subheader}}
		</div>
  </div>
</div>

***

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

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
{{#markdown}}
```html
{{> examples_typography_small}}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_small}}
		</div>
  </div>
</div>

***

### 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 &#45;&#45; so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap `strong` around type to **make it bold!** You can also use `em` to *italicize your words*.

<h4>HTML</h4>

{{#markdown}}
```html
<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 there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
```
{{/markdown}}

***

### Links

Links are pretty standard  the [color is preset](http://www.youtube.com/watch?v=zT2aVoUkSDg) to the Foundation primary color.

<h4>HTML</h4>

{{#markdown}}
```html
<p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=zT2aVoUkSDg">color is preset</a> to the Foundation primary color.</p>
```
{{/markdown}}

***

### Lists
<commit_msg>adds link to utility classes to type page<commit_after>---
title: Typography
---

<h3 class="subheader">Typography in Foundation 5 is meant to make your life easier by providing clean, attractive, simple default styles for all of the most basic typographical elements.</h3>

***

### Headers

Foundation includes styles for all of the header elements that are balanced and based on a modular scale (though modular-scale is not a dependency of Foundation).

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
{{> examples_typography_basic}}
	```
	{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_basic}}
		</div>
  </div>
</div>

***

### Subheaders

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

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
  {{#markdown}}
  ```html
{{> examples_typography_subheader}}
	```
	{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_subheader}}
		</div>
  </div>
</div>

***

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

<div class="row">
  <div class="large-6 columns">
  <h4>HTML</h4>
{{#markdown}}
```html
{{> examples_typography_small}}
```
{{/markdown}}
  </div>
  <div class="large-6 columns">
  <h4>Rendered HTML</h4>
  	<div class="type-demo">
			{{> examples_typography_small}}
		</div>
  </div>
</div>

***

### 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 &#45;&#45; so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap `strong` around type to **make it bold!** You can also use `em` to *italicize your words*.

<h4>HTML</h4>

{{#markdown}}
```html
<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 there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>
```
{{/markdown}}

***

<div class="callout panel text-center">Need to align text? We made some slick <a href="http://foundation.zurb.com/docs/utility-classes.html">utility classes</a> to help you out. </div>

### Links

Links are pretty standard  the [color is preset](http://www.youtube.com/watch?v=zT2aVoUkSDg) to the Foundation primary color.

<h4>HTML</h4>

{{#markdown}}
```html
<p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=zT2aVoUkSDg">color is preset</a> to the Foundation primary color.</p>
```
{{/markdown}}

***

### Lists

{'fraction_non_alphanumeric': 0.1394422310756972, 'fraction_numerical': 0.010292164674634794, 'mean_word_length': 4.303697183098592, 'pattern_counts': {'":': 0, '<': 111, '<?xml version=': 0, '>': 123, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6184273', 'n_tokens_mistral': 1993, 'n_tokens_neox': 1905, 'n_words': 732}