Adding responsive text support

The process of making text responsive within PostCSS shares some similarities to the postcss-responsive-images plugin we've already used, in both cases, all we need to add is a simple attribute to make our content responsive.

The plugin we need to use for text though is the PostCSS-responsive-type plugin by Sean King (available at https://github.com/seaneking/postcss-responsive-type); adding font-size, being responsive to a rule in our style sheet is enough to get us started. Of course, we almost certainly want to specify our own rules; for example, we can use something like this:

html {
  font-size: responsive 12px 21px; /* min-size, max-size */
  font-range: 420px 1280px; /* range of viewport widths */
}

This compiles into two media queries—one at 480px, and the other at 1280px; the former sets a text size of 12px, with the latter setting 21px as the font size. Without further ado, let's get stuck in and start using this plugin in anger:

Fire up a Node.js command and change the working directory to the project area.
Enter the command shown in this screenshot, then press Enter:

At this point, the plugin is installed—we can start to use it:

Start by extracting a copy of the Tutorial18 folder from the code download that accompanies this book; save it to the root area of our project folder.

In a new file, add the following code—this contains some simple font styling for our demo; save it as style.css in the src folder of our project area:

@font-face {
  font-family: 'robotoregular';
  src: url('Roboto-Regular-webfont.eot');
  src: url('Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('Roboto-Regular-webfont.woff') format('woff'),
       url('Roboto-Regular-webfont.ttf') format('truetype'),
       url('Roboto-Regular-webfont.svg#robotoregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: "robotoregular", sans-serif;
  font-size: responsive 12px 21px; 
  font-range: 420px 1280px; 
}

Next, open up a copy of the gulpfile.js file at the root of our project area.

Note how a reference to the postcss-responsive-type plugin has been added, as indicated:

var at2x = require('postcss-at2x');
var responsivetype = require('postcss-responsive-type');

The autoprefixer task has also been amended—it has a reference to the postcss-responsive-type plugin, using the variable that has been declared at the top of the file:
```
gulp.task('autoprefixer', function() {
  return gulp.src('src/*.css')
  .pipe(postcss([at2x(), responsivetype(), autoprefixer]))
  .pipe(gulp.dest('dest/'));
});
```
We can now compile the code from a Node.js command prompt, change the working directory to the project area, and run this command:
```
gulp
```
Once the code has compiled, copy the contents of the dest folder to the css folder of the Tutorial18 folder; if all is well, we should see this when previewing the results in a browser:

Try resizing the window to make it larger or smaller—you should notice that the text size increases or decreases in size, according to the size of the available screen estate. We can then use this as a basis for adding images; if we apply both postcss-responsive-images and postcss-responsive-type plugins, we can use this as a solid basis for adding responsive capabilities to our sites.

A small point to note though—we've used pixel values throughout our code. Historical convention recommended the use of em (or even better rem) values, as these scaled better than standard pixel values. However, some developers now argue that this convention is no longer valid; there are occasions when pixel em or rem values should be used. It's up to us to decide which unit of value to use, and when it should be used!

Note

For a good discussion on the merits of using pixel versus rem values, take a look at this post by Gion Kunz, at https://mindtheshift.wordpress.com/2015/04/02/r-i-p-rem-viva-css-reference-pixel/.

Leaving aside what is possible when working with media queries, there are a couple of key topics we should explore—optimizing media queries, and how we can retrofit some form of support for older browsers. We'll start with optimizing queries—PostCSS has a couple of useful plugins available to help with maintaining our code.

Previous Chapter

Making images responsive

Next Chapter

Optimizing media queries

Table of Contents for Mastering PostCSS for Web Design

Adding responsive text support

Note

Table of Contents for
Mastering PostCSS for Web Design