I want to set my font-size to 100% (that is, 16px as default in my browser). Having embedded Bootstrap and its' Normalize.css, when I set font-size to 100% or 1em my text gets even smaller than 16px!
PS. Once I explicitly set font-size to 16px it does work, though it is not what I'm looking for.
I came across this question while dealing with exactly the same issue today. Here's what happens:
bootstrap.css sets html {font-size: 62.5%;} - this is 62.5% of whatever the browser's default font size is - probably 16px., i.e. you end up with a starting font-size of 10px in your <html> element.
Then bootstrap.css sets an explicit body {font-size: 14px;} which overrides the 62.5%/10px font set on <html>.
Now your css comes along and sets a body {font-size:100%} and since the 100% refers to the parent element's font-size, i.e. the <html> element, you get 100% of 62/.5% and presto - tiny font.
I guess the main thing here is that font-size:<percentage value> is relative to the parent element's font-size, not the current font-size. The above holds for em units too, since they also uses the parent's font-size.
To get around it, either set html{font-size:100%} in your css (not sure how bootstrap gets affected by that though), or set an explicit pixel font-size in your css for the body, or inherit whatever bootstrap sets up.
Malte
did you edit this in the bootstrap CSS itself? so yes, make note of changes, and add a 2nd CSS line in your webpage UNDER the CSS of bootstrap, in the new CSS< you only make new rules of changes, those wil " overwrite" the bootstrap CSS when the browser reads them
Try loading your css file after the bootstrap css file.This way you can overwrite almost any property specifed by the bootstrap.Your css will take precedence of the bootstrap file.You can also set !imporatant to properties that you specifically want to overwrite although loading your css after bootstrap will do the trick
Related
I have a simple question, where do you declare the base size that rem is calculated from?
<body>
<h1>Something</h1>
</body>
I can see that the font-size is <body> is set to 16px and the <h1> is set to 3rem, yet the font is rendering at 30px when I'd expect 48px. Can any parent redefine the base?
rem
Represents the font-size of the root element (typically <html>).
When used within the root element font-size, it represents its initial
value (a common browser default is 16px, but user-defined preferences
may modify this).
Source
In other words, change the font size of your html element, and the calculation base for rem will change.
Example:
<html style="font-size: 10px">
...
</html>
rem units are based on the font-size of the html element, not the body element. The default size is usually 16px on html, however that's not guaranteed, and users can change that default value. A common practice is to manually set the font-size explicitly on html, usually to that 16px value, and then use rems in other places to set the final display value.
However, that practice has accessibility problems for when users want or need to increase the default font size, so you should design your pages and layouts so that they can adapt to different sizes.
From https://developer.mozilla.org/en-US/docs/Web/CSS/font-size:
rem values are relative to the root html element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.
Just set the font size for the html element:
html {
font-size: 10px;
}
You are setting the root font size when you do this so the rem measurement will be influenced by this when setting a font size.
To add a best practice to previous answers: root font size should be expressed as a percentage.
html {
font-size: 110%;
}
This practice scales the font relative to the users system/browser settings. Your site will be consistently sized up/down compared to other websites. (assuming those websites also follow best practices).
Even more respectful to the user is to not touch the root font size at all so that they have a consistent reading experience across websites and can reliably use accessibility settings.
Is it possible to reduce the size of all element of DOM by a specific value?
I am using bootstrap style now.
Like for h5 it is 14px and I need 12px, for h1 it is 36px and I need 34px so on.
I have 2 options to do it
To rewrite a custom css for all element. It needs a huge change.
Using jQuery. I need to traverse all element of DOM. Find out there
font-size and reduce it by 2px. It will slow down page load time.
Is there any better way to do it?
What you can do is, you can set a base font-size for your body in rems.
Meaning, you have to set a font-size property for your body like so:
body {
font-size: 10px;
}
After this, a rem unit becomes equal to your base font-size:
1rem = 10px
Therefore, you need to set the font-size of all your elements to rem's.
When you want to scale everything down or up, simply change the body font-size property and it will scale everyting else accordingly.
Thus, the units become relative.*
If you want to go down the JS ways, you can use a plugin like FitText or some other alternative.
A certain element in my HTML has a parent element with font-size: 0, but then it has its own CSS rules with font-size: 1.9em. I can verify this in Chrome’s computed properties panel. I can also see that the style with font-size: 0 is crossed out, so it's overridden. And yet, to my great surprise, the resultant calculated font-size is still 0. How can this be possible?
(The element does not have any inline styles, if anyone is wondering)
If you create parent element with a font size 0px every tags inside which has font-size specified in emphasis like 1.9em it will calculate 0*1.9 = 0px.
You may want to use root element font size (specified in the html tag)
font-size:1.9rem;
When the html tag has font size set for 10px it will produce 1.9*10=19px.
http://jsfiddle.net/mJxn4/
This is very odd: I have a few lines of text wrapped in an <em> tag. No matter what I do, lowering the value for line-height below 17px has no effect. I can bump the line-height up to greater than 17px and it'll apply, but I can't get it lower than 17px.
The CSS in question is:
#others .item em {
font-size: 13px;
line-height: 17px;
}
Try adjusting the line height both higher and lower and run the updated fiddle after each change, and you'll see what I mean.
Why would this be? No line-height is specified anywhere else in the CSS, so nothing is overriding it. That couldn't be the case anyway because I'm adjusting the line-height up and down within the same selector, so it doesn't make sense that a higher value would apply, but a lower value would get overridden.
Because the em tag is inline and its line-height cannot be lower than its parent div.
For example, if you set the line-height of the parent to 10px, then you would be able to decrease the line-height of em tag to 10px as well.
In order for line-height property to work, div should has display property equal to block
.app-button-label{
line-height: 20px;
display: block;
}
I was facing this problem with divs in mobile view - the line height was way too big and line-height wasn't working! I managed to make it work by adding "display:block", per advice here: Why isn't the CSS property 'line-height' letting me make tight line-spaces in Chrome?
Hope this helps anyone else facing the same problem in future
You seem to be using normalized css option in jsfiddle - which equates to the CSS rules being reset - ala http://meyerweb.com/eric/tools/css/reset/
You can either reset the reset, or use a different reset if you really need it.
See here for more details:
http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
The best way to do it is using css reset.
Write your own or use popular one like
http://meyerweb.com/eric/tools/css/reset/
Yes, the block level elements(h1, h2, h3...h6,div) sets the minimum line-height for its inline children elements(span, em etc.). Which means if there is a element inside (with line-height 1.5), then the can set minimum line-height of 1.5 and no less than it.
The simplest way is to specify the line height with a higher priority, for example you could write: line-height: 14px !important;
If it is still not working set high priority in both where you u would like to decrease the line height (inline css) and also put in the body css .. remember the high priority (!important;) because it overrides any other unknown css rules.
Hope this helps
Ahmed
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.