Introduction
This page offers some tips on getting the most pleasing display of web pages. For many
users, the most important item will be the Making text easier to read section,
especially the Font smoothing part.
Table of contents
Recommended browsers
Image sharpness
Image Scaling
Color
Text Rendering—example
Making text easier to read
Browsers
Font Size
Font Smooting—Windows XP
Font
Smoothing—Mac OS X
Changing Fonts
Conclusion
Recommended browsers
Web browsers vary in the way they display the pages, so it’s not possible
to guarantee optimal display on every web browser, or even on a Mac versus a PC, or even on the same computer with
a different browser! Your author has done his best to choose fonts and sizes that look reasonably good across Mac
and PC and using various browsers, but everything is a compromise.
On MacOS, Safari is recommended.
On Windows XP, Firefox
1.5 or later is recommended.
Microsoft Internet Explorer is not recommended;
it formats web pages incorrectly in many cases and produces a quite awful display for some images.
What follows are a few tips that will make the display more appealing.
Image sharpness
Some of the results shown can be subtle. If possible, read the article using an LCD screen
instead of a conventional CRT; subtleties of detail and sharpness may be lost on a CRT.
Image scaling
Some browsers do a very poor job of drawing images at other than their
native resolution. Many diglloyd.com articles allow clicking to see a larger image, and the larger
image can look awful. The top image below was rendered in Mac OS X Safari; the bottom image was
rendered in Windows Firefox 1.5. Be sure to turn off browser options that scale images to fit
the window, or you might gt such jagged-looking results.
Color
When evaluating color, ideally you’ll have color-calibrated your monitor. If you
don’t know how to do this, that’s OK, but realize that the color you see on the display might not be
accurate. Also, subtleties may be lost—dark grays may look the same as black for example. In such
cases, you’ll have to trust the comments in the article, not your display.
For examples with images that are not in the sRGB color space, color will be completely
wrong unless you are using a browser that supports color spaces—please see Web
Browser Color Display to check.
Text rendering—example
This is an example paragraph displayed as text within your browser. The
size of the font should be such that it is comfortable to read across the page without excessively long lines. The
characters should be smoothly rendered and easy on the eyes.
Compare the appearance of the paragraph above, which is text,
to the appearance of the same paragraph below, as images. If the display is significantly
different, the article is not being formatted as intended by the author.
Making text easier to read
Browsers
Try a different browser, if you have more than one installed. You
may prefer one over the other. Firefox is an excellent choice
for both PC and Mac, and it’s a quick download and quick install.
Font size
Increase or decrease the font size in your browser. Sometimes a slightly different size
renders significanty better.
In MacOS Safari, this is done using View => Make
Text Bigger or View => Make Text Smaller. In
Firefox 1.5 (Mac or PC) this is done using View => Text Size => Increase or View
=> Text Size => Decrease. In Internet Explorer (PC), this is done using View
=> Text Size => Medium/Large/etc.
Font Smoothing
Font
Smoothing—Windows
XP
On Windows XP, if you are using an LCD screen, make sure ClearType is enabled by
opening the Display control panel, then clicking on the Appearance tab,
and select “Effects…”. Then enable ClearType
as shown below:
Font Smoothing—Mac OS X
On MacOS X, open the Appearance control panel
and make sure font smoothing is enabled:
Changing fonts
[this section applies to downloaded articles eg diglloyd
paid articles]
The fonts and sizes used in diglloyd articles are encoded as styles within a Cascading
Style Sheets files. This may be either “diglloyd.css” or “review-style.css”. You
can change entries within this file with any text editor to cause a different font and/or size to display in your
browser (be sure to refresh the browser window after making and saving the change). Look for “.diglloyd-default” in
the css file; it is the style used for all the main text.
Conclusion
If the display doesn’t look good, you can take steps to make it look better. Try
a different browser, try making the text smaller or larger, and make sure ClearType (Windows) or Font Smoothing
(MacOS) is enabled.
|
