What is the value of an em in terms of pixels?
10em = ?px ?
There's no specific relationship between em and px. It's computed based on the width of the "m" character for each font-face.
While as others have said, there is no set ratio - as it varies from font to font - it is possible to calculate this for a particular font face/size combination by using DHTML.
Simply create a div with
style="width: 1em; visibility:hidden"
and append it to the place in the document you are interested about.
You can then find out its width by checking the div's clientWidth property
It depends on the font and the platform you're rendering on. There is no universal ratio.
It's about 160px, if 1em is 16px and 10em = 1000%. It's just an approximation, which will depend on font, browser and OS.
If you are using a standard sized text font of 11 or 12px then a general rule of thumb is 1em is going to be about that big in pixels, so 11 or 12 pixels.
By default 1em is 16px (font-size:100%;), so 16px x 10em = 160px
You can change the size of an em by changing the percent of the font-size in the body, for example if you want to change the size of an em to 10px, this would be your CSS:
body {
font-size:62.5%;
}
16px x 62.5% = 10px
Related
font-size: calc(4rem + 1vw);
I somewhat understand that the calc function makes my font dynamically sized, but
I don't understand how 4rem + 1vw works (what exactly is it doing).
I don't understand how calc interacts or affects 4rem + 1vw
Break it down:
font-size: calc(4rem + 1vw);
1vw
vw is "equal to 1% of the width of the viewport's initial containing block". The browser can calculate that to a pixel value.
4rem
rem is relative to the font size of the HTML element. The browser can calculate that to a pixel value.
So,
calc(4rem + 1vw)
calc adds those values together and sets the font-size property to that value.
Now, I'm saying "pixel value" here, but it could be some intermediate value that has nothing to do with pixels per se, but the idea is the same.
First of all, rem and vw work kinda the same, but not with the same references. You have to see rem and vw as pretty much just other metrics.
rem is based on your root html font-size. Which means that as long as your html has a font-size of, let's say, 16px, 1rem will equal 16px. If at any point, you change your html font-size, all the rem metrics of your css will adapt. It allows for a more uniform render on browsers with different default css values when it has not been set directly by the developer. (For more infos, see reset.css)
So here, as long as you don't change your html font-size, 4rem = 64px.
Now about vw, it works pretty much like we described with rem, but it is based not on a fixed font-size anywhere, but on your window with. Which makes it based on a completely variable data. You can see this variable like this: for a 1000px window, 1px = 0.1vw. So 1vw is 1% of your window width.
So here, if your window width is 1000px, 1vw = 10px.
The calc is literally just adding them: 64px + 10px.
At the end, with your code you will have a fixed 4rem that will always have the same value as long as the html font-size stay the same, and a variable addition of 1vw that will depend on your browser width.
EDIT:
As a last info, because maybe it isn't clear: You don't need calcor the 4rem to make you font-size "responsive". Try with font-size: 1vw and it will also be responsive. Your calc will just make the variation based on your device width a smaller part of your final font-size.
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.
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.
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
The main difference is the reference point for each unit. VW, VH, VMIN, and VMAX scale with the viewport ('window') size.
On the other hand, EM scales with the font-size of the element. So for example, if you have a font-size on the body and h1 elements in your css:
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
All the text in your document would have a font-size of 16px EXCEPT the h1, which would have a font-size of 32px. However with,
body {
font-size: 16px;
}
h1 {
font-size: 2vw;
}
The font-size for h1 elements would scale with the viewport's width (2% of the viewport width to be specific).
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.
Whereas vw refers to the font-size relative to the viewport which changes from device to device. So, 14vw = 14*1/100 = 1.4% of the width of your viewport.
14 * 1/100 = 14%.
On the other hand, the question was about he difference between em and vw. So, best is to relate them to the same reference frame.
First of all, we talk abour screen media, and not print.
As em correspond, basically, to 16px (width of the letter “m” - thanks BSMP above - of the current font) and vw correspond to 1/100 of the viewport width, let’s relate them:
On 1.440 px viewport width divided by 16 => 90 em on this line, or 100 vw.
So, 1em would correspond to 1,1111 vw (in fact, 1 rem = 1,1111 vw).
Now, for responsive design, if using em, set the font-size at the container level and play with em.
If using vw, it’s one value vith no dependency but thewidth if the viewport. Sometime is better to set a minimum value, maybe in px, to avoid a font-size unreadable because physical size.
Good luck! :)
I am creating a template for responsive website. I learned that em is good to use in responsive design.
But problem is that I set the body font-size to 62.5% but when I am using p,span and other elements font-size like 2em than 2 em is different from 20px. according to my default font-size it should be 2em=20px anywhere in the body as 62.5% overrides default 1em=16px to 10px.
Please suggest what I should change so that in whole body whenever I set font-size of any element to 2em then it would be same a 20px.
BODY {font-size:62.5%}
This takes 16px down to 10px. From now on it’s easy to think in pixels but still set sizes in terms of ems: 1em is 10px, 0.8em is 8px, 1.6em is 16px, etc.
.element {
font-size: 20px;
width: 4em;
height: 4em;
}
Then that means that the width and height of the element (defined here as 4em x 4em) would compute to 80px x 80px (20px * 4 = 80px).
Read 1
Read 2
You can't. Use rem instead. It refers to the font size of the root element.
It might be the issue that your font size inherits from any parent tag...
You cannot. The em unit equals, by definition, the font size of the element or, for font-size setting alone, the font size of the parent element.
The conclusions depend on what you really want to do, which is not clear from the question. If you want specific sizes in pixels, using the px unit (with all its vagueness). If you want adjustable sizing, so that you or the user can easily change the basic font size and have all other font sizes scaled accordingly, use consistently the em unit or the % unit, with due consideration of element nesting. For example, use font-size: 2em only when you want the font size to be 2 times the size of the parent element’s font size—using a different value if you want a a different ratio.
I am coding my first responsive layout using CSS #media queries. I've added the <meta name="viewport" content="width=device-width"> to my html so I have a strict series of device-width based font-size layouts. And, I'm using em's to (hopefully) give the most consistant browser resizing with html, body {width/height:100%; font-size: 1em}.
In my smallest case, I want to put the <h2> tag at a relatively small em in the range of < 0.5em. However, once I go below that amount it no longer resizes. The only option I can see is to switch back to pixels and to use some small 10px amount.
Maybe I could think about this a different way? Or maybe I am missing something in the specs for em. Any advice is appreciated.
Browsers all have a base font-size. Generally, that should be between 14px and 18px. If you don't specify a body font-size, 1em will equal the default font-size. Your example works for me, however, 0.5em = 50% of 14-18px => 7-9px. That is way too small to be properly readable.
Reference:http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/
You can specify a bigger body font size (e.g, 24px), and in that case 0.5em will equal 12px, which is small, but still okay.
Additional note: be careful with setting
html, body {
font-size: 1em;
}
For me (in Google Chrome), this produced a different (smaller) font-size than
body {
font-size: 1em;
}
Most browsers have a "minimum font-size" setting that cannot be overridden. In Opera, the default minimum size is 9px. Since the default font-size for body text is 16px, .5em would calculate out to be 8px.
I want to convert the font-size property value from percent to pixel
lets say I have this html code
<div style="font-size: 180%;">
link
</div>
How to find the equivalent value for font-size: 180%; in pixel?
Thanks
There is no simple answer as font sizes in percents are relative to font size of parent block. I find it easiest to do by hand, manually adjusting the font size pixel by pixel in Firebug.
This may be somewhat tricky to do automatically. Font-size percentages are done against a base value, and that base value is the parent block's font size. This means that font size changes are nested like this:
<div style="font-size: 16px;">
This text has size 16px.
<div style="font-size: 150%;">
This text has size 150% * 16px = 24px.
<div style="font-size: 150%;">
Because this div is nested, the base value is now 24px.
font-size: 100% would mean 24px type.
So the size of the text here is 150% * 24px = 36px.
</div>
</div>
</div>
And that means that there's almost certainly no easy solution.
If you can be absolutely sure that you don't have any places where percentages are nested (as in my example above) you can simply replace all of the percentages with the base font size multiplied by the percentage.
If you do have a lot of different pages though, you probably can't rely on that. In that case, you're going to have to do some HTML/CSS parsing and go through all of your pages, calculating font sizes for each and every element to get it all right. There's not an easy solution, unfortunately.
I need to ask though, why do you need to do this? As long as you declare a base font size for the page in pixels (in the body tag), there's going to be no functional difference between percentage font sizes and absolute font sizes. If you have a font declaration like this for your body:
body {
font: 100% font1, font2;
}
then just replace it with:
body {
font: 16px font1, font2;
}
And unless you have some very unusual requirements, it'll work just as well as replacing all of the font size declarations for the whole page.
(16px is the near-universal default font size for web browsers.)