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.
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.
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.
The last days I dealt with units in responsive webdesign and webdesign in general. My question is about units for sizes in CSS at all, meaning not only related to font-size, but also padding, width, media queries, ...
It seems as px is considered pretty for most use cases bad by most professional web designers.
Everyone against px
Some articles that let me come to this assumption
http://css-tricks.com/why-ems/
http://webdesign.about.com/cs/typemeasurements/a/aa042803a.htm
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Here an article that has also an opinion pro px:
Should I use px or rem value units in my CSS?
Reasons against px / for (r)em?
media queries
The big advantage of em media queries is, following many articles, that these media queries are even applied when using the browser's text-only zoom.
However I think all modern browsers support full-page zoom, which also applies media queries defined in pixels (tested in up-to-date Firefox and IE).
accessibility
em (or rem) seems to be recommended for font-size (accessibility) but what is about the other sizes?
Increased accessibility is IMHO no important reason anymore, because modern browsers support full-page zoom. I have no idea about screenreaders, but I can't imagine, that they haven't been improved in the last years.
maintainability
It is easy to change the size of the complete site by changing the base size.
If it is a persistent change for every device it should be very easy when using a CSS preprocessor.
The only reason I could find was in the css-tricks.com article, because you may want to have all sizes changed on mobile devices. Do you really want this for all / most elements?
For some cases like really big headings it seems to be useful, but why should a mobile user be able to read smaller text better than a desktop user? Additionally the measuring in reference pixels compensates the different DPIs.
Real life examples
I have roughly analyzed their source code, probably I have overlooked some things.
Bootstrap 3
In most places px is used: font-size, media queries, padding, margin ...
The grid system uses percents at least for widths.
However you can find many issues regarding this topic at Github. Many people demand em / rem.
ZURB Foundation 5
It is based on rem and em and in little cases it uses px, but just for borders etc.
cloudfour.com
Media queries and font-size in em and a mix of different units for everything else: px, %, em.
css-tricks.com
font-size, padding, margin mostly in px, but media queries in em and some widths in %.
So far I have read everywhere, that you should use relative sizes and have done so. If there are sensible reasons for (and I thinks so, because many professionals do so) I will continue / improve doing so, but it was more complicated than using px.
If you assume most people are using full-page zoom, where is the problem with px for everything, having one consistent unit seems to be nice?
(Supporting people, who haven't upgraded their browser / device for almost 10 years (IE <= 7), is not my aim.)
Which is the way to go? (Please consider the different properties font-size, width, media queries, ...)
TL;DR:
Use % for horizontal page layout
em works great for vertical spacing
Use anything you prefer for font-size (I like em)
Use em for media queries
CSS Measurement Units
I find that my usage of different CSS measurement units varies with the area of measurement I'm dealing with: horizontal, vertical, typography, or media query.
Horizontal measurements
The horizontal space gives structure to the page. Thus, horizontal measurements work well with units relative to the page width (%). For example, it's great for giving some basic breathing room to the main content:
#main {
width: 90%;
margin: 0 auto;
}
More complex layouts (columns, for example) also work well when one or all of the horizontal measurements are proportional to the page or to their container.
.column-main {
width: 61.8%; /* The golden ratio is pretty awesome. */
}
.column-secondary {
width: 38.2%;
}
There's a corollary to this idea, which is that if you set up your container structure well, you won't have to do much horizontal sizing on the contents. You basically let the block-level elements fill the width of their container, as they like to do, and you're all set.
Vertical measurements
Vertical space is more about the structure of the content (i.e. how close elements in the document flow are to one another), and I think these measurements work fine with both fixed and relative units (px or em).
However, using relative units here helps give you a vertical rhythm, which can be very pleasing. It also allows you to make changes to your content (read: font-size) and keep your vertical spacing proportional.
p, ul, ol, dl {
margin: 0 1em; /* gives you proportional spacing above and below,
no matter the font size */
}
Typographic measurements
Font measurements fall into their own category, maybe because font-size acts as the base for all other measurements in em. I've seen advocates for different strategies, but from what I've seen any measurement will work fine, as long as you know what you're doing.
px
Setting font-size in px is extremely reliable and easy to calculate. In the post-IE6 age, it also scales nicely, so there's really no reason not to use px if that's what you prefer.
The only problem I see in using px is that it doesn't take advantage of the CSS cascade. In other words, once I've specified sizes in px, I have to go back and change each one of them individually if I want to make any large-scale changes.
em
Despite any drawbacks, I think em can be a really good way to specify font-size. What I like is that it lets me quickly see the relationship between my font sizes. A lot of times I don't care what the exact size of the font is because the most important thing for me is the relationship of that size to all of the other sizes on the page.
The important thing about using em is to set the sizes as close to the end tag as possible. That means I avoid setting font units on containers:
aside { font-size: 0.8em; } /* This can mess me up */
...
aside p { font-size: 0.8em; } /* Way too small! */
And mostly set sizes on headings and text items:
h1 { font-size: 2.5em; }
h2 { font-size: 2.1em; }
h3 { font-size: 1.7em; }
...
Anyway, I like that I can see clearly and easily the relationship between the sizes there.
rem
Sizing things based on the browser's base font size seems like the web-standards thing to do, because then you allow for browsers whose optimal base font size might not be 16px. In practice, though, it kind of works the other way. From what I've seen, browsers use 16px as the base font size because that's what everyone expects, and set the actual size of that CSS measurement to look decent in the browser.
The biggest drawback here I see is browser support. If you code for browsers that don't support rem, you'll be adding your rules twice:
p {
font-size: 16px;
font-size: 1rem; /* I kind of hate repeating myself here,
but a good CSS preprocessor might ease that pain. */
}
Font Spacing
Other font measurements are a lot easier to figure out once you've got your font-size since most other font measurements fall into the category of either vertical or horizontal measure. For example:
h1 {
font-size: 2.5em; /* Change this, and everything below stays proportional.
(Use whatever measurement unit you prefer.) */
margin-top: 0.618em;
margin-bottom: 0.3em;
line-height: 1.2; /* The only unit-less measure in CSS */
}
Media queries
In most cases, there is little difference between the way browsers handle em and px in media queries. This holds true even when a user uses text zoom to resize the page.
HOWEVER, if someone has changed the default text size in their browser settings, things behave very differently. See my answer to a related question and my codepen demo for a longer explanation.
In short, while px works well for media queries in most cases, it's definitely safer to go with em.
Other cases
There are certainly cases where the above general comments don't apply. For example, you may find that ems come in handy any time you want things proportional to the font size, like the following:
h1.title {
font-size: 2em;
width: 20em; /* Resizing the font also resizes its container properly. */
background-color: #d00d1e;
}
#media (min-width: 400px) {
h1 {
font-size: 2.5em; /* Woot! Didn't have to touch the width! */
}
}
Or maybe you want to constrain line lengths for readability:
p {
max-width: 42em;
}
Also, as mentioned in other comments, px still works well for borders and things like that. It can also be good for padding, especially when you pair it with box-sizing:
.example {
width: 80%;
box-sizing: border-box; /* Padding is NOT added to total width. Huzzah! */
padding: 10px;
}
There is already a great answer for this question: Should I use PX or REM?
But to add to that, the articles you link to for "All against px" are generally based on misunderstandings or mis-assumptions.
For example, PX are relative (see the other answer). From an accessibility point of view (my area of exertise), zoom is now the default method of making things bigger/smaller, so PX vs EM is irrelevant. (The browser renders to CSS pixels in both cases.)
Also (for the Cloudfour article) Webkit used to have a bug, but it fixed that a while ago (pre split with blink) so that PX now trigger media queries on zoom.
Basically, whatever you use is translated to (CSS) pixels anyway, so it is up to you.
Personally, I set a based size in PX (generally 16px) and then size in REM. That means it is easy to set the sizes relative to the base, including padding/margin etc. Then you can easily change the base pixels within different media queries. You can also provide PX fallbacks for older browsers if needed.
I have personally made the switch EMs and haven't had any issues with it. It works great for anything you'd normally put pixels in. There are only a few scenarios where I use px still and that is for borders and shadows and other things I don't want growing/shrinking with the font size.
Since EMs are somewhat of a dynamically calculated PX size they work well in the situations where you "know" your size. A great tool for converting PX to EM (or vice versa)
http://pxtoem.com/
I do use % for fluid elements rather than define a specific grid system which has worked well for my own needs. But I haven't tried that approach while also using third-party grid/responsive frameworks. So mileage may vary there.
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.)