Group items tagged

Filter: All | Bookmarks | Topics Simple Middle

shared by Vernon Fowler on 10 Sep 12 - No Cached

The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
...

Cancel
The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
...

Cancel
We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
...

Cancel
...3 more annotations...
I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
...

Cancel
consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
...

Cancel
The compounding nature of em-based font-sizing can be frustrating so what else can we do?
...

Cancel

1 - 1 of 1

Showing 20▼ items per page