An Explanation of Responsive Typography

Embracing fluid typography 

It is much easier than you think. It support's wide browser and it is very simple to implement and it can be achieved without losing any control of important elements of design.

Responsive typography will only changes at a set breakpoints but fluid typography resizes itself very smoothly to match any device width. Fluid typography is a intuitive option for the website in which we have a practically so many screen sizes to support. But as compare to responsive techniques it very much less used technique. So now it doesn’t mean we don't have to learn about the typography. We just have to learn how to apply these techniques and we know in a slightly way. we have to learn carefully about crafted experience and screen sizes.

Getting Started With Fluid Typography Link:

Viewport units it will be possible on web by the fluid typography. Viewport units it refers to a percentage of browser Viewport dimensions.

Like one viewport width(VW) that is eqaul to 1% of viewport width. They are always relative to viewport so units differ from percentage. But the percentage is relative to elements parent container.

So, the point is all other unit types, viewport units they not related to the base font size. This difference is important and it will make the units interesting and unique 

There are Four viewport units for us:

vw: viewport width
vh: viewport height
vmin: smaller value of the viewport’s width and height
vmax: larger value of the viewport’s width and height
 

The first way to start fluid types.We will set the font-size on html element to ber fluid unit

html { font-size: 5vw; }

Above example is showing that root element is set to 5vw, that means we have changed the root em. all em and rem units they are related to root em, they are also be fluid

h1 { font-size: 5em; }
h1 is heading size of 5em that is equivalent to 10vw because this is just twice the current font size of 5vw.