An Explanation of Responsive Typography
Posted By : Dipak Kumar Singh | 27-Jun-2017
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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Dipak Kumar Singh
Dipak is a skilled HTML Developer, expertise in UI Development. Dipak likes watching movies and playing computer games.