Full Page Zoom Is For Sissies

About a year ago, I spent the better part of a day making this site’s layout entirely em based and set on a vertical baseline grid… No, I mean, everything is em based: font-sizes, borders, margins, padding, widths, everything. Each individual value in the stylesheet that specifies a vertical measurement was manually calculated based on the relative value of an em on the specific element.

UPDATE: I've since completely overhauled this site’s CSS and now we're almost entirely px-based so much of this article no longer pertains to the current style. The links below have been changed to reference the original em-based stylesheet so do have a look if you're curious.

This has two notable effects:

Your site can be scaled to any font-size on the client while retaining exact proportions in every way and while staying on the vertical grid. (Go ahead. Try it if you don’t believe me. Just hammer on Command+- a few times.)
Your CSS becomes completely unmaintainable.

The second effect is as much of a nightmare as the first effect is wonderful.

Here’s a snippet from the stylesheet. You must believe me when I tell you this made perfect sense when I was writing it:

/* HEADER */
body{ 
  margin-top:1.428em;                  /* 20px */
}
#header,#footer{
  font-size:0.857em;                   /* 12px */
  line-height:1.666;                   /* 20px */
  color:#333;
}
#site-meta{
  margin-top:0.357em;                  /* 5px */
  border-top:0.083em dotted #aaa;      /* 1px */
  padding-top:0.333em;                 /* 4px */
  padding-bottom:0.083em;              /* 1px */
}
#nav a{
  padding:0 0.416em;                   /* 5px */
}

The first sign of trouble comes after a month or so when you decide to change a margin or a font-size or whatever. You open the stylesheet and … Surprise! You need an abacus.

Later, you just plain give up:

/* DRAFTS */
ol.drafts li h4 { margin-bottom:5px }

I laugh every time I see that.

What’s worse is that the new page zooming features slated for Firefox 3.0, and that has apparently already landed in Opera and IE7, makes all this effort completely unnecessary. Now you can lay the site out in pixels and the rendering engine maps you into a scaleable/transformable coordinate system automatically. This means that the morons doing web development in Microsoft Word are now producing stuff that is every bit as perfectly zoom-able as my carefully calculated stuff and their stuff is probably easier to maintain.

Sigh.

Speaking of morons, did I ever tell you about the guy that spent the better part of a day making his site’s layout entirely em based …

This entry has been tagged html, css, stupid, web, coding, typography — follow a tag for related essays, articles, and bookmarks.

Discuss

I've got to say that the zoom is pretty impressive, but the code looks impossible.

— Bud Gibson on Friday, January 18, 2008 at 10:35 PM #
How hard would it be to write out a mapping from px values to ems once for all, and then autogenerate the css whenever you change anything? (If you didn’t care about the performance hit, you could even do it in a cgi every time the css was requested.)

— Punya on Saturday, January 19, 2008 at 01:33 AM #
I feel your pain. The alpha for Designer Pages was em based. After that excursion, I just gave up and used pixels. It’s still not exactly a fairytale maintaining css.

— Avi on Saturday, January 19, 2008 at 02:57 AM #
You get used to how em’s work after a while. It does take a bit more effort to get right, but it does pay off (for now).

Page zooming is neat, but it’s not yet available everywhere. Also, IE7’s page zoom is too broken to be useful. Unless page zooming is a bit more common, I'll stick to my em guns.

Punya: a mapping of px to em is not exactly easy—you can’t express em’s in numbers of pixels. If you have a CSS parser though, then writing some kind of px-to-em transform script shouldn’t be too hard.

— Denis Defreyne on Saturday, January 19, 2008 at 04:26 AM #
I touched upon this subject recently in my short article entitled “Do we still need bulletproof layouts?”

http://theletter.co.uk/index/2917/do_we_still_need_bulletproof_layouts

The problem as I see it is down to everything scaling – text, images and multi-media, and this means pixelated graphics, horizontal scrolling and broken-looking pages.

If the zoom feature was an option I wouldn’t grumble but because it’s going to be the default functionality, I reckon it’s going to have a negative knock-on effect for web designers.

— Blair Millen on Saturday, January 19, 2008 at 06:50 AM #
As someone who regularly zooms, all I can say about this page is:

OOOooooo!

This is literally the first page I've seen that looks decent when zoomed. And by looks decent, I mean “doesn’t border on illegible”.

Now if only all y'all webdesigners/browsermakers would handle white-on-black color schemes better…

— Pete on Saturday, January 19, 2008 at 08:01 AM #
On your site, the vertical grid remains constant, but the line length adjusts if the window is not wide enough for the font size – a feature you'd loose if you relined on page zoom to keep the grid correct. I suppose that browsers could create a similar effect if they recalculated the window width in terms of the zoom and re-flowed the document (zooming in would have the same effect on the layout as making the window narrower).

— David Robarts on Saturday, January 19, 2008 at 09:12 AM #
My team have employed Tripoli CSS on a few sites, and have succesfully made everything scalable… and it’s actually quite easy to accomplish.

http://www.monc.se/tripoli/

So, making beautiful scalable websites, does not have to be a pain, nor stupid, and you don’t have to rely on whatever browsers are popular these days to do your scaling for you.

Enjoy! We certainly are.

— Morgan Roderick on Saturday, January 19, 2008 at 09:21 AM #
A couple of tools I found useful are a pixels to ems calculator for nested values and a pixel to ems Conversion Table.

I've found elastic layouts to be ok to create and manage and likely useful at this moment in time, looking at the visitor stats for the websites' implemented on, but using and updating a cross-browser, perfect vertical baseline grid with em’s a lot more difficult to first create and then maintain and I'm glad I had a play around with the idea before trying it on a commercial site.

As said it can be difficult to re-visit to make changes or additions to and all it takes is lazyness or a work time constraint resulting in the cross-browser aspect or the consistent baseline getting broken.

Plus if you correctly establish the maths for a site I haven’t so far found a case where it would be particularly transferrable as the differences of the vertical rhythm used for a company site to a promotional site to an article site mean redefining a lot of it again anyway.

If you like to seperate css into different files: (reset), type, layout, (possibly ie conditionals) and are using a system like this it can be difficult when the parent maths behind why you used say ‘0.071em’ for something is in a seperate css file and means flicking between files or adding a load of instructions at the top defeating the purpose of seperating them in the first place.

— Rowan on Saturday, January 19, 2008 at 09:42 AM #
Why you do need to map each value to a number of pixels? I've always used ems as a first-class unit. I don’t know how many pixels 2em is on a particular page, but I know whether it looks good or not.

— Brendan Taylor on Saturday, January 19, 2008 at 11:05 AM #
Brendan: I suppose you don’t absolutely have to map the ems to pixels. It gives you a sense of bearing, however, and lets you translate any relative em measurement back to a concrete/physical pixel unit. This helps tremendously when you're trying to keep things on a grid. I guess you could map ems back to some other unit or even the body level 1em value.

It’s a good question.

— Ryan Tomayko on Saturday, January 19, 2008 at 11:19 AM #
Brendan has a very good point. You've been using pixels disguised as ems. As far as I can see, this site doesn’t have any images or other things in the layout that are dependent on absolute sizes, so it’s totally unnecessary. You have to let go of some control if you want “liquid layouts”.

I disagree with the unmaintainable part. Once you have everything on your site in relative sizes if you decide you want everything or just one section to be larger (have larger font sizes), you just change the font-size from, say, 100% to 120%. You can’t do that with pixels.

Disclaimer: I'm not a web designer. I do however think some web designers haven’t realised they can’t control every pixel like they can with print. The few times I have to deal with printed material I feel like I don’t “get” how it works too. I don’t know what a “vertical baseline grid” is either, so I may be missing some important points here.

— TD on Saturday, January 19, 2008 at 11:44 AM #
I hear you, buddy.

— Wilson Miner on Saturday, January 19, 2008 at 02:43 PM #
TD wrote:

Disclaimer: I'm not a web designer. I do however think some web designers haven’t realised they can’t control every pixel like they can with print.

I'm not a web or print designer, either; I write code. But I've always had a strange infatuation with type.

And I'm not interested in controlling every pixel. It’s just that pixels give me a more-or-less concrete unit in the physical world that doesn’t change with each element’s font-size.

The few times I have to deal with printed material I feel like I don’t “get” how it works too. I don’t know what a “vertical baseline grid” is either, so I may be missing some important points here.

Follow the link and find out. It’s not specific to print in any way. There’s a part of your brain that really enjoys seeing elements flow vertically in nice equal intervals, whether you consciously know it or not. I'm trying to appeal to that part of your brain.

— Ryan Tomayko on Saturday, January 19, 2008 at 03:28 PM #
I'm slightly perplexed by this. I've been using ems to size most elements for a long time, with great success.

About the only time I don’t use ems is when I am using percentage widths, or a fixed width layout using pixels — even with fixed width I'd prefer to use em, but some designs are too constrained to allow that.

As long as you take the time to document the widths and proportions, maintenance of pixels vs. ems is a non-issue.

— Mr eel on Sunday, January 20, 2008 at 05:43 AM #
suggestion – from the short excerpts you show here, there are a limited number of actual em-sizes. You might try setting up .css files as mime type application/x-php (I forget the exact type – the same as you use to have html pages parsed by php.) – do this in .htaccess, just as you would do for .php files, or in the httpd.conf. Then you can use PHP code in the .css files to define and use variables. All the different sizes in the .css can then be defined in terms of ratios of some standard size. E.g.,
```
<?
    $size1=1.0;
    $bsize=$size1*1.428;
?>
/* HEADER */
body{ 
    margin-top:<?=$bsize1?>em;                  /* 20px */
}
```
Of course, you can do this with Perl or whatever if you prefer.
— Gary Bickford on Sunday, January 20, 2008 at 08:48 PM #
I used Tripoli (Beta) on a site recently, but it didn’t seem to align things to a baseline grid, so I ended up coding all the font sizing, line heights and margins. Maybe I was using it wrong, but in the end I had re-implemented so much of the code to get it to line up to a baseline grid that when I removed Tripoli the page layout didn’t change at all.

Ryan, have you ever thought about trying SASS out? It allows you to write in a CSS-like language while performing arithmetic on your sizes. You can define the base sizes, and use division and multiplication to calculate the relative sizes for other elements.

— Dan on Monday, January 21, 2008 at 03:02 AM #
If you want convert pixels to ems you should expect it to be difficult. I guess what the size is in ems – if looks about right then I go with it. If necessary I measure it and adjust. I have been doing this for a while and it actually makes my life easier as all the browsers seem to like it a bit better.

— matthew pollard on Monday, January 21, 2008 at 05:14 AM #
Ryan,

Dead on – thanks for writing this.

I redesigned my blog with an (almost) entirely em-based layout out of curiosity a couple months ago (http://www.paradoxica.net). The template is designed to mimic the aesthetic of Tumblr-based sites within WordPress. I'll be giving it away after making a few more tweaks, but yeah, the code…
```
#footer {
    width: 38.46em;
    min-width: 500px;
    padding: 1em 1.53em 2em 1.53em;
    border-top: .385em solid #333;
    border-left: .385em solid #333;
    border-right: .385em solid #333;
    background: #111 url(images/footer-bg.png);
    margin: 0 auto;
    text-align: left;
    clear: both;
    color: #666;
}
```
As therapy, I'm refusing to divide any number by 13(px) for the next few months. Fun project though, and the zooming is great :–).
— Scott Andreas on Monday, January 21, 2008 at 06:52 AM #
I always use ‘em’ as a unit of measure where it makes sense. I don’t use it for border widths and seldom for margins or paddings (unless they are wrapping text, like in paragraphs). I don’t use crazy values like you do, though. I set a global value of .9em on the body and adjust all other values from it, either scaling up or down the size with +0.1 and -0.1 values. That’s more than enough control.

Sure, you get more fine-grained control with pixel values, but web design isn’t pixel perfect (like e.g. print) and shouldn’t be designed to require it either. If you have a good web design, you shouldn’t need to use pixel units (except where they make sense) and thus you shouldn’t need to set ‘em’s on a 0.0001 scale either.

Oh and by the way, Firefox has been able to scale fonts in ‘px’ units, like, forever.

— Asbjørn Ulsberg on Monday, January 21, 2008 at 07:29 AM #
I'll second the recommendation of using SASS here. Do your arithmetic on the server side, keep things maintainable, and pass over the em-based CSS to the clients.

— Bob Aman on Tuesday, January 22, 2008 at 09:16 AM #
This is what I'm doing for years. It’s going to be interesting if any content scales (not only text and layout). Take a look at the function “initImgSizeReplacement()” in “setup.js” on S5.netzgesta.de. It provides one opportunity to get it done for images.

— Christian Effenberger on Tuesday, January 22, 2008 at 09:37 AM #
I agree with Gary Bickford. If you even need to use ems for layout, then use PHP to convert pixels into ems dynamically. Then you don’t have to worry about the headache.

— Marc on Tuesday, January 22, 2008 at 11:58 AM #
I just finished my blog (technically, at least, but if you want to have a preview, try user: ben and password: soso) using a completely em-based layout. It wasn’t as hard as I thought it would be, because I did one simple thing to circumvent this whole complicated number crunching: giving em a reasonable base size by putting “font-size: 10px” in my css body {}. Now, I could easily define any pixel size precisely (want 137px? 13.7em!). Because em-sizes are is inheritive, you may want to specify font-sizes (and thus changing what an em is) only in the very last element (like #container #yep #here .content p).

— Benjamin Wittorf on Thursday, January 24, 2008 at 06:29 AM #
I too have em based layouts (http://chadlindstrom.ca, http://blog.chadlindstrom.ca, etc…) and use it for a number of my sites. I'm not a designer but rather a programmer that dabbles in some web design.

I second some comments made above, that you should let go of that urge to have control at a pixel level, and rather focus on what looks good. I have found maintaining this to be no different than maintaining pixel based layouts.

And for the record, I don’t think the current ‘zoom’ features in the new browsers are that great, yet. So until then, bring on the ‘ems!!

— ChadL on Friday, January 25, 2008 at 02:54 AM #
Why do you all insist in pixels when using em/ex-based sizes? That does not make any sense at all. The Pixel is Dead!So just go and use 12em, 2em, 0,5em etcetera—-just STOP thinking in pixels and all the pain is gone. My website is running like that, and I am happy.

http://scg.unibe.ch/smallwiki/thepixelisdead/style.css

— AA on Saturday, March 08, 2008 at 12:40 PM #
Why did you set your base em to 14px instead of 10px?

— Jerry on Saturday, March 08, 2008 at 05:49 PM #
Jerry: that would only help a little. Any time the font-size changes, so does the base em so unless you have a single font-size, you still have to slide your em calculations based on containing base em.

— Ryan Tomayko on Tuesday, March 11, 2008 at 05:03 AM #
Actually i agree with some posters, when using EM you shouldn’t be thinking in pixels, its not diffecult to create EM based layouts at ALL!

I wouldn’t say that the Page-zoom function renders our effort useless, you will still be able to more adquate define, which elements should be re-sized, and which shouldn’t.

Theres even the posability, to define a max-width in pixels, based on screen resolution; and as such you could avoid the hoizontal scroll-bar intirely by using em.

— BlueBoden on Saturday, March 22, 2008 at 08:10 PM #

Full Page Zoom Is For Sissies

Discuss

Leave a comment