Base font sizes should be set on the body or html element. Any other font size rule should use % or (even better) ems.
So I should add it here?
/* =Global Elements
-------------------------------------------------------------- */
/* Main global 'theme' and typographic styles */
body {
background-color: #53A4E6;
background-image: url('images/default-bg.png');
background-repeat: repeat;
background-position: top center;
background-attachment: fixed;
}
should I add this?
font-size: 16px
and then what kind of numbers do I use in front of em? Is 2em, 2 x 16px?
font-size: 2em
So I should add it here?
Yes – unless you are using a child theme.
should I add this?
No. The base font size ideally should be set to 100%. See http://www.w3schools.com/css/css_font.asp
okay, thanks. I’m going to try adding this to my child theme
body {
font-size: 100%
}
and then go through the rest of the CSS, find all the font-sizes and change them from px to ems using my child theme. Any of that sound horribly wrong?
I added the above code to my child theme and it only changed the font size in my sidebar menu. Nothing seemed to change in the text of my pages.
That sounds perfect! As a general rule of thumb, when converting pixels to em, use a ratio of 1em = 11px. That should keep the font sizes pretty much the same on a browser with a default font of (say) 16px.
that’s very helpful thank you esmi!
now I haven’t tried changing anything throughout the rest of my CSS so i’ll go give that a shot.
now that I’m going through my CSS I’m realizing that most everything is measured in px including padding, margins, line height. If I change my font-sizes to be measured in ems then should I changed everything else too?
I don’t think there is anything to be gained by changing padding & margins to a relative size unit except under special circumstances. Line height is an exception. It will work a lot better if you use the same unit of size for line-height as you use for font-size. Personally, I think a line-height of 1.3em to 1.5em works best for large blocks of text (eg your main content area).
Great thank you thank you. One more and then I’ll stop pestering you.
As a general rule of thumb, if there is not a font-size or line-height assigned will it default to the size I’ve specified in the body element?
Yes unless it has a parent element – in which case it will inherit the parent’s size.
