PostCSS Fluid Typography

Responsive typography values using linear scale: define fluid properties for font-size, line-height, and letter-spacing.

A plugin for PostCSS. Fork of postcss-responsive-type with slightly different ergonomics and support for custom properties.

Usage

Quick Start

Set a fluid font-size on html and use rem units throughout your site to create a whole fluid UI.

html {
  font-size: fluid;
}

Specify Parameters

Units can be in px, rem, or em. When using em units, specify the font-range in em as well.

html {
  font-size: fluid 12px 21px; /* min-size, max-size */
  font-range: 420px 1280px; /* viewport widths between which font-size is fluid */
}

Fluid Line Height and Letter-Spacing

You can also set fluid sizes for the line-height and letter-spacing properties. They have the same syntax and work the same way as fluid font sizes. Note: Unitless line heights are not supported.

html {
  line-height: fluid 1.2em 1.8em;
  line-height-range: 420px 1280px;
}

html {
  letter-spacing: fluid 0px 4px;
  letter-spacing-range: 420px 1280px;
}

Defaults

You only need to specify the fluid property, all other values have sane defaults.

Font Size

• min-font-size: 14px
• max-font-size: 21px
• lower-font-range: 420px
• upper-font-range: 1280px

Line Height

• min-line-height: 1.2em
• max-line-height: 1.8em
• lower-line-height-range: 420px
• upper-line-height-range: 1280px

Letter-Spacing

• min-letter-spacing: 0px
• max-letter-spacing: 4px
• lower-letter-spacing-range: 420px
• upper-letter-spacing-range: 1280px

Browser Support

The plugin just uses calc, vw units, and media queries behind the scenes, so it works on all modern browsers except Opera Mini. Legacy browsers will ignore the output fluid font-size. You can easily provide a simple static fallback:

.foo {
  font-size: 16px;
  font-size: fluid;
}

License

MIT © Philipp Daun