Twilight Universe

Following on from my previous article on typography on the web I thought I’d mention a bit more about how text displays online.

As a lot of you probably know, text is usually measured in points, be it 10pt, 12pt or 150pt… its the most common way you’ll see text expressed. The reason it’s like this is because text is usually going to be printed out, or archived for printing later. There is a problem with this however when working for the web.

You see a point doesn’t mean anything on screen. Nothing. Why would it? The base measurement on screen is a pixel. Pixels are rectangular (usually square, but not always), and fonts are made from vector curves. There are complex algorithms and instructions (called hinting) that govern the way a font is displayed on screen, I won’t go into all that here, but basically the software makes its best guess from these rules at how the font should look at a certain pixel size.

So what does this mean for the web? Well CSS allows us to use points, pixels, ems, and other measurments to define the size of a font. Points don’t make any sense for the screen, so we shouldn’t use them right? Ok.. so what else to use?

Pixels! I hear you cry. Thats the base screen unit, everything should be fine in pixels! Right? Right?

Certainly that’s been the prevailing wisdom of many designers. Pixel based displays allow you to know exactly how text will display on screen. They give pixel perfect control to designers. They are fixed.

Sounds good huh? There is a problem though. Text shouldn’t be a fixed size in a webpage. A webpage isn’t a static display like a page, its a fluid flexible beast that changes depending on a users settings, their screen size, and window size.. and that’s just if they are viewing it on a PC. Throw in different OS’s, browsers, oh and remember that they could be viewing on a mobile phone, PDA, or some other device that hasn’t even come on the market yet.. it all starts to look a bit more complex.

The goal of not using points is so that the text is rendered correctly, not so that the text is a fixed size. Granted in some case fixed sizes might be wanted, but for the most part they just add to the inflexibility, and illegibility of a design.

Pixel Perfect?

Specifiying font sizes in pixels does seem like a sensible option for screen media, however the problem here lies with the browsers, in in this case Internet Explorer. You can resize text by holding down Control and rotating your mouse wheel, unfortunatly this doesn’t work in IE when text sizes are specified in pixels. When you specify a font size in pixels most other browsers will still let you resize the text, but IE doesn’t. I have a sneaking suspicion that IE’s behavior is actually correct, because else pixels sizes would be pointless. However because of its poor support of em units in the past this has been the only way to specify text effectivley on the web. So this ‘correct’ behaviour has led to accesability problems, and other browsers have acted to combat it by allowing it to be resized.

I even had to hack the layout of this journal (editors note - the article was previously posted on LiveJournal using the otherwise pretty excellent Component layout scheme) to stop it using pixels.

Why all this extra work for something that you might not even notice? Well that’s the point, you might not notice, but someone on a larger screen resolution, or who has trouble reading could very well notice, and have no option either if the font was in pixels.

But I Can Change My Default Size!

Yes, yes you can change the size text is normally displayed in your browsers. However this only applies to unstyled content. Any styled content will override this default. In the case of pixels you can’t change this at all, but using any other method you could.

Some people might complain that the font size displays too small to them or, rarely, too large. These are people who have generally changed their default font size in the browser to something smaller than its normal setting (which is 16px, believe it or not). These people acted sensibly when confronted with older, badly coded, content, however this shouldn’t be nessesary if more people adopt good practice. These people tend to complain that ‘other sites don’t have this problem.’ This is correct, they don’t because they are probably using pixels, however the problem doesn’t lie with the sites, it lies with the users browser. Text is only displaying correctly when their settings are overidden, so where does the problem lie?

Generally most users who change this default setting will be doing so because they have a specific use for it, and quite often will have a specific style sheet to impliment anyway. The rule of thumb here is that by supporting correct practice you are making hacks like the one the small minority have done obsolete anyway.

But It Works Fine In Mozilla/Opera! Why Should I Care?

Correct, resizing text in Mozilla (and so Firebird) and Opera works. However these browsers are used by a huge minority of people. Internet Explorer accounts for well over 90% of traffic to websites. This means that there is a high probability that someone who would need to change your sites font size will be using it. Therefore, like it or not, its quirks need to be taken into account, and you’ll be following Web Standards recomendations anyhow. Its a win win situation.

Designing for one browser is something that we are trying to get away from. Remember all those “looks best at 800×600″ or “Best viewed in Netscape/IE” buttons from a few years back? That is how we got in the mess the web is in today. I certainly don’t want to go back there.. do you?

Why Be Flexible?

The idea of creating a flexible design is something that isn’t natural to a lot of designers, especially ones that come from print based design, and why would it be? A page is a static medium, it isn’t able to be resized or its view settings changed.. and so it is fundamentally different to a web page. In fact calling it a page, at least in layout terms, is very wrong. This is why when dealing with CSS you refer to anything that will show up on a regular PC/Mac as “screen” - that’s its media, the screen.. not the page.

The most basic example of where designing for a static medium like a page is a disadvantage is when the user views a web page at a higher resolution that the page was designed for. Pages that are not built to be flexible will ‘break’ and the layout will fall apart. Content may even become unreadable. Obviously this is a bad thing.

There are many other examples of where layouts can break, however we are dealing with text here, and text is one of them. Take the case of someone with poor sight. They will most likley have their default text size set larger in their browser to compensate. Now in a pixel sized layout their text will be the styled size, and be unchangeable if they are using IE. Even if it wasn’t pixel based, if they change the size of the text then suddenly all this text will have to grow and fit in the box you have put it in.

Now this may not be a problem, but it often is. Say you have text in a box that is set to a fixed width of 300px and height of 200px, it could be a menu box perhaps, or just a little feature box. When the text is resized and won’t fit into that box the box will break, and this could effect your layout depending on how you’ve coded it. It might not be just one box, but the whole layout that breaks.

Obviously this isn’t what you want to happen to your work. In other words, when designing, avoid using pixels as a measure unless you know for certain that the measurment won’t be effected should text or window sizes change. There are many times this is the case, you should however know for sure. Remember - a user can overide your styles totally should they want to, so its best to code flexibly in any case.

Textual Compatibility

So what sizes should you use? Well.. this is where the fun starts. IE, for some reasons known only to itself, used to have serious problems displaying a font at asize lower than 1.0em.. which is the large 16px default. So how do you code flexibly with this in mind?

Well thankfully all version of IE work if you specify the size of your text in em’s but your BODY tag in a percentage. With this you are effectivly saying that a font is a certain em size, but IE thinks you are not. Don’t ask me what is going on inside IE, but it can’t be pretty.

So what sizes to use? Well for your content I would suggest starting that as 1em, that way everything is relative to the content size.. and you know how that will behave in your page. For the BODY tag you have to use a %.. now for reasons that basically come down to cross-compatibilty, and that they work out as equivilent to standard font sizes I recomend the following:

55% is equiv to 9px
60% is equiv to 10px
69% is equiv to 11px
76% is equiv to 12px

These are the most common sizes you will use, you shouldn’t use anything smaller than 9px equiv, because that is about as small as a font can go and maintain legibility. Remember that this is accurate at the default font size, which most ppl haven’t changed. Also remember that this is for your base size, not for anything else, that is handled with em’s.

Example Style Sheet

The following illustrates how you might set up a style sheet using the above method.

BODY {  font-size: 69% ;  }
#content {  font-size: 1em ; }
.title  {  font-size 2em;  }

As you can see, its very simple to implement, and has a real impact on the usability of your website. Hopefully I’ve covered enough in this article so that you can understand not just the method, but the reason for using it. If you have any questions, comments, or just want to discuss this, please comment below.