<% @side_nav = "type" %>
<% @page_title = "Typography" %>

<%= @page_title %>

Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.

We're no longer depending on modular scale in the core of Foundation. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Foundation. We'll still use Compass.

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header. h1.
h6. This is a tiny header. h1.
<%= code_example '

h1. This is a very large header.

h2. This is a large header.

h3. This is a medium header.

h4. This is a moderate header.

h5. This is a small header. h1.
h6. This is a tiny header. h1.
', :html %>

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader
<%= code_example '

h1.subheader

h2.subheader

h3.subheader

h4.subheader

h5.subheader
h6.subheader
', :html %>

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.
<%= code_example '

h1. Small segment header.

h2. Small segment header.

h3. Small segment header.

h4. Small segment header.

h5. Small segment header.
h6. Small segment header.
', :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 you <em> to italicize your words.

<%= code_example '

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

', :html %>

Links

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

<%= code_example '

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

', :html %>

Lists

Lists are helpful for, well, lists of things.

ul.disc
  • 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
ul.circle
  • 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
ul.square
  • 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 Lists
  1. List Item 1
  2. List Item 2
  3. List Item 3
Defition Lists
Definition Title
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
<%= code_example '
  • 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
  1. List Item 1
  2. List Item 2
  3. List Item 3
Definition List
Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.
', :html %>

Blockquotes

Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.

I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
<%= code_example '
I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.Isaac Asimov
', :html %>

V-Cards

Here's a handy microformat-friendly list to address all your needs.

<%= code_example ' ', :html %>

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 classes you can use to control elements printing, or not printing. Simply attached .print-only on an element to only show when printing, and .hide-on-print to hide something when printing.

Available SCSS Variables

We've got a ton of variables for you to use to customize your typography.

<%= code_example ' /* We use these to control header font styles */ $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; $header-font-weight: bold; $header-font-style: normal; $header-font-color: #222; $header-line-height: 1.4; $header-top-margin: .2em; $header-bottom-margin: .5em; $header-text-rendering: optimizeLegibility; /* We use these to control header font sizes */ $h1-font-size: emCalc(44px); $h2-font-size: emCalc(37px); $h3-font-size: emCalc(27px); $h4-font-size: emCalc(23px); $h5-font-size: emCalc(18px); $h6-font-size: 1em; /* These control how subheaders are styled. */ $subheader-line-height: 1.4; $subheader-font-color: lighten($header-font-color, 30%); $subheader-font-weight: 300; $subheader-top-margin: .2em; $subheader-bottom-margin: .5em; /* A general styling */ $small-font-size: 60%; $small-font-color: lighten($header-font-color, 30%); /* We use these to style paragraphs */ $paragraph-font-family: inherit; $paragraph-font-weight: normal; $paragraph-font-size: 1em; $paragraph-line-height: 1.6; $paragraph-margin-bottom: emCalc(20px); $paragraph-aside-font-size: emCalc(14px); $paragraph-aside-line-height: 1.35; $paragraph-aside-font-style: italic; /* We use these to style tags */ $code-color: darken($alert-color, 15%); $code-font-family: Consolas, "Liberation Mono", Courier, monospace; $code-font-weight: bold; /* We use these to style anchors */ $anchor-text-decoration: none; $anchor-font-color: $primary-color; $anchor-font-color-hover: darken($primary-color, 5%); /* We use these to style the
element */ $hr-border-width: 1px; $hr-border-style: solid; $hr-border-color: #ddd; $hr-margin: emCalc(20px); /* We use these to style lists */ $list-style-position: outside; $list-side-margin: emCalc(18px); $definition-list-header-weight: bold; $definition-list-header-margin-bottom: .3em; $definition-list-margin-bottom: emCalc(12px); /* We use these to style blockquotes */ $blockquote-font-color: lighten($header-font-color, 30%); $blockquote-padding: emCalc(9px) emCalc(20px) 0 emCalc(19px); $blockquote-border: 1px solid #ddd; $blockquote-cite-font-size: emCalc(13px); $blockquote-cite-font-color: lighten($header-font-color, 20%); $blockquote-cite-link-color: $blockquote-cite-font-color; /* Acronym styles */ $acronym-underline: 1px dotted #ddd; /* We use these to control padding and margin */ $microformat-padding: emCalc(10px) emCalc(12px); $microformat-margin: 0 0 emCalc(20px) 0; /* We use these to control the border styles */ $microformat-border-width: 1px; $microformat-border-style: solid; $microformat-border-color: #ddd; /* We use these to control full name font styles */ $microformat-fullname-font-weight: bold; $microformat-fullname-font-size: emCalc(15px); /* We use this to control the summary font styles */ $microformat-summary-font-weight: bold; /* We use this to control abbr padding */ $microformat-abbr-padding: 0 emCalc(1px); /* We use this to control abbr font styles */ $microformat-abbr-font-weight: bold; $microformat-abbr-font-decoration: none; ', :css %>
<%= render "_sidebar-components.html.erb" %>