Uncle Jims Web Designs: Web Site Design Optimization

Fonts, graphics and layers are the three main elements that will need to be resized with different resolutions. It is possible to resize fonts by utilizing the DOM's new getElementById. You can also dynamically change the font size depending on the screen resolution using CSS and Javascript. By placing the following JavaScript at the end of your page:

More and more people are using high resolution monitors these days. As of writing, 74% of visitors to this site use 1024x768 resolution, while only 17% are using 800x600 resolution. As the number of people using 800x600 declines, the number of people using resolutions of 1024x768 and above is increasing. So what does this mean for web fonts?

The simple answer is: have you ever tried reading an 8pt font at 1600x1200 resolution? Your hardcoded font sizes will not adapt to high resolutions, making them difficult, if not impossible to read. Here, I will review two possible solutions.

Lets assume we have three separate CSS style sheets, one for small fonts, one for medium fonts, and finally one for high fonts. If a font size is 9pt in the small font file, it could be 12pt in the medium, and 15pt in the high font file. We then check the screen resolution of the visitor's monitor, and write in the predefined CSS file through this JavaScript placed in the document header:

This is a good example of using multiple if-blocks and logical operators such as less-than (<), greater-than (>) and AND (&&). While this is an effective method, it does have some problems. If you change one font definition you have to change this in the three separate CSS files. Also, the font sizes are not truly scalable, as there are only three available font sizes for each font used on the site.

Here is an example of this solution:

The key line in this example is the actual formula that calculates the font size:

fSize = parseInt((sWidth/100)+2);

This formula divides the screen width by 100, then takes the integer value of this by using the parseInt() function, and finally adds 2 to this value. The '2' in this is the controlling factor, this may be increased or decreased to suit your preference. For example, if the screen width is 1024 pixels, 1024/100 = 10.24, the integer value of this is 10, 10+2 = 12. Therefore, at 1024x768 resolution, the dynamic font size is 12pt. The table below shows the different font sizes gained at popular resolutions by using this formula:

The CSS classes containing these new font sizes are then written in (mainFont in the above example). Realistically you would have this script in a separate JavaScript (.js) file which can be accessed from every page throughout your site. Of the two solutions, I believe this one to be the best as it only requires one file to modify, not three, while the fonts are truly scalable.

Designing web sites that have fonts that react to the user's environment is not very difficult and is a requirement for any professional designer. If a user visits your site and is unable to actually read the text on the screen, then your design has failed.

Many well designed sites have built-in functions that allow the user to alter the size of the site fonts at will, and I think these are also a good idea. In terms of usability, anything that allows the site fonts to increase in size when required is a major bonus, and proves that DHTML is not just for creating flashy images or moving text, but also for implementing smart reactive graphic user interfaces.