UPDATE: Please note that I am seeing this issue only in Chrome (latest version). Everything seems to be fine in Firefox.
By definition:
The rem unit is relative to the root—or the <html>—element. That means
that we can define a single font size on the <html> element and define
all rem units to be a percentage of that.
Let me explain my situation with an example...
Relevant CSS:
html {
font-size: 87.5%;
}
body {
font-size: 17px;
font-size: 1.21428571rem;
}
code {
font-size: 14px !important;
font-size: 1rem !important;
}
I am using the !important declaration to override the font-size of inline code.
The thing is, I noticed that the font-size of code blocks is much smaller than 14px, most probably 12px. But if I remove the !important declaration and set the font-size on a specific code element (styling a specific inline code element), the fonts-size is nice and fine at what appears to be 14px.
Does you have any idea as to how !important declarations may affect sizing in rem's? (Especially considering in my case.)
First off !important is lazy coding and dangerous to maintainability. It's toxic and breaks the nature of CSS (the Cascading portion). Avoid it at all costs.
Second:
code {
font-size: 14px !important;
font-size: 1rem !important;
}
Might as well be written:
code {
font-size: 1rem !important;
}
The second rule overrides the first (again, the Cascading nature of CSS)
rem stands for root em, which is the font-size of the top level element (i.e., html)
and what your rule is saying 1 x the em of the html element, with is 87.5% of the browser default.
EDIT:
Your <p> tags have a font-size of 100% inherited from the parent element which is eventually inherited from body and body has a 1.2142857rem which is roughly 17px This is why you're seeing a difference in font sizes, which is also exacerbated by the the difference of monospace and sans serif fonts.
Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).
Fixing these two has solved the problem.
I have no idea why Chrome Dev Tools Web Inspector's "Computed Style" shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it's showing the wrong value because by changing the font to Arial I could easily tell that it's 14px.
Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.
Related
I'm a little confused. If I have a mockup design given (1920x1080px) and for example the paragraph has a font-size of 22px and h1 has a value of 60px, what should be the base of font-size to convert to rem?
html {
font-size: 18px;
}
html {
font-size: 100%;
}
or should I take
html {
font-size: 62.5%
}
If, as #HaoWu suggests, you set
html { font-size: 62.5%; }
then you are basically setting rem as 10px in most cases because most browsers will default to 16px as the base font size. It’s then an easy calculation to set h1 to 60px as it’s just 6rem.
There will be occasional exceptions if the user has set the browser base size to something else. That is their choice, perhaps because they hope for websites to automatically show bigger text. This means you cannot absolutely depend on 1rem being 10px. In most cases this should be fine as everything will be correctly proportional.
If it is vital to your layout, and usually in a properly responsive design it won’t be, that the rem has a definite px value then you need to define html font-size in px, but best not if you can avoid it.
I'm experiencing the following issue in both Safari and Chrome.
body {
font-size: 15px;
line-height: 1.2;
}
body, .same-font {
font-family: Helvetica, sans-serif;
}
code {
font-family: Courier New, sans-serif;
}
<ul>
<li>Without any code - 18px height.</li>
<li>With <code>code</code> - 20px height.</li>
<li>With <code class="same-font">code.same-font</code> - 18px height.</li>
</ul>
Run the above snippet and the inspector. You can notice that the code element doesn't have anything modifying its font-size or line-height except body which it's inheriting from.
It's not adhering to that inherit though, because the height of its containing li is 20px, not 18 like the others... I'm not sure where that height is coming from, because the code element itself has a height of 17px (which is also of unknown origin).
When the normal/body is applied to the code element (like on the third list item), it goes back to 18px like normal. To me this means it's not any other properties that the user agent has imposed on the code element affecting the height - solely the font-family.
EDIT: For reference, something in StackOverflow's styles prevent this behaviour. The following list items all have the same height:
One
two
Three
EDIT 2: Apparently not.. if you change their monospace font to Courier New then the same problem would persist.
How can this change in size be prevented? i.e. How can you specify a line height that will be used even if the fonts within that line continue to change?
An example use case would be in a design with vertical rhythm - each line's height and the total height used by an element should be a multiple of 18px (i.e., if using that grid size) - a 20px line throws off the rhythm.
I ended up solving my own problem (to an acceptable extent) by simply tweaking with the font family and size until it worked for me:
body {
font-size: 15px;
line-height: 1.2;
}
body, .same-font {
font-family: Helvetica, sans-serif;
}
code {
font-family: Menlo, Courier New, sans-serif;
font-size: 0.9333em; /* 14/15 */
line-height: 1.28571; /* 18/14 */
}
<ul>
<li>Without any code - 18px height.</li>
<li>With <code>code</code> - 18px height.</li>
<li>With <code class="same-font">code.same-font</code> - 18px height.</li>
</ul>
Why Menlo?
I noticed that StackOverflow used Menlo and that didn't have this problem. When I tried it, it also solved the problem, however the font isn't built in on Windows.
So simply using Menlo solved the problem on Mac and didn't change anything on Windows.
Why the different font-size?
The different size changed nothing (except the font size...) when Menlo is in use - it still adhered to the line height, so Mac is all good.
However this font-size in combination with the Courier New fallback on Windows somehow got it adhering to the line height there too!
If I used 14px instead of 0.9333em it'd still work fine, but if I used 18px for the line-height instead of 1.28571, it wouldn't work. That doesn't bother me as I use relative values in my designs anyway.
So...
The Menlo font in combination with a Courier New fallback with a different font-size worked to solve my problem to a good-enough extent on Mac (Safari and Chrome) and Windows (Chrome).
My situation is lenient - a pixel difference wouldn't break my design, but just my rhythm. In cases where pixel perfection is required, I wouldn't feel safe with this voodoo method of playing with fonts and sizes...
If anybody can still explain where all of these numbers are coming from and what makes the actual difference here, that'd be great.
I have some icons that are set via pseudoelement in CSS, like this:
.button a:before {
font-size: 1.3em;
font-family: font-awesome;
content: "*";
}
And there are other, similar declarations elsewhere, like
.button .otherclass a:before {
font-size: 1.35em;
}
This works fine with modern web browsers, but IE >= 9 compounds all the font sizes, so that the resulting icon is enormous (like 5 times its size). How can I prevent this from happening?
(BTW, the actual code with the problem is here.)
This is a bug in IE, as reported on the Microsoft Connect page mentioned by #Aibrean, but the page also shows that Microsoft does not admit that this is a bug (they say they cannot reproduce it). It can be reproduced in IE 11 on Win 7 with the following simple document:
<style>
.foo, .bar:before {
font-size: 2em;
content: "X";
}
.bar:before {
font-size: 5em;
}
</style>
X<span class=foo>X</span>
<span class=bar>bar</span>
The second X should be 5 times as big as normal X, but it is actually 10 times as big in IE, since IE incorrectly multiplies the effects of 2em and 5em.
The workaround, it seems, is to organize your style sheet so that the font size of generated content is set once only for each element. That is, so that there are no two font-size declarations that apply to the same :before or :after pseudo-element.
There is a slightly better solution than using absolute font-sizes, and that is to use rem inside the :before or :after declaration.
em and rem units are based of the default font-size (commonly 16px, so 1rem = 1em = 16px) so if the user changes their default font then your font will change too. However rem units do not compound.
rem support is growing but you can use both (if you don't need compounding):
font-size: 2em
font-size: 2rem
and then those browsers (e.g. IE8) that don't support rem will use em. And as IE8 doesn't have the compounding issue to which you refer, this actually works nicely.
How can I reset the sizes of headings to the default sizes? Here's some HTML that I have:
<h2>Hello World</h2>
Here's the CSS for it:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
/*I'd like to reset that height of 16px and use the default browser height */
h2 {
font-size: 100%;
}
I need to override the old h2 selector and reset the headings to the default size? I've Googled this and it said that the heading sizes were browser dependent and I don't want to hard-code the heading sizes.
This is a really basic question I know but somehow I can't wrap my head around what value I need to use to reset the height.
According to A List Apart, the default body font size is 16px (and this is consisent across browsers).
The W3C recommended default stylesheet shows the h2 size as 1.5 em.
Some simple calculation brings us to 16 * 1.5 = 24px.
So, setting your h2 font-size to 24px should do it.
In general, you cannot set a property of an element to its default value except by not setting the property in any author style sheet. Methods suggested for this are based on misunderstandings or on some assumptions about defaults, but the defaults are browser-dependent.
You can use Normalize.css from the beginning and it'll normalize the heading sizes across browsers:
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
For example, here is a fix for the <h1> tag:
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
There isn't a way to go back to the browser's default font-size because everyone does it a little bit differently.
When you change the font size on your h2, it will impact the size of your margins as well (since they are defined in em). I suspect you are trying to modify the font-size to 16px in an attempt to match the margins of other elements that are also specified in em. If this is the case, you will need to set your properties differently:
h2 {
font-size: 1.5em;
margin: .75em 0 0.333em; /* (1 / 1.5) 0 (.5 / 1.5) */
}
The default font-size for headers is medium. See here: https://developer.mozilla.org/en-US/docs/CSS/font-size
So you would do:
h2 {font-size: medium;}
Probably the easiest way to have the heading font-size be set back to default is to remove the font-size declaration from the h2 element you already have, so instead of:
h2 {
font-size: 16px;
margin: 1em 0 0.5em;
}
you will just have
h2 {
margin: 1em 0 0.5em;
}
You will also want to check your style sheets for any other spots a h2 font-size might be declared. If you can't or don't want to remove the font-size delcaration you can do the following to reset the font-size for all h2 elements to default
h2 {
font-size: medium !important;
}
The font-size of medium is the default value for all browsers and the !important at the end makes it override all other declared styles. You need to be careful using important though because it makes it much harder to determine how a style is going to cascade through the elements and/or how it is being applied.
Cheers and how this helps.
Source for default value: http://www.w3schools.com/cssref/pr_font_font-size.asp
I'm using a fluid baseline grid template as a starting point for a site I'm working on and am hoping for a pointer on typography. The CSS font-size declaration is set by the grid template as follows:
/* DEFAULT FONT SETTINGS */
/* 16px base font size with 150% (24px) friendly, unitless line height and margin for vertical rhythm */
/* Font-size percentage is based on 16px browser default size */
body, button, input, select, textarea {font: 100%/1.5 Arial, Helvetica, sans-serif; *font-size: 1em; color: #333}
I'm wary of adjusting this setting but if I need the default font to be smaller than this. If I leave the declaration above as is, then set all p, a, ul fonts to be .9em for example, then this (expectedly) results in font sizes decreasing relative to their parent element. I don't think I should be setting the font size in pixels either - so can anyone advise a good solution for this (probably very simple!) issue?
I have just reduced the px down from 24px to 20px seams to work fine, are you using the Drupal theme?, and if so have you got it to work in IE 6-8, it breaks and displays in 1 column see the drupal demo site in IE to see http://themes.arborwebdevelopment.com/fluid-baseline-grid-theme-demo
This is a issue I've been trying to work out for a month now.