Sizes - Why use relative scales?

We've all been there while we're authoring a webpage or a style sheet - you know the current paragraph needs to be a different size to the rest of the text so your thought process runs along the lines of the normal font is 12 point so I guess this might need to be 16 or 18 point, you perhaps try out the 18 point and then decide that it looks a little too large so you drop it a few points until it looks just right. Have you ever stopped to consider that specifying font sizes in points isn't perhaps the best approach? What I am about to discuss here is the idea that instead of using an absolute scale such as points (pt) you should be using a relative scale such as percentages (% or pc) and this advantages and disadvantages of deploying such a system.

Why do we use absolute scales when alternates are available?

• Everyone thinks they know what a 10 or 12 point font looks like, so naturally they will be more comfy using them - the reality is that a relative scale is just as easy to cope with as an absolute scale if not easier as all sizes are expressed in terms of current font size.
• Most people don't realise the precise advantages they offer - if you have done any work on standards based styles then you will know that font sizes can be specified in a wide variety of ways apart from in points - until you understand those advantages, the alternatives simply appear to be part of an over-engineered specification.
• When creating pages some people want to create a pixel-for-pixel representation of the original document, and so that might mean that they have attempted to force a fixed text size with a certain browser width or used other methods which force the user to view the document the way they author wanted rather than the way they want.
• Some people simply cannot cope with the idea that in a relative scale if you have a class which sets its font to 50% of current size and inside that another font set to 50% of current size the resulting font size is actually 25% - as a result they get infuriated and give up.
• When retro-fitting a site which previously used an absolute scale the nature of what you are doing requires constant visual checks on the markup to ensure that nothing has been overlooked - this is a necessary but time consuming task which often makes a conversion look less attractive unless you know you require a relative scale.

Absolute vs. Relative

Absolute sizes are the scale most people are used to seeing and using, however the downside to this is that because they are absolute they never change - even when they really should! The most common example of this is when people attempt to dynamically change some aspect of the page and nothing happens - this might be trying to make the fonts larger to make them more legible or it might be trying to expand the window sideways in an attempt to make an article fit inside. In both cases the user has been stopped from viewing the content the way they want to view it, something which is very off-putting to them and may cause them to look elsewhere for similar information.

The main advantage of using an absolute scale is that you full control over the way a document appears when rendered for a user, obviously this is also a disadvantage too since it has the potential to severely limit the ways the user can modify the rendering to suit their own needs and requirements.

Relative sizes on the other hand are more flexible - their very nature means they change with their surroundings making them one of the purest implementations of fluid design, when a user decides to resize a window or rescale the text then the page will gracefully re-render altering all of the spacing, borders and other inter-relationships to suit the user's preferences which makes for an improved experience as not only can the user browse the page the way they want but they can also browse it with the correct formatting so that the document still appears the way the author intended the information to be presented, even though some of the small details have changed.

Technical advantages

Well first of all platform independance - unfortunately not all operating systems are created equally. Take for example an iMac which happens to be the tool of choice for quite a lot of media & creative types, these computers (the same is also true for other Macs) run their screen resolutions at 92 dpi instead of the standard 72 dpi which IBM PCs run their screens at. Since they have a higher dpi, when a font with an absolute size is rendered as part of a webpage on a Mac it will tend to appear around 2 points smaller. Aside from making the page look less attractive this also means that text which was small to begin with may now be so small that it is virtually unreadable.

Given the types of people that use Macs you are running quite a high risk that these people are going to be reviewing your site for press purposes (not to mention grabbing screen shots) and if portions of it appear badly designed or are unreadable then that reflects badly on you. Solutions to this problem involve one of two things - firstly you could just create a second set of styles for Macs with larger font sizes, solving the problem by creating another file which must be maintained in the future. Alternately you could simply modify your existing styles to use a relative scale as text sized to 90% of normal size will consistently achieve the right results anywhere - irregardless of the dpi of the display because the basic size will have already factored this in and you are simply working from the systems "correct" sizing.

Staying on the same theme you also benefit because as you improve your standards compliance your code becomes application independant - this means that your site is now not tied to one particular browser or even one particular operating system. In turn this leads to enhanced accessiblity which means that your site should contain less barriers stopping people from viewing, using, or purchasing from your site which is definetely a good thing.

© evolved code
2000 - 2008