PostCSS plugin for responsive typography values using linear scale
npm install postcss-fluid-typographyResponsive typography values using linear scale: define fluid properties for font-size,line-height, and letter-spacing.
A plugin for [PostCSS][postcss]. Fork of [postcss-responsive-type][upstream] with slightly
different ergonomics and support for custom properties.
![Fluid Typogrpahy Demo][demo]
Set a fluid font-size on html and use rem units throughout your site to create a whole fluid UI.
``css`
html {
font-size: fluid;
}
Units can be in px, rem, or em. When using em units, specify the font-range in em as well.
`css`
html {
font-size: fluid 12px 21px; / min-size, max-size /
font-range: 420px 1280px; / viewport widths between which font-size is fluid /
}
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.
`css`
html {
line-height: fluid 1.2em 1.8em;
line-height-range: 420px 1280px;
}
`css`
html {
letter-spacing: fluid 0px 4px;
letter-spacing-range: 420px 1280px;
}
You only need to specify the fluid property, all other values have sane defaults.
- min-font-size: 14pxmax-font-size
- : 21pxlower-font-range
- : 420pxupper-font-range
- : 1280px
#### Line Height
- min-line-height: 1.2emmax-line-height
- : 1.8emlower-line-height-range
- : 420pxupper-line-height-range
- : 1280px
#### Letter-Spacing
- min-letter-spacing: 0pxmax-letter-spacing
- : 4pxlower-letter-spacing-range
- : 420pxupper-letter-spacing-range
- : 1280px
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:
`css``
.foo {
font-size: 16px;
font-size: fluid;
}
MIT © Philipp Daun
[PostCSS]: https://github.com/postcss/postcss
[upstream]: https://github.com/seaneking/postcss-responsive-type
[demo]: /demo.gif?raw=true