Preview your type hierarchy in browser
CSS JavaScript HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
fonts
js
scss
.gitignore
README.md
gulpfile.js
index.html
package.json
screencast.gif

README.md

Taper

(n.) The thinning ending of a stroke (fontshop)

Taper is a quick and dirty way of rendering a type hierarchy in the browser. It's a great way to find pairings that work well together in a browser.

Read the blog post that describes its reason for being.

Setup

  • Clone the repo
  • npm install
  • gulp

Usage

Taper example

Open up http://localhost:3000 in your favourite browser and you will see some example text and a list of available styles. Click on the sample text on the left (or the HTML block) to edit. Click on sample text and then select a style from the right. Your changes are stored in the browser in case you hit refresh.

Changing type styles

The style rules are derived from _typography.scss. For more on this technique see Taming typography using Sass maps.