Back to Overview

Responsive Font Sizing


Making your font size responde to your screen size, easy & maintainable.

Lately quite a few people approached me asking how I got responsive text sizing working so neatly on my "Out of Words" framework. They went on in great length why this isn't really possible in HTML/CSS without JS. And if you really get it to work, it's tedious to develop & maintain.

Well, that's not true. And I can show you how I did it. It's purely HTML & CSS. And it isn't complicated either.

I used LESS to help me with my CSS here, but any other CSS preprocessor can do the same. And you should know a bit about how variables & media queries work. That's all we need to make it happen.

Lets get started. First, we will be working with the "rem" unit for font sizing. "rem" refers to the font-size of the root element (meaning the HTML tag). So we need to define our base font size on the HTML element.

First, I define a variable in LESS, that I called "@basefont-size-singlecol-traditional" as in my example:

@basefont-size-singlecol-traditional: 13px;

Remember, this is 2013. We are building mobile first & the font size you just defined is the lowest size you want to allow.

After that, you should connected this variable with the font-size on our HTML element. In LESS this would look like this:

html /*.singlecol*/ {
    font-size: @basefont-size-singlecol-traditional;
    line-height: 1.45;
}

Don't forget to set your line height relative, so it can scale with your font size.

Now you can throw out some media-queries that target the break-points you want your font-size to change. In my case I have 8 defined breakpoints. And I use my variables to increase the font size on every media query for a fixed amount (as much as you would like to increase it for every breakpoint). Later on, if I need to change the base font size for some reason, I only need to change the value in the "@basefont-size-singlecol-traditional" & everything else takes care of its self.

@media only screen and (max-width: 499px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 1;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 7;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 1;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 7;
            }
        }
    }
}
@media only screen and (min-width: 500px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 2;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 8;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 2;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 8;
            }
        }
        body {
            width: @base-body-width-traditional + 40px;
        }
    }
}
@media only screen and (min-width: 600px) {
    html {
        font-size: @basefont-size-singlecol-traditional + 3;
        &.BigFont {
            font-size: @basefont-size-singlecol-traditional + 9;
        }
        &.multicol {
            font-size: @basefont-size-multicol-traditional + 3;
            &.BigFont {
                font-size: @basefont-size-multicol-traditional + 9;
            }
        }
        body {
            width: @base-body-width-traditional + 80px;
        }
    }
}

As you can see I added the width of the content area as a variable as well. This makes it possible to maintain roughly the same amount of characters per line. This way you can preserve the line lenght as your text scales. If you want to see how this feels for real, check out the theme preview pages on Out of Words or go and grab yourself Words App.

Have fun. Upcoming soon, a post about how to make your article multi-column in a nice newspaper-like style.

Bye, Sven