# This is Fluid Typography

Have you noticed when you resize your borwser's width to check responsivness of your web app your heading stay the same size for the most of the time, while your paragraphs shift and chage and jump all over the place. Well, not any more. Try resizing this window and be impressed.

Works like magic doesen't it? Not only the heading changes but the paragraph's size adopts to different screen size's of your end users' devices

## How does it work?

Well, it all starts at html tag, since we are going to rely on the widht of the window to set our font-size, we are going to use vw units to decide on the font-size. One ve (1vw) is equal to 1% of the browsers window width, threfore 2vw sound just right, aroud 16px on a standard screen. Excepts, when your device is smaller then 400px you will have a reading difficulties since 2% of the browser width is not big enough for our font-size.

We can fix this by adding a calc expression to our root tag in css and let's say, we want to have our root font-size to be 1em plus 1vw. It will look something like this calc(1em+1vw). In otherwords, when our vieport is 0 we going to have at lease 1em font-size, added to 1% of view port width.

### But it never stops!

It definately fixed our small font-size dillema, but font-size just grows and grows when we stretch the browser. Wouldn't be nice to have max-font-size property in CSS?

Let's say we want the font-size stop growing when screen width reaches 800px or 50em and we gonna have it at 1.5em.

     /* setting the max font-size*/
     @media screen and (min-width: 50em) {
      html {
        font-size: 1.5em;
      }

    }

You can read more on this in the article bellow

##### Smashing magazine articel

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal.

Robert Bringhurst