What are the differences between the "vw", "em" and "%" font sizes?

Question

I’m having second thoughts about using the size units vw, em, %. Searching the Internet I always saw that some used some units of size, but I never really understood the difference between them. For example, I couldn’t explain in what situation it would be better to use one or the other.

When creating a responsive site/system, which one is the best option for such an opportunity?

What I want to understand are the differences that exist between them and if possible the best use of each in a given situation

Answer 1

The units mentioned have very similar use, but with very different utilities, I will tell you some things that the Iron Man already said, however, I will give a more detailed:

vw, vh, vmin, Vmax

Beyond the vm, there are these other units, the most important thing you should know about them is its compatibility, which is not the best, but are already gaining considerable space.

The vw, as already stated by our friend Iron Man, establishes a percentage ratio with the Viewport Width, already the vh well intuitively refers to Viewport Height. In addition to being used for "quadrilateral" elements (imgs, Divs, etc), they can also be applied in texts, for the font-size. This allows the font to dynamically adjust to the size of the window. Look this Jsfiddle with an example.

Already the vmin and vmax are related to the minimum or maximum value of widths and heights, depending on which is the smallest and the largest. For example, if the browser has a width of 1000px and a height of 800px, 1vmin would be 8px and 1vmax would be 10px. But if it has been resized to 800px width and height of 1000px, despite having inverted width and height, the vmin and vmax remain the same.

in, rem

The unity em as is already known by many is used, for the most part, for texts.

A situation for the em: you gave to the html and to the body one font-size: 20px (this standard has 16px), so all child elements, consequently, will have 20px. However, you also attributed it to a <p> one font-size: 1.4em. What does that mean? Does that mean p has a font size equal to 1.4 times the fontsize you inherited from your parent element that, in the case, was the body, ie, 1.4 * 20px = 28px.

Situation for the rem: imagine yourself in the previous situation... The paragraph that had a font-size: 1.4em (28px), has now been inserted into a div with a font-size: 30px. The current calculation should be 1.4 * 30 = 48 (30px of the parent element). But if I want it to inherit from the root element? As this in the case is the html(may also be the body) (with font-size: 20px), I just give the paragraph a font-size of, rather than 1.4em, the 1.4rem with the rem. Calculation will again inherit from body (root element).

Percentage %

There is not much to talk about the percentage, this takes into account the parent element, and will also vary according to some property css, like the position.

Just like the vw percentage can also be applied in texts. For example, if the parent element of a <p> have a font-size: 40px, and thatp have a font-size: 200%, the font size of this will have twice the font size of the parent element, in case, 80px.

In short, you will not have better when it comes to responsiveness, it depends on your application, the design and the navigation of this. Read more about this topic and choose from what you think is best. Analyze the above examples and associate them to your experiences, so you can judge.

And in my opinion, the good ones breakpoints of Medias Queries still go to waste when it comes to source and responsiveness.

I hope it helped...

Answer 2

The unity vw uses the width of the viewport or browser as a measurement base, 1vw being equivalent to 1/100 of the width of the browser. For example if the width of the browser is 900px, 1vw is equal to 9px.It is used for both layout and font measurements. For the unit % is used more to define the layout of page elements, so that they react according to the size of the viewport. And the em is normally used for fonts, but can also be used to define some layout details such as the margin of the elements. For example, if you want the element to have a margin of 2x the size of the relative font, you can use margin:2em;.