The point is there is no point in #RWD

Lately I’ve been curious about units used in #RWD –mostly rems I have to admit. Yes, discussing the correct or preferred values to use in #RWD is a topic that definitely makes me fall asleep, but instead of writing the same post about why ems are good for sizing in #RWD, I thought I would look at why pt isn’t beneficial when used in a #RWD setting – also due to a recent conversation on Twitter about the lonely pt. This surely goes for you nasty pixels too, but I’ll keep it to the pt for today –no pun intended.

Why Not Points?

ME

Yes ems are good; we get it now. Stop with the “why ems are good and pixels are evil” articles please. I can’t take it anymore.

Person A

I’m a big fan of points, since they actually measure something in physical dimensions. I don’t know why they’re not more popular.

ME

You probably are using points for designing right? I was talking units for the Web.

Person A

Yeah points as units for web, I don’t know why they’re not more popular.

ME

Will points stay relative to their surroundings in #RWD setting? Hard to believe points are gonna do great responsively.

Person A

If you set ur type to 12pt it’s the same size everywhere, no need for responsive, or am I missing something?

ME

I have to write a Blog Post now about points

The Quick Answer

The quick and dirty answer to Person A is that when a user changes the global font-size in their browser preferences the font-size declared in points from within your CSS still stays the same –so if the global font-size from your browser has been bumped up to 18px then your text sized in points stays fixed at that size indefinitely. This is a HUGE usability issue by not allowing the text to be resized by the user…Ouch!

Case Studies

View Full Results (allows you to see js reported computed values)

Check out this Pen!

The Results

Points don’t calculate from the parent element like we’re used to. What happens when we set our body font-size to 100% (the default browser size of 16px which is also the equivalent of 1em) and our paragraph elements font-size to 12pt? What we’ll end up with is 16px. This is great so far, but what if we change the body font-size to say 68.75% instead of 100% or (16 * .6875 = 11px) and leave our paragraph –the child of the body element– at the 12pt value we declared originally? We’ll still end up with a value of 16px. That’s not responsive!

Anytime we have breakpoints in our #RWD site (or fixed site, but don’t get me started there) and wanna change the font-size globally using the body (as I stated previously) we’re shit out of luck. Now we have to manually go through each element sized with points and adjust accordingly. Yuck! Points are what we like to call absolute values. They will always be what they are declared by the author no matter what the surroundings are set at. Absolute values are great for consistency, but for flexibility they suck ass…big time. In the times of users detached from their desktop counterparts sizing proportionally and responsively becomes increasingly important especially if you wanna keep up with the cools kids (see @brad_frost).

Conclusion:

Points are much like pixels, in that they’re fixed–size units and cannot scale in size. The em is a unit of measure based on the size of the letter “m” in the current font-size declared. Specifying sizes in em allows you to have a size based on the parent or global value for em, meaning that you can change em globally, and the layout will change to follow suit. As we know, most web pages are displayed on a pixel–based screen not a point based screen. Sure points will zoom from your keyboard correctly (command +) but globally through browser preferences just doesn’t work. Never use pt for on–screen use, it’s only sensible for print stylesheets, because on the web it’s the worst possible choice.

  1. FWIW: I am Person A :D

  2. ❧ Keith Knoer shouted:
    2013/03/20 • 1:46 pm

    Well written explanation of units in RWD! I get it now.

Leave a Reply

Your email address will not be published. Required fields are marked *

show formatting examples
<pre class="language-[markup | sass | css | php | javascript | ruby | clike | bash]"><code>
…code example goes here…
</code></pre>

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comment Preview

  1. John Doe shouted this comment preview:
    2012/11/09