This page is a Small Initiatives demonstration, prototype, design specification, archived work product or other conceptual document. Feel free to study and use it; however, please note that prototypes and concepts are not necessarily fully functional.

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.

Font	Line height	Paragraph indents	Select
Times New Roman*	1 em*	No*	Select
	1.3 ems	No*	Select
	1 em*	Yes	Select
	1.3 ems	Yes	Select
Verdana	1 em*	No*	Select
	1.3 ems	No*	Select
	1 em*	Yes	Select
	1.3 ems	Yes	Select
Arial	1 em*	No*	Select
	1.3 ems	No*	Select
	1 em*	Yes	Select
	1.3 ems	Yes	Select
Georgia	1 em*	No*	Select
	1.3 ems	No*	Select
	1 em*	Yes	Select
	1.3 ems	Yes	Select
* denotes default settings for most browsers

Select text style

First, select a text style combination from the table at right. 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.

0.7 em 0.8 em 0.9 em 1 em 1.1 em 1.2 em 1.3 em

Currently selected CSS properties for sample paragraphs

All your current selections are defaults, so no CSS properties are needed.

Adjust browser window to try different widths

The pixel ruler below will show you the width of the text as you wiggle the browser window. Once you find a text combination that looks and feels readable to you, copy the CSS properties and tweak them for your own designs!

Here's a large headline to lead this sample

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.

A mid-size headline between paragraphs

Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

• Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
• Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.
• Lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.

Omnicos directe al desirabilitá de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles.

Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.

1. Li Europan lingues es membres del sam familie. Lor separat existentie es un myth.
2. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium.
3. Lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules.

Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.