HTML and CSS Reference
In-Depth Information
If the font being used provides a small-caps variant, it will be used. If not, the browser
may generate a small-caps face by scaling uppercase letters. This is not ideal, but it's better
than nothing.
Note Internet Explorer 5.5 and lower display text in all caps rather than small caps.
Setting Blocks of Text
Let's face it: reading long passages of text on a screen is hard on the eyes. But, by following
some basic rules of typography and learning how to apply them with CSS, you can make it
a whole lot easier on your visitors.
Line Length
Typographers call the length of a single line of text the measure . Choosing an appropriate
measure is a key component of readability. In CSS, the line length is defined by setting the
width property of the element (or a parent element). Although you can use any CSS measure-
ment unit, width of text blocks (like paragraphs) is usually best handled by the em unit, which
is based on the size of the font in use.
p { width: 45em; }
A general rule of thumb is that lines should be 45-75 characters long for optimal readabil-
ity. Lines that are either too long or too short can become difficult to read. We can approximate
that the average character is about two-thirds of an em long (wider characters are longer, thin
ones are shorter). Based on this, somewhere between 30 and 50 ems can be seen as an ideal
line length. However, this is just a rule of thumb, and your mileage may vary.
The CSS properties min-width and max-width are extremely helpful for line length, especially
in liquid (or fluid) layouts that scale when the browser window is resized and in cases where
widths of some elements are set in pixels. Consider a div element that is 75 percent wide—
taking up three-fourths of the browser window. If the browser window is very large, the line
lengths of paragraphs within this div will become very long, severely limiting readability.
Using min-width and max-width , you can set the line lengths to be flexible but have constraints
so they never become too long or too short.
div#content {
width: 75%;
div#content p {
min-width: 30em;
max-width: 50em;
Similarly, you may have a div with a larger pixel width, but not want text within to stretch
that entire width (the result is shown in Figure 9-21):
Search WWH ::

Custom Search