I am using bootstrap 3 in my project and I see that there are 2 declarations of font-size in bootstrap as below:
Scaffolding.less
html { font-size:10px;}
body{ font-size : #font-base-size; }
And the #font-base-size is defined as 14px in variables.less
I have been reading stuff where one way of having responsive font size was to have base font size as px defined in body or html as then use font sizes in rem for different components in body such as p, h1 etc.
But I am not sure, where do I define the base font, should it be in html OR body?
And why does bootstrap has different font size in html and body?
My observations:
When I define some font size in px in html, then only rem thing works for everything, defining font size as px in body doesn't work with rem.
The rem unit is relative to the root, or the html element.
Thus defining the base font size should happen on the html element.
Defining a font-size on the body will work, but all child elements which have a font-size definition using rem units will fall back to the root/html element to calculate their absolute size.
So:
html {
font-size: 10px;
}
body {
font-size: 15px;
}
.parent {
/* font-size will be 15px here */
}
.parent .child {
font-size: 1.2rem; /* resolved to 12px */
}
As to why Bootstrap uses 2 font-sizes: the 10px font-size on the html element is just part of some global reset they use. Also, some margins/paddings are calculated using the base font size, so it's best not to interfere with that too much.
If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1rem = 16px, and 2rem = 32px. If you set a font-size of 20px on the body element, then 1rem = 20px and 2rem = 40px.
In addition, em, rem are not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.
NB: too long for a comment. sorry for that
Related
I'm building a react app using SASS. All my font-sizes, image sizes, and margins are in em units.
I added this to my SASS file so that when displaying content at 1920px width resolution or greater, the font size is increased by 1.25.
$base-font-size: 1em;
body {
font-family: Gilroy, sans-serif;
font-size: $base-font-size;
#media (min-width: 1920px){
font-size: $base-font-size*1.25;
}
}
However, upon doing this, all elements that are sized in em units become enlarged (fonts and images). The font is enlarging just fine but images are getting enlarged as well (which is not what I'm after). That's despite applying the property to font-size only
Take a look at the below link
https://css-tricks.com/confused-rem-em/
Em is causing problems here because it's relative to ancestor's font size.
Rem might be a good alternative for You because it's related to root / html font size
I'm trying to figure out why em font sizing is not behaving the way it should when body font size is set to 10 pixels. in other words it's like there's a 9px minimum font size applied to elements unless I overwrite it with a pixel value. Can anyone explain why is this happening?
For more clarification: I've set html's font-size to 62.5% for accessibility, which on default settings on most browsers is equal to 10px. I also set body font size to 1em which inherently is equal to 10px. I have 3 paragraphs which have em font sizes. If you try to inspect the p elements in chrome and go to the "computed" tab in dev tools, you'll see that the first paragraph that has a font-size of 1em is computed to 10px (as expected). But the other two paragraphs' font-size is computed to 9px, which I expect them to be 8px and 6px. It's like there's 9px minimum font size applied and the only way to overwrite it is to apply a px font size to it.
P.S: I've experienced this in Chrome Version 40.0.2214.111, this also happens in latest safari on OS X Yosemite.
html {
font-size:62.5%;
padding:3em;
}
body { font-size:1em; }
._10 {
font-size:1em;
}
._8 {
font-size:0.8em;
}
._6 {
font-size:0.6em;
}
<p class="_10">1x10 = 10</p>
<p class="_8">0.8x10 = 9 (!)</p>
<p class="_6">0.6x10 = 9 (!)</p>
Sounds like this could be an inheritance issue -
em will refer to the parent container, and adjust size based on that.
If you'd like to always use the font-size set on your html or body element, use 'rem' which is root
This article helps break it down: https://j.eremy.net/confused-about-rem-and-em/
My site is almost totally designed in "em" (as opposed to px). It is supposed to be much better for modern browsers.
Most of the text is font-size:1em. 1em = 16px by default, I didn't specify it.
But I have some content where font-size is 1.2em and other which is 0.8em (for example for H1 or for small buttons).
The issue with "em" is that it re-scale all the sizes of an element (margin, padding, height...) according to the font-size.
I have the specific code in my CSS:
/* Reset */
html [and many other elements] {
font-size: 100%;
font: inherit;
}
/* Design */
body {
font-size: 1em;
line-height: 1; /* Line height will equal the em of each element */
}
.small-button {
font-size: 0.8em;
margin-left: 1em;
}
.normal-button {
font-size: 1em;
margin-left: 1em;
}
The normal-button has a margin of 1x1x16 = 16px. But the small-button has a margin of 1x0.8x16 = 12.8px.
Apparently this is a specific "em" property (it would not be the case in "px") which scales everything according to the font-size of the element.
This example is simple; but on my website it makes things really hard for me to keep things consistent.
How can I de-activate this property so that in the example above the 2 buttons have the same margin? (without re-calculating the sizes; which is what I am doing right now!)
It is the purpose of the em unit that it is relative to the currently set font size. If you want to use an consistent form of em, use the unit 'rem'. It is relative to the root element of your page (most likely your html tag) and stands for root em.
Check out this article by Jonathan Snook if you want to learn more about it.
http://snook.ca/archives/html_and_css/font-size-with-rem
Personally, I set my "master unit" in the body and proceed in multiples of 10s. I hate 16pt as stock, because I don't want to use a chart to set my font sizes the sizes I want them.
body { font-size:10pt; }
As far as particular elements, keep in mind that if you have an element (say a ul) with a size of 1.2em, and the li set to 1.0, and your body is 10pt, then the li is actually based off it's parent container, so it would be 1.2em instead of 1.0(aka 10pt as set in the body), because it's parent is 1.2em.
If you have something that you want a specific size throughout (such as a main menu), I suggest you forgo the em method on that particular parent object (or the li themselves) and use a set px or pt method.
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.
in "CSS: The missing manual" the author says that font-size: medium (or other size keywords) sets the font relative to the browser's base font size.
But what I'm seeing in FF2 and IE6 is that it sets the font size to what I specified in the .CSS HTML or BODY style (which is much preferred).
If it works the latter way, this is very handy if you have nested styles and you know you want some text to be the body font-size (i.e., "normal sized text").
From the CSS 2.1 specification:
The 'medium' value is the user's preferred font size and is used as the reference middle value.
If a browser doesn't do this, then the browser is buggy.
It will be based upon the parent element, so as to respect the cascade. If it is helpful, I always do my font sizes this way:
body {
font: normal 100% "Arial","Helvetica",sans-serif;
}
p, li, td {
font-size: .85em;
}
li p, td p {
font-size: 1em;
}
Go 100% on the body, then use em for everything else. I never use "smaller" or "medium" or anything like that. I have more control this way.
Edit:
Please see Jim's comment about "medium" being an absolute font size. Good to note.
As noted before medium is set by the UA (browser) but you can still get the behaviour you wished by using rem. rem is relative to the root element (notably the <html> element, not the <body>) and thus affected by styling of the root element.
See this fiddle for demonstration.
html
{
font-size: 60px;
}
#mediumBlock
{
font-size: medium;
}
#remBlock
{
font-size: 1rem;
}
#halfRemBlock
{
font-size: 0.5rem;
}
<div id="inheritedBlock">
Foobar inherited
</div>
<div id="mediumBlock">
Foobar medium
</div>
<div id="remBlock">
Foobar rem
</div>
<div id="halfRemBlock">
Foobar 0.5rem
</div>
Font Size Keywords (xx-small, x-small, small, medium, etc..) are based on the users default font size which is medium. It can also be used in the term of changing the size of a child element in relation to the parent element.
I think if you set a default size to a element like a container or the body, then any relative font-sizes in the children are based on the parent elements. Only if you don't specify a font-size anywhere does it just default to the browser (which they all have different sizes at that).