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.
Related
I've been trying to configure a basic CSS template that I can use to start working with REM. I see the method of setting the following body { font-size: 62.5% }; so that the math is easier (1rem = 10px as 16px is the default font-size).
I'm not sure I like this way as it involves having to specify the size of <h1>-<h6> as well as <p> tags if a font-size of 10px isn't my baseline.
I've been experimenting with some different ways and have been very confused with how px and % relates in terms of font size. Take the following example:
<html>
<body>
<header>
<h1>Testing h1</h1>
<h2>Testing h2</h2>
</header>
<main>
<p>Random paragraph</p>
</main>
</body>
</html>
Consider the following css:
body {
font-size: 100%;
}
I expected the browser to render font in their default size, which is 16px. Anything in a <p> tag is 16px still, but <h1> - <h6> revert to their original size as specified in the browser stylesheet. Why isn't ALL text set to 16px?
Another example:
body {
font-size: 12px;
}
Why doesn't <h1>-<h6> take this font size of 12px? <h1>-<h6> does get smaller (by 75% as 12/16 = 0.75). I'd expect h1 to be either 12px or stay the same default value because the value specified for h1-h6 in the user agent stylesheets is MORE specific.
How do the rules work in terms of specifying percentages? What is the best practice in terms of setting up a stylesheet so that REM can be used?
h1 has a default font-size set to 2em which means 2 x the font size of the parent element. Same thing with the others headings, they all have a font-size specified using em unit.
Using percentage with font-size is also relative to parent font-size and means p x the font size of the parent element where p is a value between 0 (for 0%) and 1 (for 100%).
So if you specify 100% within the body then the body will have 16px (the default font-size) and h1 will have 32px.
You can use the same logic to find the font-size for the other headings.
body {
font-size:100%;
}
<h1>this a text</h1>
If you specify 12px within the body then the h1 will have 24px
body {
font-size:12px;
}
<h1>this a text</h1>
And specifiying 62.5% will make the body to have 10px and the h1 20px
body {
font-size:62.5%;
}
<h1>this a text</h1>
And since p has no default value for font-size it will simply inherit the value specified within the body.
You can easily check those values in the computed tab using the dev tools:
From the documenation:
The size of an em value is dynamic. When defining the font-size
property, an em is equal to the size of the font that applies to the
parent of the element in question. If you haven't set the font size
anywhere on the page, then it is the browser default, which is often
16px
And for percentage:
A positive <percentage> value, relative to the parent element's font size.
The rem is relative to HTML, not BODY
The rem unit is based on the font size of the HTML element, not the BODY element. So you should set base font size this way:
HTML {font-size: 62.5%; } /* Now `rem` is equivalent to `10px` */
instead of
BODY {font-size: 62.5%; } /* Does NOT affect `rem` */
HTML font size may affect scrolling speed
Note that at least in some browsers, font size of the HTML element affects the wheel-scrolling step size: the smaller the font size of the HTML element is, the smaller the step size is and the slower scrolling is.
Resetting font size for all elements
To reset font size for all elements, you can use the universal selector:
* {font-size: 100%; }
or:
* {font-size: 1em; }
Proper DOCTYPE for cross-browser consistency
Also, make sure you have the proper DOCTYPE declaration in the beginning of your HTML document to turn the standards-compliance mode on for the document for consistent cross-browser rendering and behavior:
<!DOCTYPE html>
Why doesn't <h1>-<h6> take this font size of 12px?
<h1> and related elements don't change their font size to be the same as their ancestor when you change their ancestor's font size simply because their default font size (in the stylesheet built into the browser) is not set to 100%, 1em, inherit or similar and you haven't specified a different font size to override the one supplied by the browser.
<h1>-<h6> does get smaller (by 75% as 12/16 = 0.75). I'd expect h1 to be either 12px or stay the same default value because the value specified for h1-h6 in the user agent stylesheets is MORE specific.
The value specified in the browser stylesheet (in my browser at least) uses the em unit, so it is proportional (double in the case of <h1>) to the font size of the parent element.
How do the rules work in terms of specifying percentages?
The choice of unit you use for the font size of an ancestor element (px, % or anything else) is irrelevant.
It's just working fine on my side. The only possibility could be that, the link to css file is missing in your HTML... :)
Otherwise, just to make sure, try inline style for same property.
ul {
margin-left: 1.25rem;
list-style-type: disc; }
Foundation uses % for margin-left and margin-right.
However on unordered list they use rem for margin-left.
I'm having trouble understanding the logic behind this.
Rems are similar to % and em as they are fractionally based off of the base font size (default 16px). Unlike % and em, rem units do not inherit a parent element's font size. With % and em, as you nest elements, you'll see the font size get smaller and smaller. This doesn't happen with rem units. Instead, no matter where in the DOM hierarchy an element is, a rem-sized element always references the base font size.
Using rem for the margin and padding that surrounds text elements provides scalability within a layout. padding: 10rem; # 16px base font size yields 160px of padding. changing the base font size would not only scale the font size up or down, it would change surrounding elements that use rem units proportionally. Foundation also uses rem for media queries. The idea is, if you increased the base font size, not only would font sizes get bigger and containers would grow, breakpoints would be triggered sooner.
Percentages are used mostly on the grid because those scales perfectly; the left margin of lists generates the indentation of the list, which is text-related design rhythm, so using the base font size (rem) is quite logical (to me).
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 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.
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