Web Design

Easy Techniques to Make Responsive Fonts For Your Website

Getting your Trinity Audio player ready...

We faced the problem of responsiveness of fonts in most of the websites. We have to change font-sizes 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

 

 

 

 

 

 

 

Do you know how to make pixel perfect design?

Interested & Talk More?

Let's brew something together!

GET IN TOUCH
WhatsApp Image