Im using em font sizes, which is working fine for everywhere apart from the sidebar.
In the main content the em size is great. If I copy this em size to the sidebar the text becomes larger.
Im using a html/body size of 17px. Then 1.412em to get the size I would like. To see a live link of the sidebar font bigger go to this link. If you look at the twitter feed on the right sidebar you will see its using the same em but you view it a lot larger.
Using em as measurement value would just not inhert but increases accordingly.
Here's an example:
<div>
<p>
<span>foo bar</span>
</p>
</div>
body{
font-size: 1em;
}
div{
font-size: 1.5em;/*1.5em of 1em == 1.5em*/
}
div > p{
font-size: 1.5em;/*1.5em of 1.5em inherited from div == 2.25em*/
}
div > p > span{
font-size: 1.5em; /*1.5em of 2.25em inherited from p == 3.375em*/
}
So, I would recommend you to use px as measurement value.
Use ems to make scalable style sheets only.
If you want to know more about px, em, and % please follow this link and this link
Don't use em for font-size, that's just about the only place where you should never use it.
1em is the size of an m in the current standard font. You can use this to set paddings/margins, for example between paragraphs or around text blocks, that need to scale according to font size, to cater for people using custom settings at OS/browser level, or just as an easy way to keep a 'good' distance without having to worry about precise pixels.
Scaling a font to a relative size to the m of the current standard font makes no sense at all, unless you want to achieve this effect. If you would want to, it would be more logical to specify font-size:110%, for a single element or block. As a rule, use pt or px to specify font sizes.
Related
I have an h1 I want to fit the entire width of the viewport which consists of 13 characters in a monospaced font. After reading the CSS-Tricks article on viewport sized typography it seems like logically if I want to achieve this I simply have to set my h1's styles to:
h1 {
font-size: 13vw;
font-family: monospace;
}
This however is rendering with a bit of space left over (highlight the text to see the white space):
(There would be an image here but I don't have enough rep so click here for the JSFiddle)
I have tried other sizes, font-size: 14vw; is slightly too big, font-size: 13.99vw; seems just right, but strangely font-size: 13.999vw; is still too big?
Can someone explain what is going on here? Why would each character of a 13 character length string in a monospaced font require more than (100/13)% of the viewport width to fit the entire viewport width?
Before I begin I'm just going to say that I'm not going to give you a workaround due to issues I've raised in comments on Stoyan Dekov's answer. Instead I'm only going to answer your question of Can someone explain what is going on here?
font-size != width
The problem here is that you're assuming font-size is the same thing as width. It isn't. The CSS Fonts Module defines font-size as:
...the desired height of glyphs from the font.
This means that font-size is more comparable to height than it is to width.
This isn't specific to the vw unit, either. If you specify a font-size in pixels you'll also notice that the computed width does not match the font-size.
But even then it all depends on which font-family you're using anyway, as the same paragraph continues to say:
For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.
The key words here being scalable and non-scalable.
Even if a non-scalable font was being used though, 13vw would not reflect each character's width. This would never work with vw, but it may work with vh but only if the aspect ratio of each individual character matched the screen's aspect ratio.
The problem is if a text is the exact same size as the parent container, it will span across a second line.
body {
margin: 0;
width:100px
}
h1 {
font-family: monospace;
width:100px;
}
That will cause the text to go onto a new line as they are both 100px. That's why 14vw is too big, but 13.99 is just enough: Fiddle DEMO
However, you can use text-align: justify; to achieve what you want.
Take a look at this Fiddle DEMO.
There are many articles and questions about percentage-sized vs other-sized fonts. However, I can not find out WHAT the reference of the percent-value is supposed to be. I understand this is 'the same size in all browsers'. I also read this, for instance:
Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
Source: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/
But if you say "ie 12 pt = 100%", then it means you first have to define font-size: 12pt. Is that how it works? You first define a size in an absolute measure, and then refer to this as '100%'? Does not make a lot of sense, as many samples say it is useful to put:
body {
font-size: 100%;
}
So by doing this, WHAT is the font size relative to? I notice that the size I see on my screen differs for every font. Arial looks way bigger than Times New Roman, for instance. Also, if I would just do this, body size = 100%, would that mean that it will be the same on all browsers? Or only if I first define an absolute value?
UPDATE, SAT JUL 23
I am getting there, but please bear with me.
So, the % value relates to the default browser font size, if I understand correctly. Well, that is nice but gives me again several other questions:
Is this standard size always the same for every browser version, or do they vary between versions?
I ! found (see image below) the settings for Google Chrome (never looked at this before!), and I see standard "serif", "sans-serif" and "monospace" settings. But how do I interpret this for other fonts? Say I define font: 100% Georgia;, what size will the browser take? Will it look up the standard size for serif, or has the "Georgia" font a standard size for the browser
On several websites I read things like Sizing text and line-height in ems, with a percentage specified on the body [..], was shown to provide **accurate, resizable text across all browsers** in common use today. But from what I am learning now I believe that you should actually choose between either resizable text (using % or em, like what they recommend in this quote), or having 'accurate, consistent font-sizes across browsers' (by using px or pt as a base). Is this correct?
Google Settings:
This is how I think things could look like if you do not define the size in absolute values.
The browser default which is something like 16pt for Firefox, You can check by going into Firefox options, clicking the Content tab, and checking the font size. You can do the same for other browsers as well.
I personally like to control the default font size of my websites, so in a CSS file that is included in every page I will set the BODY default, like so:
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 14px
}
Now the font-size of all my HTML tags will inherit a font-size of 14px.
Say that I want a all divs to have a font size 10% bigger than body, I simply do:
div {
font-size: 110%
}
Now any browser that view my pages will autmoatically make all divs 10% bigger than that of the body, which should be something like 15.4px.
If I want the font-size of all div's to be 10% smaller, I do:
div {
font-size: 90%
}
This will make all divs have a font-size of 12.6px.
Also you should know that since font-size is inherited, that each nested div will decrease in font size by 10%, so:
<div>Outer DIV.
<div>Inner DIV</div>
</div>
The inner div will have a font-size of 11.34px (90% of 12.6px), which may not have been intended.
This can help in the explanation:
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#value-def-percentage
My understanding is that when the font is set as follows
body {
font-size: 100%;
}
the browser will render the font as per the user settings for that browser.
The spec says that % is rendered
relative to parent element's font size
http://www.w3.org/TR/CSS1/#font-size
In this case, I take that to mean what the browser is set to.
A percentage in the value of the font-size property is relative to the parent element’s font size. CSS 2.1 says this obscurely and confusingly (referring to “inherited font size”), but CSS3 Text says it very clearly.
The parent of the body element is the root element, i.e. the html element. Unless set in a style sheet, the font size of the root element is implementation-dependent. It typically depends on user settings.
Setting font-size: 100% is pointless in many cases, as an element inherits its parent’s font size (leading to the same result), if no style sheet sets its own font size. However, it can be useful to override settings in other style sheets (including browser default style sheets).
For example, an input element typically has a setting in browser style sheet, making its default font size smaller than that of copy text. If you wish to make the font size the same, you can set
input { font-size: 100% }
For the body element, the logically redundant setting font-size: 100% is used fairly often, as it is believed to help against some browser bugs (in browsers that probably have lost their significance now).
Sorry if I'm late to the party, but in your edit you make a remark about font: 100% Georgia, which the other answers haven't responded to.
There is a difference between font: 100% Georgia and font-size:100%; font-family:'Georgia'. If that was all the shorthand method did, the font-size part would be meaningless. But it also sets a lot of properties to their default values: the line height becomes normal (or around 1.2), ditto for the style (non-italic) and weight (non-bold).
That's all. The other answers already mentioned everything else there was to mention.
It's relative to default browser font-size unless you override it with a value in pt or px.
As you showed convincingly, the font-size: 100%; will not render the same in all browsers. However, you will set your font face in your CSS file, so this will be the same (or a fallback) in all browsers.
I believe font-size: 100%; can be very useful when combining it with em-based design. As this article shows, this will create a very flexible website.
When is this useful? When your site needs to adapt to the visitors' wishes. Take for example an elderly man that puts his default font-size at 24 px. Or someone with a small screen with a large resolution that increases his default font-size because he otherwise has to squint. Most sites would break, but em-based sites are able to cope with these situations.
According to ALL THE SPECS DATING BACK TO 1996, percentage values on font-size refer to the parent element's (computed) font-size.
<style>
div {
font-size: 16px;
}
span {
font-size: 75%;
}
</style>
<div><span>this font size is 12px!</span></div>
It's that easy.
What if the div declares a relative font-size, like ems, or even worse, another percentage?? See “computed” above. Whatever absolute unit the relative unit converts to.
The only question that remains is what happens when you use a percentage value on the root element, which has no parent:
html {
font-size: 62.5%; /* 62.5% of what? */
}
In that case, see the “duplicate” of this question. TLDR: percentages on the root element refer to the browser default font size, which might be different per user.
References:
CSS 1 spec (1996)
CSS 2.1 spec (2011)
CSS Fonts Level 3 spec (2013)
CSS Fonts Level 3 editor’s draft (2017)
Relative to the default size defined to that font.
If someone opens your page on a web browser, there's a default font and font size it uses.
As to my understanding it help your content adjust with different values of font family and font sizes.Thus making your content scalable. As to the issue of inhering font size we can always override by giving a specific font size for the element.
I am still not clear what does size in em mean?
I have worked px, pt in CSS.
What would 0.8, 1.0 and 1.2 em mean?
I have seen height's in CSS like:
height: 0.8em; or height: 1.2em;
How is it calculated?
The meaning of "em" has changed over the years. Not all fonts have the letter "M" in them (for example, Chinese), but all fonts have a height. The term has therefore come to mean the height of the font – not the width of the letter "M."
Let's look at a simple example where we use the em unit to set font sizes:
<html>
<style>
h1 { font-size: 2em }
</style>
<body>
<h1>Movies</h1>
</body>
</html>
When used to specify font sizes, the
em unit refers to the font size of the
parent element. So, in the previous
example, the font size of the h1
element is set to be twice the font
size of the body element. To find what
the font size of the h1 element will
be, we need to know the font size of
body. Because this isn't specified in
the style sheet, the browser must find
it from somewhere else – a good place
to look is in the user's preferences.
So, if the user sets the normal font
size to 10 points, the size of the h1
element is 20 points. This makes
document headlines stand out relative
to the surrounding text. Therefore:
Always use ems to set font sizes!
More Info
1em is equal to the current font size.
2em means 2 times the size of the current font.
E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
Here's a link to other CSS units:
http://www.w3schools.com/cssref/css_units.asp
1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.
more here
Paul is correct, however its "M" not "m". However this is an esoteric definition derived from typesetting/printing and isnt of much use in this case. In terms of whats going to be useful to you you its a percentage of font size.
An em is the width of the letter "m" (in your current font and size).
Em is the size of a character. It will vary depending upon the font size. If the font size is 24 then 2Em will be equal to the space it should take to hold two characters of the font size 24.
As quoted from wiki.
An em is a unit of measurement in the
field of typography. This unit defines
the proportion of the letter width and
height with respect to the point size
of the current font.
FYI:
En is half of Em. 0.5Em
An em means "ephemeral unit" it is relative to the current font size of its parent element. For instance, the text in an <h1> heading is 2em by default. This comes from the fact that an <h1> inherits its text size from its parent element, the <body> of the document. If I set my <body> font-size to 16px (font-size: 16px;). My <h1> being 2em would inherit a size of 32px, because 2em is twice the size of 1em. In this case 1em=16px so 2em=2x16px=32px. Now if you create an HTML document with the following
<body>
<h1>Hello world</h1>
<p>Lorem ipsum</p>
</body>
Then you define following CSS rule.
body {font: normal 16px Arial, Helvetica, sans-serif;}
Open the page in a web browser (Chrome) and open the browsers development tools (ctrl+shift+I), you'll see the default font-size for an <h1> is 2em. You will also see on the styles tab that it is "Inherited from body".
While still in the Development Tools for this scenario you can see on the Box Model diagram that the <h1> margin is 21.440px on the top and bottom margins. If you look in the CSS defaults for <h1> you can see the margin-block-start: 0.67em; and margin-block-end: 0.67em; Remember sizing is relative to the font size of the parent element, so 0.67em is relative to the <h1> font size not the font size of the <body>, you can verify this with a little math, 0.67em x 32px=21.440px and this is the size of the margin of the <h1> in the Box Model diagram. For more information try http://www.123webconnect.com/convert-px-em.php
We have a CSS file with some rules similar to the following:
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
Everything is working ok, but we're wondering specifically about the inconsistencies between the margin-top values. One is 20px and the other is 1em.
Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.
em units are used for better scalability of the page when the size of the elements depend on the page's scale. It's especially important for old browsers (e.g. IE6) and mobile platforms.
px units are used for absolute values, while em is relative to the font size of the particular element.
1em means one font-line, e.g. you have a box with font-size 12px that means that 1em will be equal to 12px
Also, using px seems easier because you know the exact value, but em units inherit the value of their container.
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
In this case, the first <p> will have font-size equal to the basic font-size * 1.2, and the second <p> will display with font-size * 1.2 * 1.2.
They're simply two different ways of measuring. Em is linked to the font size (traditionally, 1em is roughly the width of the letter M in a given typeface), while px is pixels.
If you build everything using em, everything will scale accordingly when the user adjusts their font size (e.g. using IE's Page > Text Size menu). It also makes it easier to work to a vertical rhythm.
Pixels are better when you want to build something "pixel-perfect". Be aware that a CSS pixel doesn't always equal a screen pixel - mainly because modern browsers and mobile devices allow for zooming. This isn't usually a problem though because the entire page is scaled accordingly.
Whatever you do, make sure you're consistent throughout - it makes life much easier later on.
The ems unit is relative to the current font size in the browser. So if the user increases the font size*, or if you change an element’s font size in the CSS, the margins should still look “right” in proportion to the text.
*(This ceases to matter if the user zooms the page instead of increasing the text size (as is the default in Firefox and Chrome now, and is an option in IE).
If you're using a margin to position something a set number of pixels away from something else, then you should obviously stick with pixels.
Also here is a very good in depth tutorial:
px – em – % – pt – keyword
In this example directory-result ul represents a block - some sort of list/menu where pixel dimensions are quite important. We can’t always rely on em which defines the text size, because if we need 20px space due to some background image – well, we need 20px, no compromises.
Note that you can't create and save the image i.e. 10em wide, therefore I see no reason why should I use different units on a web page. It just creates confusion and later on it is very difficult to maintain the layout.
There is a one place though, where using em is advisable – I’m talking about text blocks. I’m guessing in your code about-text is placed within other text where adding top/bottom margin of 1em (height of text) makes sense. It’s like in any text editor (i.e. line spacing in MS Word) – text looks best when spacing between lines is defined by multiplying the height of text
So in my opinion – everywhere where you deal with design and you use images by default measured in pixels – usepixels for all padding/margin.
Everywhere where you deal with text inside a text block, and you want to add even spacing between the text nodes – useem.
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,