I have read a lot of articles on this topic (and searched for Q&A), and I have found, but I still don't understand what the difference between em units and percents is. Help?
P.S.
I've seen this code example:
p { font-size: 10px; }
p { line-height: 120%; } /* 120% of 'font-size' */
What is that supposed to mean? Why on earth would anyone want to set a line height to a percentage value of a font size?
OK, so I've decided to sum up the answers.
line-height's percentage value is relative to the current font-size.
em units is always relative to font-size.
Percents depends on context. For example, if they're used in font-size, they will be relative to the current font-size; if it's in height, they will be relative to the height.
It changes a little bit when parent tag has font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. In this context 1em == 100%, 1em seems to make setting a bit more "small" or a bit more "large" than 100%, read about it here
1em = 100%, 2em = 200%, 1,4 em = 140% and so on. However, it's actually contex dependent.
1em means "equeal to the actual font-size", 2 - "2 times the font-size". EMs adapt to users settings.
It changes a little bit when parent tag has a font size declared as "small", "medium" or "large", because values of these are affected by browser's setting. When user changes client font size into "small" or "large", 1em seems to make the font a bit smaller or larger than 100%.
Further reading:
https://kyleschaeffer.com/css-font-size-em-vs-px-vs-pt-vs-percent
Line height is usually a multiple of the font size. In fact, it is the only value for which you don't have to specify a unit:
p { line-height: 1.2; } /* = 1.2em = 1.2*font-size = 120% of font-size */
If line-height is proportionate to font-size, it is easier to resize the font, without having to worry about fixed line-height.
Related
I have two sites on which the font is set by
* {
font-family: "Varela Round", sans-serif;
}
Since the font-size is not specified, the browser use his standard values for each element. But if I set the size to 0.9em the size is really small. The output of window.getComputedStyle(element).fontSize also shows different px values. If I set font-size: 13px the size is everywhere the same.
But if I set the size to 0.9em the size is really small.
Yes, it is a relative size.
The body becomes 90% of the font size of the html.
A section inside the body becomes 90% of the body (so 81% of the html).
A p inside the section becomes 90% of the section (so 72.9% of the html)
And so on.
If I set font-size: 13px the size is everywhere the same.
Absolute units do not vary based on the font size of the parent element.
This explanation is summarized from the site Css Font Size
The reason for this is the fact, that px is not relative to other elements. % and em instead are relative to their parent which results in the following effect:
Since 100% = 1em the two units can almost (see % vs em) be used analogously.
One solution is to use rem, which acts similar to em but does not inherent the value from the parent.
An other is to set a default size for the main element e.g. body and then set the font-size relative to the parent for all elements.
I want to scale a letter to the exact height of another element with CSS. For example, I might want to have text that is exactly as high as some image:
How can I achieve this?
When I set font-size equal to the height of the image, the letters are smaller. I can try to adjust this manually, until it looks equal, but I'd like to calculate it.
My current solution is to set line height to the height of the image, and to calculate font-size from the font metrics:
.the_image {
height: 28px;
}
.the_M {
line-height: 28px;
font-size: calc(28px * 2048 / 1490);
}
In this case, the font metrics are 2048 UPM (units per em), and the letter "M" is 1490 units high. Dividing the em size (2048 units) by the letter height (1490) results in a factor that scales the "M" to the desired height (here: 28px).
In this case I know the font that I use, because I embed it with #font-face, and I know the metrics of the font because I looked at it in a font editor (I'm using Fontforge and Glyphs to create my fonts), but I'd still like a solution that works for unknown fonts from the user's computer.
First you need to set position and then inherit height
Something like:
.the_M{
position : relative;
height : inherit;
}
I would like to convert my new website from pixels to ems. My question is, should I also apply ems to my text line-height property?
Assuming that “converting to ems” means using the em unit for font-size, then you should set line-height in a manner that also adapts to the font size. The two properties are closely related, and if you set one of them in em and the other (e.g.) in px or pt, then the page will break if the font size is changed. So it would work against the very idea of “using ems” to use essentially different units for essentially connected properties.
For example, if you set font-size: 1.5em and line-height: 18px, then things will depend on the font size of the element’s parent and may go very wrong if that size is much smaller or much larger than expected.
Whether you use the em unit or a pure number is a different issue. Using just a number, as in line-height: 1.2, is primarily equivalent to using the em unit, as in line-height: 1.2em. But there is the difference that when line-height is inherited, it is the pure number that gets inherited, not the computed value.
For example, if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent’s font size – which is much smaller than its own font size.
for more explanation end examples see line-height # Mozilla Developer Network
line-height can be set in px, em's, every unit will fit.
line-height works best and future proof if you use a factor/multiplier, meaning no unit, but only a number that is multiplying your font-size.
.foo {
font-size: 1.3em; /* based that 1em == 10px */
line-height: 1.3; /* 16.9px line-height */
}
So, Yes, you can, to answer you question: no you should not.
just go for the factor based line-height to be future proof.
It is recommended to use the unitless number for line-height (to prevent inheritance issues). The computed line-height will then be the product of the unitless value multiplied by the element's font size.
It may be more convenient to use the font CSS shortcut, like so (example taken from the Mozilla CSS docs):
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
A good example of why the unitless value is preferable is given here: Prefer unitless numbers for line-height values.
The css of a major site I am looking at has what appears to be a strange way of managing their font sizes in CSS. First, the body selector has this:
body {
font:62.5%/1.5 Helvetica,Arial,FreeSans,sans-serif;
}
Then later on to get a custom size for the h2 font they do:
h2 {
font-size:3em;
}
If you change the font directives in either of these places, the font size of h2 will change and look incorrect. So they are clearly managing the font size via the combination of these directives, and I want to know why they would do it this way....
Questions:
Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....
What is the motivation for this design?
Thanks,
Jonah
Why is the h2 font not simply over-riding the body font? It's like the body font is acting as a multiplier on its size....
Because in CSS, em is a relative unit of measure. Thus 3 ems of 62.5% of the base size means 187.5% of the base size for <h2> elements.
What is the motivation for this design?
Setting a percentage value for the body element means that — % being a relative unit of measure too — the user can resize text in an entire page using his browser's text size setting. I would guess that a value like 62.5% is in case the browser default font size makes the entire body copy too large (remember that this is being applied on the body element). My site uses 90%, which isn't that small but you get the idea.
1em is equal to the default font size. The default text size in browsers is 16px. Unless you change the default, that is.
Here the default is being defined as 62.5% of the browser's default, with a line height of 1.5.
3em is 3 times the default size set.
So when you change the body default it affects every place the em size unit is used, including the h2 tag with is 3 time the default setting.
Usually the browser defines a default font size of 16px. em however, is a relative unit. So for example, if you have a setting a font size for a container/div of
1 em = 1 times 16px = 16px
1.5 em = 1.5 times 16px = 24px
2 em = 2 times 16px = 32px
Therefore by setting it to 62.5%, it reduces down to your reference font size to 10px default.
which means this technique makes it easier when you are visualizing your font sizes in px,
1 em = 10px
1.5em = 15px
2em = 20px
I'd like to try and convert my designs from pixels to ems. I've read so many tutorials that... and I'll leave it right there.
Starting with this as my base:
body {
font-size: 62.5%;
line-height: 1.4;
}
... now this is where I get lost...
Should I be defining my font-size like this:
div#wrapper { font-size: 1.5em; }
... or like this:
blockquote, li, p, dt, dd, etc { font-size: 1.5em }
And then the next thing I don't really understand is where ELSE should I be using ems in addition to font-size and line-height? I will be using a fixed-width layout using 960.gs.
line-height: 1.4em;
Probably isn't what you want. The line-height will stay at the same computed height for the size of an ‘em’ on that element, even when you change the font-size on a descendant element.
line-height has a special case where it allows a unitless number:
line-height: 1.4;
Which makes each descendant line-height depend on its own font-size rather than the ancestor's.
Should I be defining my font-size [on a wrapper or on many element types]?
Well that rather depends on what you're trying to do. With relative font-sizes it is generally best to keep the number of declarations down to a minimum, because they nest: that is, with your blockquote { font-size: 1.5em; }, if you put a blockquote inside a blockquote you'd get a font-size of 1.5*1.5=2.25em compared to the body font size. Is that what you want? Maybe, maybe not.
where ELSE should I be using ems
Anywhere you want the size of an element to respond to the user's preferred font-size. One common example would be something like:
#maintext {
width: 60%;
min-width: 8em;
max-width: 40em;
}
to try to restrict text lines to a reasonable column width when doing liquid layout.
But if you are limiting yourself to a fixed-width layout it may not make sense to make element widths font-size-dependent.
You may find How to size text using ems an interesting and helpful read. The thing that I try to remember is my conversion from ems to pixels.
In your example:
body {
font-size: 62.5%;
line-height: 1.4em;
}
1 em is equal to 10 pixels if the browser default text-size is 16px. The line height would then be equal to 14 pixels. Like bobince beings out, I would use a unitless line-height value.
To help you with your calculations, you can use an Em Calculator. It allows you to easily convert between ems and pixels.
The problem with em is that it is a relative unit. Inheritance and relativity don't mix well in HTML documents. What I do is use px for font size and box dimensions / positioning, but try to use em for line-height, margin / padding, etc...
I'm sure it's not the "proper" way to do it, but the system was pretty poorly designed from the start, if you ask me.
ems are relative, so if you set:
body {
font-size: .6em;
}
Everything will be relative to that.
Which means (and this is where my head starts to hurt too) that if an h1 has a default font size of 250% larger than most other text (p, li), the header will now be 60% of that default size. So it will still be 2.5 times bigger than the other stuff, but it will be 60% smaller than if you hadn't set the rule at all.
Now, if you then say that :
h1 {
font-size: 1.2em;
}
The h1 will now be 20% larger than what it would be if you hadn't set the rule, so it's 20% larger than the already shrunken down 60% smaller from the first rule. This means that it will no longer be in direct proportion to the browser's default for h1 and other elements.
So basically, you should set your font-size up front for the whole document (like in the first rule I showed), and this is your baseline. After that, you set how you want any individual elements to be sized in relationship to each other (basically in relationship to what they already are)...
So if you know you want all of the fonts in the #wrapper div to be 1.5em from their default, setting it there is perfect. But if you want to change the size of blockquote so that it's a tad smaller, you'd still set the rule for #wrapper, but then make a second rule for blockquote.
If you want to set up page width by using em's, follow this pattern provided by YUI development team
Divide your desired pixel width by 13; the result is your width in ems for all non-IE browsers. For IE, divide your desired pixel with by 13.3333 to find the width in ems for IE.
Here's an example of a custom page width of 600px, and here's what the CSS looks like:
600 px / 13 = 46.15 (non-IE browsers)
600 px / 13.33 = 45.00 (IE browsers)
#custom-doc {
margin:auto;text-align:left; /* leave unchanged */
width:46.15em;/* non-IE */
*width:45.00em;/* IE */
min-width:600px;/* optional but recommended */
}
regards,