In CSS, what is the difference between VW and EM?

VW is viewport width (the visible size of the window) and em is the width of the letter 'm' in the current font.

So 5vh is 5% of the viewport and 5em is the width of 5 'm's.

Further Reading:

CSS Values and Units Module Level 3

Mozilla Developer Network article on CSS length units


I am wondering what is the main difference between VW and EM, as both of the they scale with the window size and both of them are using in responsive design.

VW is -- as several have correctly stated -- a percentage width of the viewport.

Considering small smart devices have usually tall narrow viewports and larger, laptop type devices have much more letterbox shaped viewports, this value has a potential to give curious, imperfect results.

EM, is a measurement of the scale of a font compared to the rules direct parent.

Several answers here seem to be making some fundamental errors in definitions of font sizes. Such as stated:

em refers to the current font-size and scalable with respect to it. For instance, if the font-size of document is 14px, then 1em = 14px; 2em = 28px and so on.

This is only correct if the rule that states 1em is a direct child of the document or has no other font scaling rules applied to it. It can easily happen that the font size of the document is 14px, the child element has font size as 2em and then that childs child has a font size of 1em which means then that both layers of children have fonts displaying at 28px.

This obviously can cause serious confusion when creating sites. the EM value is only the proportion of the parents font size. Take this example:

html {
    font-size:14px;
} 

h1 {
    font-size:1.5em;
}
p {
    font-size:0.9em;
}
main {
    font-size:1.15em;
}
.container {
    font-size:1.1em;
}

So, with the HTML:

<html>
<body>
    <main>
        <div class="container">
        <h1>Header</h1>
        <p>Some paragraph text</p>
        </div>
    </main>
</body>
</html>

So what is the font size of the paragraph contents? Is it 0.9 x 14px ? No, it is in fact

14 x 1.15 x 1.1 x 0.9 = 15.94px

because each em is relative to its direct parent only. This is obviously a very easy way to obfuscate and obscure the actual values as you're working on a CSS file, unless you enjoy using a calculator. A solution is to use Root em, which is rem and this is the em proportion of the root value font size which is set out in the html element tag.

So, if you return to the CSS with:

p {
    font-size:0.9rem;
}

This will now be sized as 14 x 0.9 because it is taken the font size as defined in the root element (HTML, not the body tag). this is a much cleaner way of defining font sizes than using just em's.

Tags:

Html

Css

Recent Posts