RWD fluid typography without js or preprocessors

RWD Typography


I have been working in another interesting Responsive Web Design and Mobile First challenge where the client required to create a fluid font to auto adapt to the environment, problem was they have like 10 different environments, and what that’s mean is “10 different font sizes” to work with…

Of course we can create 10 @media queries and define the specific font-size, but want to make it better. That’s way CSS is an important part of the performance.

An option is to use the fittext js library to create a fluid font increasing and decreasing depending on the side of the screen, but we are going to rely on javascript for delivering the content, our core and business goal. We want to make it progressive orientate.

Another approach is using the media queries v4 definition measures: pt, px, %, vm, vh and vmin.

The vw unit
The vw unit (viewport width) is equal to 1/100th or 1% of the width of the viewport.

The vh unit
Similar to vw, the vh unit (viewport height) is equal to 1/100th or 1% of the height of the viewport.

The vmin unit
This unit is 1/100th or 1% of the minimum value between the height and the width of the viewport.


 Posible solution

The best solution is always depending on your project, for our project the best approach was a preprocessor. You end up using variables and increasing the font-size within the @media queries



Let’s see what we can do so far:

On this demo I’m using fittext.js, ’em’, ‘rem’, ‘vw’, px, % and other relative unit measures.

Click to view the example on full-screen

Note: Trick is, you need to reload the page in order to  the ‘vw’ make the change


Now, let’s see using just preprocessors (LESS in this case)

Using pre-processors to store the values on variables and increase them

Change the screen with to view the effect

Browser support

Currently, these units are only supported in Chrome 20+, IE9+ and Safari 6. To follow-up on browser implementations, take a look at http://caniuse.com/viewport-units.

Get the software (there are few ways to install the preprocessor):


PC Windows





A non Preprocessor solution using “calc()”


calc() all mayor browsers, but Android

Final result

calc() is a very good option, I love the way it works. But is not fully supported, even so, we can always work on fall back, or just use Preprocessors instead, without any javascript.

Wanna talk about it:@leolaneseltd

Leave a Reply

Your email address will not be published. Required fields are marked *

* Copy This Password *

* Type Or Paste Password Here *