--- title: Typography layout: component.html ---

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.

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

HTML

{{#markdown}} ```html {{> examples_typography_basic}} ``` {{/markdown}}

Rendered HTML

{{> examples_typography_basic}}
*** ### Subheaders Lighten up your headers by adding a class of .subheader to any header element.

HTML

{{#markdown}} ```html {{> examples_typography_subheader}} ``` {{/markdown}}

Rendered HTML

{{> examples_typography_subheader_rendered}}
*** ### 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

{{#markdown}} ```html {{> examples_typography_small}} ``` {{/markdown}}

Rendered HTML

{{> examples_typography_small}}
*** ### 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 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*.

HTML

{{#markdown}} ```html

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 make it bold!. You can also use em to italicize your words.

``` {{/markdown}} ***
Need to align text? We made some slick utility classes to help you out.
### Links Links are very standard, and the [color is preset](http://www.youtube.com/watch?v=zT2aVoUkSDg) to the Foundation primary color.

HTML

{{#markdown}} ```html

Links are very standard, and the color is preset to the Foundation primary color.

``` {{/markdown}} *** ### Lists Lists are helpful for, well, lists of things. Didn't see that coming did you! There are baked-in styles for a number of different unordered list styles, as well as ordered and definition lists. {{> examples_typography_lists}} *** ### Blockquotes Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.

HTML

{{#markdown}} ```html
Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov
``` {{/markdown}}

Rendered HTML

Those people who think they know everything are a great annoyance to those of us who do.Isaac Asimov
*** ### V-Cards Here's a handy microformat-friendly list to *address* all your needs.

HTML

{{#markdown}} ```html {{> examples_typography_vcard}} ``` {{/markdown}}

Rendered HTML

{{> examples_typography_vcard}}
*** ### Print Styles Foundation includes print styles developed by HTML5 Boilerplate to give you some basic print-specific styles. These are activated when you print through a media query. It includes: * Clearing out backgrounds, box shadows and text shadows * Appending link URLs after the anchor text * Bordering blockquotes and pre elements * Page cleanup and window minimization On top of that, Foundation includes a couple of simple visibility classes you can use to control elements printing, or not printing. See [Print Visibility]({{rel 'components/visibility.html'}}#print-visibility) for more information. *** ### Available SCSS Variables We've got a ton of variables for you to use to customize your typography. #### SCSS {{> examples_typography_variables}} *** ##### Sass Errors? If the default "foundation" import was commented out, then make sure you import this file:

SCSS

{{#markdown}} ```scss @import "foundation/components/type"; ``` {{/markdown}}