postcss-responsive-type

    1.0.0 • Public • Published

    PostCSS Responsive Type

    NPM version Build Status Dependency Status

    PostCSS plugin for automagical responsive typography. Adds a responsive property to font-size, line-height and letter-spacing that generates complex calc and vw based font sizes.

    Inspired by this post from @MikeRiethmuller, and Typographic.

    Part of Rucksack - CSS Superpowers.

    Responsive Type Demo

    Quick start:
    html {
      font-size: responsive;
    }
    Specify parameters:

    Units can be in px, rem, or em. When using em units, be sure that the font-range is specified in em as well.

    html {
      font-size: responsive 12px 21px; /* min-size, max-size */
      font-range: 420px 1280px; /* viewport widths between which font-size is fluid */
    }
    Expanded syntax:
    html {
      font-size: responsive;
      min-font-size: 12px;
      max-font-size: 21px;
      lower-font-range: 420px;
      upper-font-range: 1280px;
    }
    Responsive line-height and letter-spacing:

    PostCSS Responsive Type also allows you to set fluid sizes for the line-height and letter-spacing properties. They have the same syntax and work the same way as responsive font sizes.

    html {
      line-height: responsive 1.2em 1.8em;
      line-height-range: 420px 1280px;
     
      /* or extended syntax: */
      line-height: responsive;
      min-line-height: 1.2em;
      max-line-height: 1.8em;
      lower-line-height-range: 420px;
      upper-line-height-range: 1280px;
    }
    html {
      letter-spacing: responsive 0px 4px;
      letter-spacing-range: 420px 1280px;
     
      /* or extended syntax: */
      letter-spacing: responsive;
      min-letter-spacing: 0px;
      max-letter-spacing: 4px;
      lower-letter-spacing-range: 420px;
      upper-letter-spacing-range: 1280px;
    }

    Note: Unitless line heights are not supported.

    --

    Defaults

    To get started you only need to specify the responsive 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

    postcss-responsive-type just uses calc, vw units, and media queries behind the scenes, so it works on all modern browsers (IE9+). Although Opera Mini is not supported.

    Legacy browsers will ignore the output responsive font-size. You can easily provide a simple static fallback:

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

    Alternatively, if you feel the need to fully support legacy browsers or Opera Mini, there are polyfills that can help!

    --

    Usage

    postcss([ require('postcss-responsive-type')() ])

    See PostCSS docs for examples for your environment.

    You can use postcss-responsive-type with Stylus through PostStylus.

    --

    License

    MIT © Sean King

    Install

    npm i postcss-responsive-type

    DownloadsWeekly Downloads

    17,277

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • avatar