francoisromain/postcss-typescale

A PostCSS plugin to set type.

postcss-typescale

francoisromain.github.io/postcss-typescale

A PostCSS plugin to set type based on a typographic scale.

---

Examples

@typescale {
  scale: 1.25;
  font-size: 1rem;
  line-height: 1.5rem;
}

.xxl {
  typescale: 3 2;
}

.xl {
  typescale: 2 1.5;
}

.l {
  typescale: 1 1.5;
}

.m {
  typescale: 0 1;
}

.s {
  typescale: -1 1;
}

.xs {
  typescale: -2 0.5;
}

01: input, output, markup, demo

02: input, output, markup, demo

---

Installation

Install the npm package:

npm install postcss 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; /* typographic scale */
  font-size: 1rem; /* default font size */
  line-height: 1.5rem; /* baseline grid */
}

• name (optional): custom identifier that allows multiple scales. If not provided, the default settings are overwritten.
• scale: typographic scale.
• font-size: default font size (at index 0).
• line-height: baseline grid. Relative to the font-size if set to 1 without unit.

---

Usage

.[your-style] {
  typescale: ([name]) [index] ([line-height-fraction]);
}

• name (optional, default = default): string identifier referring to the settings. If not provided, the rule refers to the default settings.
• index: null or positive or negative integer defining the font-size. font-size = settings font-size * scale ^index.
• line-height-fraction (optional, default = 1): float or fraction defining the line-height. line-height = settings line-height * line-height-fraction.