zurb-foundation-5/doc/includes/typography/examples_typography_variables.html

Foundation 5 for npm (no code modification from original repo)

{{#markdown}}
```scss
$include-html-type-classes: $include-html-classes;

// 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: .2rem;
$header-bottom-margin: .5rem;
$header-text-rendering: optimizeLegibility;

// We use these to control header font sizes
$h1-font-size: rem-calc(44);
$h2-font-size: rem-calc(37);
$h3-font-size: rem-calc(27);
$h4-font-size: rem-calc(23);
$h5-font-size: rem-calc(18);
$h6-font-size: 1rem;

// These control how subheaders are styled
$subheader-line-height: 1.4;
$subheader-font-color: scale-color($header-font-color, $lightness: 35%);
$subheader-font-weight: 300;
$subheader-top-margin: .2rem;
$subheader-bottom-margin: .5rem;

// A general small styling
$small-font-size: 60%;
$small-font-color: scale-color($header-font-color, $lightness: 35%);

// We use these to style paragraphs
$paragraph-font-family: inherit;
$paragraph-font-weight: normal;
$paragraph-font-size: 1rem;
$paragraph-line-height: 1.6;
$paragraph-margin-bottom: rem-calc(20);
$paragraph-aside-font-size: rem-calc(14);
$paragraph-aside-line-height: 1.35;
$paragraph-aside-font-style: italic;
$paragraph-text-rendering: optimizeLegibility;

// We use these to style code tags
$code-color: scale-color($alert-color, $lightness: -27%);
$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: scale-color($primary-color, $lightness: -14%);

// We use these to style the hr element
$hr-border-width: 1px;
$hr-border-style: solid;
$hr-border-color: #ddd;
$hr-margin: rem-calc(20);

// We use these to style lists
$list-style-position: outside;
$list-side-margin: 0;
$list-nested-margin: rem-calc(20);
$definition-list-header-weight: bold;
$definition-list-header-margin-bottom: .3rem;
$definition-list-margin-bottom: rem-calc(12);

// We use these to style blockquotes
$blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
$blockquote-padding: rem-calc(9 20 0 19);
$blockquote-border: 1px solid #ddd;
$blockquote-cite-font-size: rem-calc(13);
$blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
$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: rem-calc(10 12);
$microformat-margin: rem-calc(0 0 20 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: rem-calc(15);

// We use this to control the summary font styles
$microformat-summary-font-weight: bold;

// We use this to control abbr padding
$microformat-abbr-padding: rem-calc(0 1);

// We use this to control abbr font styles
$microformat-abbr-font-weight: bold;
$microformat-abbr-font-decoration: none;
```
{{/markdown}}