Anthony's Web Site

I have noticed on a number of web design sites that there is a lot of discussion on using scalable font sizes. By this we are referring to defining font sizes by either Percentage or Em and specifically not by Pixel.

Most web browsers now include the ability to zoom the web page, this has become increasingly important as screens resolution increases. A 10 pixel font might look fine at 800x600 but go past 1200x900 and that is another matter.

Most web browsers, except for Internet Explorer will scale all fonts including Pixel sized fonts. However as most people continue to use Internet Explorer and with the new devices appearing on the internet, like WebTV, Mobile Phones, PDA's and Refrigerators, there is an increasing need to have more flexible page design.

I have not been the best at adopting web techniques being a real late arrival on the web scene. Despite have access to the web and e-mail in the early 90's, and having relied on th web at work and home in the late 90's it was not until mid 2003 that I finally setup a web site. I went straight into this weblog.

Using scalable fonts however it appears I have been an early adopter. I guess I'm the sort of person who like to make code do as much as possible, be it an Access Database, a report design or a web page. So from the start I have been a semantic designer and I wanted to be able to a number of things such as scalable fonts, css skins.

Now the trick to using scalable fonts is to start by setting the body text size. The default font size is mostly 16px, so 62.5% of that is 10px. From there every other element can be sized by % or em. 14px is 140% or 1.4em. If you wish in increase the size of the whole page just change the body tag. The only issue is to watch out for nesting of elements. eg a ul inside another ul would result in double the size effect. You need to counter this by using a class, id or a new rule. This however can be used to effect so that heading in a side bar are the same proportionally size larger as heading in the body copy. Simple rule and style reuse, allow a more consistent interface.

logged by Anthony at 6:52:50 PM Link