Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

postcss-responsive-type

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

postcss-responsive-type

PostCSS plugin that adds responsive magic to font-size

  • 1.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
8.6K
increased by4.84%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

FAQs

Package last updated on 18 Jul 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc