Easy Techniques to Make Responsive Fonts For Your Website
We faced the problem of responsiveness of fonts in most of the websites. We have to change fontsizes for all the fonts according to every responsive breakpoints. But now you don’t need to change the font-size at each and every breakpoints. You need to define font-size only once in your website. For this solution you may use “Viewport Size typography”. Viewport Size typography is one of the units of fonts. These units allow you to get it feeling perfect and then have that experience scale to any size screen. What is viewport size font & How this fonts are different from another font units? Viewport size font are units, just like em, px and another font units. One unit on any of the three values is 1% of the viewport axis. “Viewport” == browser window size == window object For Example: 1vw = 0.4cm Here are 4 unit type of “Viewport fonts”. These are vw, vh, vmin and vmax. i.e. 1vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, whichever is smaller 1vmax = 1vw or 1vh, whichever is larger How can we use in css?
Here I am giving some examples to use viewport size typography. h1 { font-size: 4vw; } h2 { font-size: 2.5vh; } p{ font-size: 1.8vmin; }
Browser support for Viewport size font
Contact Us: Address : 3405 Pennsylvania Common, Fremont, CA USA Email
: sales.usa@elsner.com
Phone
: +1 (607) 524-4040
Website : http://www.elsner.com
94536