Using Fractional Em's in CSS's Font-Size Property

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

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!

Font size in pixels and as fractional number

yes the above syntax .text { font-size:10.25684789px; } will be support in browsers too....

CSS: fine tuning font size

You can use several different units with font-size. You could try em, px, pt, or a %. Try using a decimal value as well.

There are also several named sizes you could try as well; xx-small, x-small, small, medium, large, x-large, xx-large, smaller, and larger.

From: http://www.w3schools.com/cssref/pr_font_font-size.asp

Is decimal precision when specifying a font-size respected by all browsers?

Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding

This contains a table that shows the following:

Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10    truncate to 2 decimal places
Internet Explorer 11    truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31  truncate to 3 decimal places
Chrome 20   round to 15 decimal places
Chrome 21   round to 15 decimal places
Chrome 37   round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion)  round to 15 decimal places
Safari 7 (OSX Mavericks)    round to 15 decimal places
Mobile Safari 7 (iOS7)  round to 15 decimal places
Mobile Safari 8 (iOS8)  round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3]    round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2]  round to 15 decimal places
Android Browser 4 (Gingerbread) [S2]    truncate to 3 decimal places
Opera 12    truncate to 2 decimal places
Opera Next 24   round to 13 decimal places

Is decimal precision when specifying a font-size respected by all browsers?

Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding

This contains a table that shows the following:

Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10    truncate to 2 decimal places
Internet Explorer 11    truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31  truncate to 3 decimal places
Chrome 20   round to 15 decimal places
Chrome 21   round to 15 decimal places
Chrome 37   round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion)  round to 15 decimal places
Safari 7 (OSX Mavericks)    round to 15 decimal places
Mobile Safari 7 (iOS7)  round to 15 decimal places
Mobile Safari 8 (iOS8)  round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3]    round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2]  round to 15 decimal places
Android Browser 4 (Gingerbread) [S2]    truncate to 3 decimal places
Opera 12    truncate to 2 decimal places
Opera Next 24   round to 13 decimal places

Should I use px or rem value units in my CSS?

TL;DR: use px.

The Facts

• First, it's extremely important to know that per spec, the CSS px unit does not equal one physical display pixel. This has always been true – even in the 1996 CSS 1 spec.

  CSS defines the reference pixel, which measures the size of a pixel on a 96 dpi display. On a display that has a dpi substantially different than 96dpi (like Retina displays), the user agent rescales the px unit so that its size matches that of a reference pixel. In other words, this rescaling is exactly why 1 CSS pixel equals 2 physical Retina display pixels.

  That said, up until 2010 (and the mobile zoom situation notwithstanding), the px almost always did equal one physical pixel, because all widely available displays were around 96dpi.

• Sizes specified in ems are relative to the parent element. This leads to the em's "compounding problem" where nested elements get progressively larger or smaller. For example:

    body { font-size:20px; } 
    div { font-size:0.5em; }
  

  Gives us:

    <body> - 20px
        <div> - 10px
            <div> - 5px
                <div> - 2.5px
                    <div> - 1.25px
  

• The CSS3 rem, which is always relative only to the root html element, is now supported on 99.67% of all browsers in use.

The Opinion

I think everyone agrees that it's good to design your pages to be accommodating to everyone, and to make consideration for the visually impaired. One such consideration (but not the only one!) is allowing users to make the text of your site bigger, so that it's easier to read.

In the beginning, the only way to provide users a way to scale text size was by using relative size units (such as ems). This is because the browser's font size menu simply changed the root font size. Thus, if you specified font sizes in px, they wouldn't scale when changing the browser's font size option.

Modern browsers (and even the not-so-modern IE7) all changed the default scaling method to simply zooming in on everything, including images and box sizes. Essentially, they make the reference pixel larger or smaller.

Yes, someone could still change their browser default stylesheet to tweak the default font size (the equivalent of the old-style font size option), but that's a very esoteric way of going about it and I'd wager nobody¹ does it. (In Chrome, it's buried under the advanced settings, Web content, Font Sizes. In IE9, it's even more hidden. You have to press Alt, and go to View, Text Size.) It's much easier to just select the Zoom option in the browser's main menu (or use Ctrl++/-/mouse wheel).

^{1 - within statistical error, naturally}

If we assume most users scale pages using the zoom option, I find relative units mostly irrelevant. It's much easier to develop your page when everything is specified in the same unit (images are all dealt with in pixels), and you don't have to worry about compounding. ("I was told there would be no math" – there's dealing with having to calculate what 1.5em actually works out to.)

One other potential problem of using only relative units for font sizes is that user-resized fonts may break assumptions your layout makes. For example, this might lead to text getting clipped or running too long. If you use absolute units, you don't have to worry about unexpected font sizes from breaking your layout.

So my answer is use pixel units. I use px for everything. Of course, your situation may vary, and if you must support IE6 (may the gods of the RFCs have mercy on you), you'll have to use ems anyway.

Using em without a need to apply division

In my opinion the main problem is that you hard-code the font-size value (14 in your example). If you use SASS, I would write the code as the following:

$fontSize: 14;

.title-main {
  font-size: #{$fontSize} + 'em';
  letter-spacing: calc(9em/#{$fontSize});
  margin-bottom: calc(8em/#{$fontSize});
  margin-right: -calc(9em/#{$fontSize});
}

That outputs exactly your code but in a more efficient way; hope that's what you meant.

In my example I've put the variable outside the declaration (that's the best scenario), but it can be inside the declaration as well.

---

Related Topics