wearefriday / taper

Preview your type hierarchy in browser

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Preview your type hierarchy in browser


Languages

Language:CSS 57.6%Language:JavaScript 34.4%Language:HTML 8.1%