CODEWITHSUNDEEP
cssfont-size
ahmd0
ahmd0

Reputation: 17293

Using fractional em's in CSS's font-size property

Say, I have the following CSS rule defined:

.className {
font-size:0.89em;
}

My question is, how "deep" into fractions can I go while specifying 'em's for browsers actually to support it and for the font size to be rendered differently for a small fractional change in the em's value?

Upvotes: 13

Views: 8222

Answers (2)

Adam Jagosz
Adam Jagosz

Reputation: 1594

It should be kept in mind though, that fractional em values, like all floating point numbers, are susceptible to rounding error.

I found that out while setting my media query boundaries, where one max-width was 0.00001em away from another min-width, and it was rounded up and both queries were activated. After changing the difference to 0.001em the queries worked as expected, exclusively.

Upvotes: 1

james6848
james6848

Reputation: 1667

JohnB is right. We're still rendering in pixels whatever the size unit we use, and small changes in ems will not change the displayed size:

For example, for text originally displaying at a height of 20px*, we can see that there is no effective change when a rule is added to make it .99em of its original height:

20 * 0.99 = 19.8

The browser can't display .8 of a pixel, so (assuming it will round up) it will still display it as 20px high.

Though it appears that browsers do not always round off as expected:

http://meyerweb.com/eric/thoughts/2010/02/10/rounding-off/

http://ejohn.org/blog/sub-pixel-problems-in-css/

*Yep, I know a font-size of 20px doesn't alway mean it's displayed at 20px!

Upvotes: 6

Related Questions