4

# Editor

I don't know how to render this.

> Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating new Typography themes with CSS feels hard.

> Typography.js

# Typography.js

A powerful toolkit for building websites with beautiful design.

## Install

`npm install typography`

## Demo/playground

http://kyleamathews.github.io/typography.js

## Why

Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating new Typography themes with CSS feels hard.

Typography.js provides a vastly simpler way to define and explore typography designs.

You provide configuration to the Typography.js JS api and it uses its Typography engine to generate CSS for block and inline elements.

Typography.js makes it easy to create designs that are unique, personal, and custom to your project.

## Themes & Plugins

- themes: Typography.js themes are simple Javascript objects. As such they’re easy to share across projects or even open source and share via NPM.
- plugins: Plugins are functions that extend or modify the core Typography engine. They can change how headers are styled or add specialized styles e.g. for code or tables.

## Sites that use Typography.js

- bricolage.io (source)
- React Headroom (source)
- Gatsby Blog Starter (source)
- ollieglass.com
- Edit this file to add yours!

## Javascript usage

    const typography = new Typography({
    	baseFontSize: '18px',
    	baseLineHeight: 1.666,
    	headerFontFamily: ['Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
    	bodyFontFamily: ['Georgia', 'serif'],
    	// See below for the full list of options.
    })

    // Output CSS as string.
    typography.toHTML()

    // Or insert styles directly into the  (works well for client-only
    // JS web apps.
    typography.injectStyles()

# Preview (static html)