Uncle Jim's Web Designs and Tutorials
Writing for Multiple Resolutions
Site Design Optimization Recommendations
Author: Jim Stiles
Fonts, Graphics and Layers
The Importance of Scalable Fonts
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?
Writing in Links to External CSS Files
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.
Calculate and Dynamically Write the font size in the CSS Class
Here is an example of this solution:
The key line in this example is the actual formula that calculates the font size:
An Ending for Fonts
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.