PostCSS RFS (the responsive-font-size property)
PostCSS RFS lets you use the
responsive-font-size
property which automatically calculates the appropriate font size based on the dimensions of the monitor or device.
What is RFS?
RFS (abbreviation for responsive font size) is the name of the algorithm which calculates the font size of the
responsive-font-size
property. It's also used by the RFS mixin.
Advantages
- Font sizes will rescale for every screen or device, this prevents long words from being chopped off the screen on mobile devices.
- The minimum font size (configuration variable) will prevent the font size from becoming too small so readability can be assured.
- Super easy to use, no need to define complex configurations for each font size.
- Font sizes of all text elements will always remain in relation with each other.
Instalation
You can use the responsive-font-size
property in your project by installing PostCSS RFS
using a package manager:
npm:
$ npm install postcss-rfs --save
yarn:
$ yarn add postcss-rfs
Bower:
$ bower install postcss-rfs --save
Usage
This input:
.title {
responsive-font-size: 62px;
}
Will generate this:
.title {
font-size: 62px;
}
@media (max-width: 1200px) {
.title {
font-size: calc(23.6px + 3.2vw);
}
}
It's also possible to use rem
units. All other units (em, vw, ch,...) are ignored (the media query will not be
generated).
Example
var fs = require('fs');
var postcss = require('postcss');
var rfs = require('postcss-rfs');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
minimumFontSize: 14
};
var processedCss = postcss(rfs(options)).process(css).css;
fs.writeFile('main.dest.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('Responsive font sizes generated.');
});
Gulp example
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var rfs = require('../..');
var options = {
// Add configuration here
};
gulp.task('css', function () {
return gulp.src('./src/main.css')
.pipe(postcss([rfs(options)]))
.pipe(gulp.dest('./dest'));
});
Configuration
The configuration influences the calculation of the font size. In the graph above the default configuration is used.
minimumFontSize: (integer; px
-value)
Font sizes which are calculated by the responsive-font-size property will never be lower than this size. However, you
can still pass a smaller font size as a value for the property, but then there won't be any dynamically rescaling for
this font size. For example (see graph above): responsive-font-size: 19px
will trigger dynamic rescaling, with
responsive-font-size: 10px
it will just stay 10px
all the time.
Default value: 14
fontSizeUnit: (string)
The font size will be rendered in this unit. Possible units are px
and rem
.
Default value: px
breakpoint: (integer; px
-value)
Above this breakpoint, the font size will be equal to the font size you passed to the property; below the breakpoint,
the font size will dynamically scale.
Default value: 1200px
breakpointUnit: (string)
The width of breakpoint
will be rendered in this unit. Possible units are px
, em
and rem
.
Default value: px
factor: (number)
This value determines the strength of font size resizing. The higher factor
, the less difference there is between
font sizes on small screens. The lower factor
, the less influence the property has, which results in bigger font sizes
for small screens. factor
must me greater than 1, setting it to 1 will disable dynamic rescaling.
Default value: 5
twoDimensional (Boolean)
Enabling the two dimensional media queries will determine the font size based on the smallest side of the screen with
vmin
. This prevents the font size from changing if the device toggles between portrait and landscape mode.
Default value: false
unitPrecision (number)
Precision for float values.
Default value: 5
Best practices
- Remember to set the
responsive-font-size
tohtml
orbody
, otherwise some text may not dynamically rescale. Note that setting the property onhtml
will influence the value ofrem
. - Always set your line-heights relative (in
em
or unitless).