RFS: Responsive Font Sizing

Video Transcript

Hello and welcome to LiveCanvas.

In this video we’re going to talk about responsive typography, and discover how easy it is to take advantage of it.
But first let’s step back a bit to introduce this concept, and where it comes from.

Today, one of the biggest challenges when designing a web page is to achieve a great result across all different kinds of devices: from mobile phones to extra-wide desktop computer screens, with everything in-between.

This is what we call “the responsive web” - where accomplishing a good result requires quite a lot of effort and needs more powerful tools, compared to the era when websites were experienced on desktop computers only.

In LiveCanvas, you have Bootstrap 5 under the hood, making it easier to deal with many problems that arise from having to adapt to all these different devices.

One of the great tools that come with Bootstrap is responsive typography.
This means the ability to dynamically set font size, in a way that scales with the viewport size.

This is achieved via a fantastic software module called RFS, which of course stands for Responsive Font Sizes. It fluidly scales text while keeping an upper and lower limit, so text readability can be assured.

The good news is that you don't need to know much about RFS to profit from it.
Actually you don’t need to do anything at all.
In Bootstrap 5, RFS is active by default and works automatically behind the scenes, resizing the font size of headings and large text depending upon screen size.

You don’t need to take care of anything to achieve this. It happens each time you use a heading or a display utility class.

Let’s dive into a practical example.

So this is a web page I just assembled with LiveCanvas as a test, with some simple components. Of course, we’re running the picostrap5 theme, so we have Bootstrap 5 under the hood.

Let’s have a look at this heading, for example.
Let’s inspect it.
This is an H2 heading with a display dash 5 class, which is responsible for it’s font size.
Let’s check which is the actual computed font size by the browser.
On desktop, the font size is rendered at 48 pixels, but if I switch to mobile, it is scaling down to 31 pixels.

It’s easy to see how this is really, really useful, from a design perspective.
If the font size would have been 48 pixel size everywhere, it would have looked terrible on mobile. And maybe you would have then resorted to a media query to fix things, which makes code more complicated and hard to maintain.

Here we have an h2 class, h2 class display-5. The display-5 class is responsible for setting this larger font size: if we remove it for a moment, the heading is going to be much smaller.

The rendered font size scales progressively as the viewport is being resized, as you can see, this text does gently become smaller.

But let's have a look at what happens somewhere else. This is a lead paragraph.

Both on desktop and mobile, it’s rendered at 20 pixels.
So responsive font sizing it is NOT applied to all tags out of the box.
By default, it's not enabled on paragraph elements.

Let’s see another case.
I'm going to remove all the applied classes so we can check what happens to a pure H2 tag.
The font size here is 24 pixels on mobile, and it is 32 pixels on desktop.

So by default, all headings are having responsive font sizing applied. Which is clearly very useful.

By the way, we won’t go thru showing this right now, but If you want to control the font sizes applied to each kind of heading, you can use the WordPress Customizer and easily tweak the Typography options.

Now let’s go to another topic. This is really useful for designers.
In the Picostrap theme, we have introduced some special utility classes to give easy fine grained control over responsive font sizing.

These are especially handy to use in LiveCanvas. We’ll quickly demonstrate it right now.

Let’s launch the LiveCanvas editor.
Upon clicking on some editable text you’ll see the text editing toolbar.
Now if I click the classes link in here, an extra toolbar is revealed.

From this toolbar we can control the colors.
the alignment.
Font weights.
Paragraph classes.
Display classes.
The heading classes.
and finally, responsive font sizing.

As you can see, if I click in here, I can control the font size.

But the cool thing is that font size is responsively applied using our own utility classes, defined in the Picostrap theme.

Let’s make it super large on desktop, and see how it scales on mobile.

Let’s open the HTML editor, to have a look at what’s going on in the code to make this work.

The editor has just added the rfs dash 50 class to the element.

You can use values from 1 to 50. Now I’m going to change it to 20.

Really useful.

Now let’s have a look at the RFS utility class demo pages.

Let’s head over to the picostrap site and pick a demo.

In the menu, inside “Extras”, you’ll find the link for the RFS demo page.

So this is a simple page showcasing all the RFS utility classes.

Actually these are paragraph elements, but you can use these classes on every text element, headings, spans or whatever.

As a demonstration of this, let’s change the p element into a span element.

Let’s check one more time how the responsive sizing is working.

The computed font size is 57 pixels on mobile and 112 on desktop so yes, it’s fully working.

So to sum up, these RFS utility classes give you the power to control responsive font sizing instantly, directly in your HTML. Of course you can use them everytime you want, both from the WYSIWYG text editing interface and from the code editor.