Saturday, August 16, 2003

Text style sampler
Instructions by Jay Small of Small Initiatives

Use this page to try different combinations of typefaces, text line height, paragraph indents and widths, and see the results (and the Cascading Style Sheet properties that made them) in the blocks of text below. Try this in different browsers and observe the subtle differences.

Here are the variables:

Font: Choose from four commonly installed, screen-friendly fonts: Times New Roman, default on many browsers; Verdana, a popular sans-serif choice; Arial, another popular sans-serif face; and Georgia, a serif face that is screen- and printer-friendly.

Line height: The default setting is 1 em. In printing, this setting would be known as "set solid." The line height is identical to the height of the letters themselves. But Web browsers fudge this a bit when they render text -- in fact, if your font size and line height are both left to defaults, there will be at least a pixel of space between lines of text. You may wish to add more space, especially on text set very wide.

Paragraph indents: By default, stacks of paragraphs in Web browsers do not have first-line indents; instead, the first line of each paragraph is flush-left but you see a full line of space between paragraphs. Most printed text is set with paragraph indents, however, and if you want them they are easy to create. The samples with indents have a half line (0.5 em) of space between paragraphs.

Set base font size

Then, select a base font size. The default size (1 em, or what would be applied if you used no style sheets at all) is typically rendered at 16 pixels.…
http://smallinitiatives.com/whatwevedone/presentations/textsampler/

No comments: