I had been trying out things on this blog with respect to fonts. One of my concerns were how do we know which fonts and font-sizes were appropriate for the reader. There are too many factors on the reader’s environment that can affect how the text is rendered.
- screen resolution
- font DPI
- the browser itself
These factors affect some fonts more severely than others. For example, popular fonts like Lucida Grande and Helvetica are rendered extremely poorly if anti-aliasing is not done, especially on the Windows family. It is difficult to cater to a variety of screen resolutions varying from 1024×768 to 1680×1050. If you try to target only a segment of it, your site might be rendered unreadable on others. The experiment I did, of giving up control, was quite limited but it did lead me to some observations. I am sure others have already noted this, but understanding the difficulty helps me appreciate them more.
Will 12px fonts be readable for all the readers? Will 80% be? Will 0.9em be? These are all different ways of setting the font sizes in the CSS, but none of them can ensure that the text will be readable. That is the reason, I believe, the best way is to use the font size set in the browser. Why? Because it is under the user’s control, and he/she can change it as convenient. Of course you can use resizable font-size techniques, but it still means that the user will have to change the size to read your site.
That is the reason there have been advocacies to use 100% of the font size set in the browser. Here are some interesting readings on this.
You can use
font-size: 100%; or
font-size: 1em; to do so.
Another thought that has been troubling me is how in the world can we find which fonts are installed on the reader’s machine. We might choose a
font-family for our site, but what if the reader’s machine does not have any of those fonts. Or it is possible that the font we selected looks terrible there. How can we avoid this?
Again, as we did with the font size, we start using the fonts set in the browser. The user can then choose the font that he/she is comfortable with and renders best in that environment.
However, there is a problem with this approach. The rendering of text is dependent on the font color, the line height, the font weight along with the font face. Only usetting the font from the browser might not work. It will work only if the user can control all these factors, not just the font. However, this might be too much to ask from the user, in terms of effort and expertise as well.
That is the reason I have gone back to using the
font-family. My doubts are still unclarified, which took me in the direction of open source fonts. I also think that downloadable fonts might solve this problem completely, but I wonder how soon will it be adopted by the browsers and community as well.
While we cannot give up control elsewhere, I think we should definitely use the font size the reader has set. But there is a big hurdle there – the reader does not know that he/she can set the size in the browser. I got a couple of emails about this blog that the “text appeared too big” in some browsers. Of course it did, because the font size set in the browser was perhaps too high. The reader can reduce the browser font size to bring it down to a size he/she is comfortable with. But, am I expecting too much from the reader? I do not know, but I am sure that readers need to be at least aware of this. This has made many, including myself, use fractional font-sizes while working with web sites.
Another problem is that the browser settings apply for all sites. So, a font size of 16px might look good for a site using 80% of the font size, but it might not be suitable for a site using 100% of the size. This will be convenient for the user only when all the sites, or at least majority of the sites, start using 100% of the browser’s font size.
The current trends of design are moving towards making the reader learn the least for using something. And this seems to be in the opposite direction. However, I believe that no amount of control can target the all-inclusive range that the Web provides us. Somewhere we will have to accept the reader’s settings and preferences. After all it is for the reader.