Consistent font sizes

HTML & CSS
1

I’m building a new site in which the body font size is 62.5%. Each element seems to inherit the font size of its parent element such that:

[code]



Font size here is 400%

[/code]If this is how percentages work, how can I define a class where whenever I use it, the actual font size displayed is consistent across the site? Do I have to use pt or px?
2

Set a font-size on the HTML element.

Then use the REM measuring unit. All font sizese will be based off the HTML element. So you don’t have to worry about nasty inheriting issues and it allows for users to text-resize.

EDIT - As @ronpat pointed out, the rem size is on HTML…not body

3

rem font sizes are based on the HTML element (the root element).

4

Hm. Thanks. So what’s the standard, now? It isn’t REM, as it is not fully backwards compatible.

5

What’s your definition of it not being fully backwards compatible?

6

You can just use px, but doing so has a troubled history—which is relevant if you are talking about backwards compatability. Otherwise, other than rem, you need to be careful about how you calculate font sizes in various places. So if a container were set to 200%, an inner element would need 50% to go back to the original body size … though that quickly gets messy. Thus it’s better not to set font sizes on containers, but rather target just the elements you need to size.

7

Personally, I use both px and rem - with rems defined after the px. Unless you have lots of font-size declarations, it makes very little difference to the CSS file size if you gzip it. (As you should.) :smile:

8

I assume you mean px declared on the root element (html) and rem to base font size off of that.

I’m curious why you do that though, user text resize will suffer from that?

9

Not at all. The root element is set at 100%. Other element font sizes are set in both px and rem for consistent font sizes across browsers. But you are right in that user control of text size is borked for IE 8 users - about the only browser that will use the px definition.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.