Variable typography size with CSS3 styles

.18

Variable typography size with CSS3 styles

We'll work around with some varying font sizes by using CSS3 properties

The frontend developers often use media queries to get a varying the font size of the text on particular display sizes. By the font-size property we set our font face size and using a default units .

@media screen and (min-width: 320px) {
h2 { font-size: 30px; }
}
@media screen and (min-width: 768px) {
h2 { font-size: 40px; }
}

<h2>Hello, I am Great Areus</h2>

Hello, I am Great Areus

It still remains common practice by developers, but now we can get the dynamic responsive font to the current viewport size. To implement this, we'll using new set of "viewport" units: vw, vh, vmin, vmax.

If the font-size: 1vw; this value equal 1% of viewport width.

If the font-size: 1vh; this value equal 1% of viewport height.

If the font-size: 1vmin; this value equal 1vh or 1vw of the smaller side viewport size.

If the font-size: 1vmax; this value equal 1vh or 1vw of the larger side viewport size.

Take a look at the basic demo of the dynamic responsive typography:

.dynamic-font { font-size: 5vw; }

<h2 class="dynamic-font">Hello, I am Great Areus</h2>

Hello, I am Great Areus

Cross-browser version that fully supports "viewport" units: vw, vh, vmin, vmax.

Desktop: Internet Explorer 10, Firefox 19, Opera 15, Chrome 34, Safari 7
Mobile: Firefox 64, Chrome 71, Opera Mobile 46, Safari 8

Conclusion: At final result, you can use both of methods - true media queries or new set of vh, vw, vmax, vmin, units to get a responsive fonts. Hopefully given you an insight of using variable typography sizes.

.

More than 40 Happy Customers

Over the last 5 years, we have helped and guided organisations to to achieve outstanding results

Commition

Photostudio

Restaurant

Agency

Resume

Wedding

Studio

Construction