npm package: @getbase/typography
Description: Base Typography
Author: Matthew Hartman
Latest version: 4.1.1

# [Base Typography](http://getbase.org)

Base Typography is designed in a way where you can add it on top of the Base CSS framework or to your own custom project.

[![Travis Build Status][travis-img]][travis] [![David Dependencies Status][david-img]][david]

[travis-img]:   https://img.shields.io/travis/getbase/typography.svg?branch=master
[david-img]:    https://img.shields.io/david/dev/getbase/typography.svg?branch=master&label=dependencies
[travis]:       https://travis-ci.org/getbase/typography
[david]:        https://david-dm.org/getbase/typography?type=dev

* * *

## Table of contents

* [Overview](#overview)
* [Installation](#installation)
* [Documentation](#documentation)
* [Demo](#demo)
* [Support](#support)
* [Authors](#authors)
* [License](#license)

* * *

## Overview

Base Typography contains styles for headings, copy, blockquotes, codeblocks, lists and all other standard typography.

* * *

## Installation

If you have an existing project and would like to include the Base typography module, run the following command:

```bash
npm install --save @getbase/typography
```

Once you have the typography module installed, you can include it in your CSS/LESS/SCSS file with one of the following ways:

#### CSS Import:
  ```css
  @import url("https://unpkg.com/@getbase/typography/index.css");
  ```

#### SCSS Import:

  ```scss
  /* Import Base Typography */
  @import "~@getbase/typography/scss/index";
  /* Your Other Styles */
  @import "main"
  ```


#### LESS Import:

  ```less
  /* Import Base Typography */
  @import "~@getbase/typography/less/index";
  /* Your Other Styles */
  @import "main"
  ```

* * *

## Documentation

Base Typography includes styles for headings (`h1 - h6`), heading helpers (`.fs-1` - `.fs-6`), links, horizontal lines, and general typography.

#### Helpers (Applies to SCSS/LESS)

| Helper Class | Purpose | Example | Outcome |
| ------------ | ------- | ------- | ------- |
| `.fs-1` | Apply the same font size and line height as a `h1` | `<span class="fs-1">Heading</span>` | Applies `h1` font size and line height to a `span` element |
| `.fs-2` | Apply the same font size and line height as a `h2` | `<span class="fs-2">Heading</span>` | Applies `h2` font size and line height to a `span` element |
| `.fs-3` | Apply the same font size and line height as a `h3` | `<span class="fs-3">Heading</span>` | Applies `h3` font size and line height to a `span` element |
| `.fs-4` | Apply the same font size and line height as a `h4` | `<span class="fs-4">Heading</span>` | Applies `h4` font size and line height to a `span` element |
| `.fs-5` | Apply the same font size and line height as a `h5` | `<span class="fs-5">Heading</span>` | Applies `h5` font size and line height to a `span` element |
| `.fs-6` | Apply the same font size and line height as a `h6` | `<span class="fs-6">Heading</span>` | Applies `h6` font size and line height to a `span` element |

### SCSS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `$base-background-color` | Color applied to the background body | `#fff` |
| `$base-font-family` | Font family applied to body | `sans-serif` |
| `$base-font-size` | Font size applied to body | `16px` |
| `$base-line-height` | Line height applied to body | `22px` |
| `$base-font-weight` | Font weight applied to body | `400` |
| `$base-font-color` | Font color applied to body | `#000` |
| `$base-link-color` | Color applied to links | `#000` |
| `$base-link-hover-color` | Color applied to links on hover | `#000` |
| `$base-link-active-color` | Color applied to links on active | `#000` |
| `$base-heading-font-family` | Font family applied to headings `h1 - h6` | `sans-serif` |
| `$base-h1-font-size` | Heading 1 font size | `32px` |
| `$base-h1-line-height` | Heading 1 line height | `38px` |
| `$base-h1-font-weight` | Heading 1 font weight | `700` |
| `$base-h1-color` | Heading 1 color | `#000` |
| `$base-h2-font-size` | Heading 2 font size | `26px` |
| `$base-h2-line-height` | Heading 2 line height | `32px` |
| `$base-h2-font-weight` | Heading 1 font weight | `700` |
| `$base-h2-color` | Heading 2 color | `#000` |
| `$base-h3-font-size` | Heading 3 font size | `22px` |
| `$base-h3-line-height` | Heading 3 line height | `28px` |
| `$base-h3-font-weight` | Heading 3 font weight | `700` |
| `$base-h3-color` | Heading 3 color | `#000` |
| `$base-h4-font-size` | Heading 4 font size | `18px` |
| `$base-h4-line-height` | Heading 4 line height | `24px` |
| `$base-h4-font-weight` | Heading 4 font weight | `700` |
| `$base-h4-color` | Heading 4 color | `#000` |
| `$base-h5-font-size` | Heading 5 font size | `16px` |
| `$base-h5-line-height` | Heading 5 line height | `22px` |
| `$base-h5-font-weight` | Heading 5 font weight | `700` |
| `$base-h5-color` | Heading 5 color | `#000` |
| `$base-h6-font-size` | Heading 6 font size | `14px` |
| `$base-h6-line-height` | Heading 6 line height | `20px` |
| `$base-h6-font-weight` | Heading 6 font weight | `700` |
| `$base-h6-color` | Heading 6 color | `#000` |
| `$base-blockquote-font-family` | Font family applied to blockquotes | `sans-serif` |
| `$base-blockquote-font-size` | Font size applied to blockquotes | `18px` |
| `$base-blockquote-line-height` | Line height applied to blockquotes | `24px` |
| `$base-blockquote-line-height` | Line height applied to blockquotes | `24px` |
| `$base-blockquote-font-weight` | Font weight applied to blockquotes | `400` |
| `$base-blockquote-cite-font-weight` | Font weight applied to a `cite` within a blockquote | `700` |
| `$base-code-font-family` | Font family applied to code blocks | `monospace` |
| `$base-code-font-size` | Font size applied to code blocks | `13px` |
| `$base-code-line-height` | Line height applied to code blocks | `18px` |
| `$base-code-color` | Font color applied to code blocks | `#000` |
| `$base-code-background-color` | Background color applied to code blocks | `#f7f7f7` |
| `$base-code-border-color` | Border color applied to code blocks | `#e7e7e7` |

### LESS

#### Variables

| Variable | Purpose | Default | 
| -------- | ------- | ------- |
| `@base-background-color` | Color applied to the background body | `#fff` |
| `@base-font-family` | Font family applied to body | `sans-serif` |
| `@base-font-size` | Font size applied to body | `16px` |
| `@base-line-height` | Line height applied to body | `22px` |
| `@base-font-weight` | Font weight applied to body | `400` |
| `@base-font-color` | Font color applied to body | `#000` |
| `@base-link-color` | Color applied to links | `#000` |
| `@base-link-hover-color` | Color applied to links on hover | `#000` |
| `@base-link-active-color` | Color applied to links on active | `#000` |
| `@base-heading-font-family` | Font family applied to headings `h1 - h6` | `sans-serif` |
| `@base-h1-font-size` | Heading 1 font size | `32px` |
| `@base-h1-line-height` | Heading 1 line height | `38px` |
| `@base-h1-font-weight` | Heading 1 font weight | `700` |
| `@base-h1-color` | Heading 1 color | `#000` |
| `@base-h2-font-size` | Heading 2 font size | `26px` |
| `@base-h2-line-height` | Heading 2 line height | `32px` |
| `@base-h2-font-weight` | Heading 1 font weight | `700` |
| `@base-h2-color` | Heading 2 color | `#000` |
| `@base-h3-font-size` | Heading 3 font size | `22px` |
| `@base-h3-line-height` | Heading 3 line height | `28px` |
| `@base-h3-font-weight` | Heading 3 font weight | `700` |
| `@base-h3-color` | Heading 3 color | `#000` |
| `@base-h4-font-size` | Heading 4 font size | `18px` |
| `@base-h4-line-height` | Heading 4 line height | `24px` |
| `@base-h4-font-weight` | Heading 4 font weight | `700` |
| `@base-h4-color` | Heading 4 color | `#000` |
| `@base-h5-font-size` | Heading 5 font size | `16px` |
| `@base-h5-line-height` | Heading 5 line height | `22px` |
| `@base-h5-font-weight` | Heading 5 font weight | `700` |
| `@base-h5-color` | Heading 5 color | `#000` |
| `@base-h6-font-size` | Heading 6 font size | `14px` |
| `@base-h6-line-height` | Heading 6 line height | `20px` |
| `@base-h6-font-weight` | Heading 6 font weight | `700` |
| `@base-h6-color` | Heading 6 color | `#000` |
| `@base-blockquote-font-family` | Font family applied to blockquotes | `sans-serif` |
| `@base-blockquote-font-size` | Font size applied to blockquotes | `18px` |
| `@base-blockquote-line-height` | Line height applied to blockquotes | `24px` |
| `@base-blockquote-font-weight` | Font weight applied to blockquotes | `400` |
| `@base-blockquote-cite-font-weight` | Font weight applied to a `cite` within a blockquote | `700` |
| `@base-code-font-family` | Font family applied to code blocks | `monospace` |
| `@base-code-font-size` | Font size applied to code blocks | `13px` |
| `@base-code-line-height` | Line height applied to code blocks | `18px` |
| `@base-code-color` | Font color applied to code blocks | `#000` |
| `@base-code-background-color` | Background color applied to code blocks | `#f7f7f7` |
| `@base-code-border-color` | Border color applied to code blocks | `#e7e7e7` |

* * *

## Demo

[View page example](https://unpkg.com/@getbase/typography/index.html) with the typography stylesheet applied.

* * *

## Support

* IE10+ and all other modern browsers.
* Please specify browsers you need to support in `package.json` according to [browserslist docs](https://github.com/ai/browserslist#queries).

* * *

## Authors

#### Matthew Hartman

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)
* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.