Typophile

Consistent web text sizing using CSS

Dan Gayle

For those of us who are interested in typography on the web, hopefully meaning all of us, I recently stumbled across this link regarding text sizing:

Text Sizing Up the Garden Path

Having our text look consistent across browsers/OS is a good thing, no?

Well, yes. Sort of. I actually agree with letting users dictate the size they want to read the page at: the last thing I want to visit is a web site that wants to lock me into one (their!) view which may or may not make me want to stick around.

Sure, that means some complications when designing a site, but they are not dissimilar considerations to producing print documents.

Another problem I have with your link is that it’s four years old — we’ve come a fair way since then technically....

Meh... I’m a big fan of just designing a web page to scale well with the type, and not worrying about the details. It beats banging my head on the wall while I’m trying to figure out how to keep things working in IE/Firefox/etc.

Another problem I have with your link is that it’s four years old — we’ve come a fair way since then technically….

What’s different now? IE will always suck, that I know. But spec’ing sizes is still the same code, isn’t it?

Is it really necessary to have consistent web text sizing? I would think consistent text formatting would be more important.

What’s different now? IE will always suck, that I know.

ROFL! But now there’s Firefox and upgrades to Safari, and a swack of other minor browsers. And I won’t even go into what you need to do to make sites useful for the visually impaired.

But spec’ing sizes is still the same code, isn’t it?

Type size hasn’t changed much but monitor sizes have. It’s quite unusual now to spec for small monitors, whereas that used to be much more standard. Part of that’s because the prices have come down, at least here in the industrialized world.

I dug out one of my early web design books — it’s pretty funny the way it talks about HTML 2.0 as “cutting edge” — and when one considers the explosion of XML et al, I’d want to see this site updated within the last six months to be really useful.

Plus it’s not just designers who have made great strides — users are a lot more savvy (and discriminating) about what they will and will not deal with. Even with many folks switching from dial-up to some flavour of high-speed, monster Flash-only sites still have a limited audience: personally, I usually skip ’em....

An new issue for page layout is that IE7 zooms all elements rather than just increasing text size. And it’s easier to do than before.

“Having our text look consistent across browsers/OS is a good thing, no?”

It’s a futile thing.

The web is not about dictating design, but suggesting design. Suggest something, and assume it will change to an extent by the time it’s rendered for the end-user.

“Type size hasn’t changed much but monitor sizes have.”

True, but while they’ve gotten larger, they’ve also gotten smaller (PDAs, Cell phones, Blackberries, compact laptops, etc.)

Maybe it’s a particular vanity that I have because I approach web design from a print design background. Fluid layouts? Yuck. 40 pica column measures? Disgusting. I want everything locked down tight, especially the text.

Now, that doesn’t mean that I want everything to only be one size, because accesibility is important. But I want everything to scale in proportion to MY design. Not to a browser’s indiosyncratic whim.

“Maybe it’s a particular vanity that I have because I approach web design from a print design background. Fluid layouts? Yuck. 40 pica column measures? Disgusting. I want everything locked down tight, especially the text.”

That’s not really embracing the medium properly. That’s fighting it.

“But I want everything to scale in proportion to MY design. “

It’s not YOUR design. It’s your suggestion of a design. The browser, the monitor, the user, the display device, etc. all have a say in how your design will eventually look to each individual person.

Don’t try to dictate to the pixel online. It will only drive you crazy.

I don’t want to dictate the pixel. I want to dictate with an Iron Fist the structure. I see far too many piss-poor webpages that treat type as if it were a second thought, because quite frankly it is to most people. If I dictate structure with the end browser and user in mind, and the design of the text comes out properly, then I have done my job.

Embracing the medium does not have to include throwing out all of our knowledge of how people read and what makes for best readability. That means structuring everything to scale properly according to best usage. Good structure and design transcends all mediums.

But I’ll argue that it IS my design, browser be-damned. It’s the same as printing on a crappy 4-color offset newspaper press. You know something is going to get screwed up if you call for 12pt Bodoni in full color on both page 1 and 2 flats. The color is going to mis-register, everything will look like mud, etc. It’s STILL my design, and I have to accept responsibility for ignoring the limitations of the medium, and adjusting accordingly.

Browsers are still in the crappy 4-color offset press with bad rollers stage. We are all waiting for the Heidleburg browser to come out, but until it’s here, we still have to have accountablility for our designs.

>I want to dictate with an Iron Fist the structure.

Zooming -
You can do that somehow * with defining the whole site css with the unit em instead of px. With em you can make a layout “fix”, but enable the zoom functionality for the user via Browsermenu (fontsize), Wheelmouse, Shortcuts for ALL browsers.

The initial fontsize defines the “largeness” of the whole site. If the user decreases/increases the fontsize, the whole sitelayout is zooming. Like opera did that for years or IE 7 now (jumped on the bandwagon)

* there is a javascript-experiment available, that reduces dynamically the line-height, if the user changes the font-size. It is a “weak beginning”, but it is a beginning.

“But I’ll argue that it IS my design, browser be-damned.”

You’re sounding like a typical frustrated print designer on the web. ;0)

On paper, yes, it is your design. It can only look one way. And you know it’s going to look exactly the same for everyone that picks up that piece of paper.

Online, you simply do not know that. You don’t know what fonts a person has installed. You don’t know what size their web browser is. You don’t know the size of their monitor. You don’t know if they are using a wide screen plasma monitor or a 2” cell phone screen. You don’t know if they prefer 18pt type for their aging eyes or prefer 8pt type.

You simply can’t dictate anything online. Only suggest. By all means, use your training and skills and knowledge to suggest the best option, but also realize that it might change, and design to accomodate that whenever you can.

“Browsers are still in the crappy 4-color offset press with bad rollers stage.”

It sounds like you are equating ’I can’t force this design on everyone’ with meaning ’it’s a crappy browser’. A good browser gives more control to the end-user than the designer.

And while zooming sounds good, it’s not necessarily better or worse than the usual font size zooming in other browsers. They both serve a purpose, but people may prefer one over the other.

Captured from web.archive.org on 14 Dec 2007. view this capture