Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

CSS Font Sizes

May 10, 2003

A couple of reactionary items to feedback on the Garden.

The URL csszengarden.com forwards you to mezzoblue.com/zengarden, which effectively breaks the back button. I didn’t realize this was happening! I definitely wouldn’t have chosen that way on purpose; when I figure out what to do about hosting, I’m hoping the domain will be the final URL instead of a forward.

The issue of font scaling has popped up a few times now.

For me, some of the designs that are posted are hard to use because I normally scale fonts up. arch4.20 and Stormweather suffer when this is done to them. I hope that font scaling and different user base fonts will be considered ‘normal’ uses that designers are expected to take into account.

— Michael Croft

I think I screwed up on that point. I’m so used to coding font sizes as pixels (and since IE6/Win doesn’t allow you to resize hard pixel values) that in my testing I never think to fool around with font size and see what breaks.

Part of the problem in a project like this is that while text can scale gracefully, images can’t. It’s inconsequential to tell a box with only a background colour to grow as text scales, but it gets a whole lot harder when that box has to fit inside another box that only has so much room.

This is one of the problems with CSS as a design language — it’s either all or nothing where fonts are concerned. It’s a perfectly valid design requirement to constrain text within a certain area; if CSS provided a way to say “resize all fonts but these ones” then the problem is eliminated. Short of serving all your text as an image, there just isn’t a way to do this right now.

Any designer worth his or her salt will agree with that point; font scaling needs to be taken into account. But it’s a give–and–take process, and you can’t expect him or her to cater to every contingency. There’s no way I’m going to be able to make my pixel–value background images work if someone chooses to browse at text–size 300%.

The wonderful thing about style sheets is that if my entire design is done with them, I can provide an alternative. If someone chooses to surf at 300%, they’ll have the option of a different stylesheet which doesn’t break. It may not be as pretty, but at least they can get to my content.

This is probably the best of both worlds. I will give you what I think is my most effective design by default. If you have problems with it, I will give you an alternative or two to chose from that will hopefully clear up those problems. It’s tough being all things to everyone; it’s substantially easier when there’s a choice involved.


Reader Comments

1
May 11, 10h

There is one saying that can be applied to many professions and walks of life and that is “You can’t please all of the people, all of the time” . Sometimes you have to draw the line.

You are right about providiing a seperate stylesheet for people who want text at 300% but I personally think that browser vendors should make it so that pixel font sizes can be scaled up because at the end of the day, they are a valid size definition and easier to work with (in my opinion).

2
May 11, 11h

“if CSS provided a way to say “resize all fonts but these ones” then the problem is eliminated.”

But CSS does have this, as you mentioned. You define your fixed size text in px and your relative size in em. On Mozilla the user is going to be able to resize pixels, but that is the fault of the design community who got lazy and decided to do everything in pixels rather than taking 10 minutes to figure out ems.

3
Dave S. says:
May 11, 12h

The reason Mozilla (and others) allows resizing of px-based text is because as ridiculous as it sounds, according to the W3 spec px is a relative unit, not a fixed pixel width. (source)

I think Opera is doing it best, from a design standpoint. You get your whole page scaled up, rather than just your font. There’s no way designers will ever be happy with having to accomodate scalable fonts when their images remain fixed - that breaks proportions and throw alignments off; not a good thing.

It’s arguments like these that make Flash so attractive to designers.

4
Dave S. says:
May 12, 08h

Flash = an evolving open standard, created and developed by one company that specializes in design tools.

HTML/CSS = evolving open standards, created and developed by many different companies that specialize in high-tech tools.

Is it any wonder? Pretty easy to control a few hundred employees and move in one direction, compared to reining in the vested interests of a consortium of hundreds of companies.

5
haze says:
May 12, 12h

<dr.evil>muhahahah!</dr.evil>

actually that was one of my gripes about how html has been evolving. we have yet to see primary layers being able to tell secondary layers to adjust its size/position according to the primary. this feature has been built into flash, but not html.

surprisingly, there are methods to achieve this results through javascript… unfortunately, the JS needed to achieve this effect isnt supported by all browsers. the evolution of html has been such an embarassment when compared to flash. sooo teh ghey.

6
May 13, 08h

I think the point of this is being missed. People that view a font at 300% know that they aren’t getting the page displayed the way it was meant to be displayed. I second the comment that you can’t please all the people. My point is that I don’t think having a design slightly fall apart with text at 300% displeases anyone really.

The answer is simplicity. It’s all about the content anyway.

7
Dan Brickley says:
May 31, 12h


Regarding scaling of graphics, W3C’s Scalar Vector Graphics spec (SVG) might be worth bearing in mind. As the name suggests, it has some nice characteristics…

8
Dave S. says:
June 02, 06h

I really have to get my act together and start exploring SVG. Thanks for the nudge, Dan!

9
DaveB says:
June 03, 08h

I agree with Dave S - Opera does it best, by scaling *everything* on the page.

IMHO, the way of the future would be to use ems, or similar relative lengths for defining the image sizes. Then the browser should scale them as it scales text. SVG would fit in well with this, although bitmaps would look rough unless the browser has a good quality scaling algorithm…

10
Michael says:
June 13, 01h

I’ve struggled with the font sizing in my design submittal… it really is a pain to deal with, and me thinks someone should just change their screen resolution if they have a hard time seeing the words, that’s basically the effect opera creates anyway…

11
Niket says:
July 03, 10h

This is more of a font-sizing wishlist for browsers. I’d like to see menu with:
[View]
– [Page Zoom]
—- 50% | 100% | 150% | 200% etc.
– [Text Zoom]
—- (All text)

12
perennial says:
August 23, 10h

to Michael who said a person should just change screen resolutions, that’s just insane. As a designer, I work in 1600x1200 to get max space for work, when I surf, every site seems to use a font size of 2, which is very hard to read, which is why I have used opera for a long time. Since making the switch to css-based design, my main priority is that the site scales, because I know how annoying it is that everyone uses fixed sizes, and I don’t want them to experience that on my sites. Of course, there’s no 100% solution - I still haven’t figured out why opera zooms up to 1000 - but I make sure all my designs are liquid, so that they scale as nice as possible, because a huge percentage of the world doesn’t like to squint to read their screens, it is a priority. The content is what is important, not how I think it should be displayed. That’s the problem from the start, designers wanting to force their design on the audience. Liquid is the way to go, I’m tired of all the small text, especially in obscenely cluttered commercial sites that are a jungle to sort through, and break easy when you zoom a bit… Font scaleability should be a primary design concern.

13
Jeremiah says:
August 26, 07h

I experimented with a css zen garden design and then realized that scaling my fonts to 150% would screw up my image-based design in Mozilla.

I got to thinking about the nature of design versus function - font sizing falls neatly on both of those arenas, causing severe problems when one focuses on one or the other, usually design. In my case, the Design suffers because font sizes are necessitated by image backgrounds and particular div layouts.

Most of us AREN’T designing our sites for a CSS Zen Garden-like existence, which hinges pretty nearly solely on design. However, after doing a design of my own, I begin to question the overall effectiveness of CSS Zen Garden when designers must disrupt the “feng shui” of their work to accomodate what essentially boils down to a user functional issue.

That’s not to say function isn’t important - it is - but since Zen Garden is a Design experiment, my hindsight desire is to sublimate function under design. Font sizes be damned!

14
August 31, 01h

Nobody’s going to change their screen resolution when using an lcd screen. LDC screens are made for one screen resolution only. And a lot of laptops these days have 1400x1000 or even 1600x1000 on 14 or 15 inch screens. You cannot use those without increasing font sizes.

15
Ken Awamura says:
November 18, 08h

A question … which organization specified that Pixel sized fonts are Fixed ones? (Not Resizable) … W3C?