postcss-typescale

postcss-typescale

francoisromain.github.io/postcss-typescale

A PostCSS plugin to set type.

---

Installation

Install the npm package:

$ npm install postcss-typescale --save-dev

Require with PossCSS:

postcss([ require('postcss-typescale') ])

See PostCSS docs to setup with Gulp, Grunt, Webpack, npm scripts…

---

Configuration (optional)

Global settings (and default values):

@typescale ([name]) {
  scale: 1.25;          /* See type-scale.com to choose a scale */
  font-size: 1rem;      /* default font size */
  line-height: 1.5rem;  /* If no unit is provided, line-height is relative to font-size */
}

• name (optional): custom identifier. If no name is provided, the default settings are overwritten.

---

Usage

typescale: ([name]) [index] ([line-height-fraction])

• name (optional, default = default): string identifier referring to a settings atRule.
• index: positive or negative integer. font-size = font-size * scale ^index.
• line-height-fraction (optional, default = 1): float or fraction. line-height = line-height * line-height-fraction.

Examples

.my-title {
  typescale: 3 1.5;
}

.my-small-text {
  typescale: -1;
}

.my-extra-small-text {
  typescale: -2 0.5;
}

input, output, markup, demo