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
Related
I have set the base font size of my website like this:
html {
font-size: 62.5%;
}
Given that most browsers default font size is 16px this results in a font size of 10px. I have then used REM measurements on all elements.
What I would like to do is this:
At a screen size of 1440px I will add a media query breakpoint and make the base HTML font-size responsive – so that all of my site shrinks proportionally. 10px at 1440px results in the following:
html {
font-size: 0.6944444444444vw;
}
Then when everything starts to get too small I'll add in another media query breakpoint and do something like:
html {
font-size: 56.25%; /* 9px */
}
This work brilliantly, but I haven't seen websites using vw units on the base HTML font-size. Are there issues with this?
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
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/
I builded a responsive website from phone to big screen.
When I make my screen bigger my font size is getting bigger too.
But when I navigate or open in big screen the font size starts with the 100% as my mobile version. When I change the size again it will load the right font size.
Each 200 added pixel width makes the font size 10% bigger but not if I navigate or I have to resize it so it loads...
Anyone that can help?
There is a bunch of known issues in Chrome when a font-size is set on HTML tag:
https://code.google.com/p/chromium/issues/detail?id=320754
I use this to be on the safe side (you don't have to use rems, of course):
html {
font-size: 62.5%;
}
body, input, select, textarea, table, td {
font-size: 12px;
font-size: 1.2rem;
}
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.