If you want to experiment with different measure, leading and font combinations, download and extract these index and style files:

index.html and style.css (Zipped)

How it works

Once you’ve extracted the two files into a directory on your computer, insert some text within the p tags in the index.html file and add classes to try different typographical settings. The classes are:

• lx: line height with the value x (12-30px)
• mx: paragraph width with the value x (360, 420, 480, 540, 600 or 630px)
• your choice of font (georgia, helvetica, lucida, trebuchet, verdana, times)
• fx: font size (12-30px)
• cx: font colour (#000, #333, #444, #666 or #888)

Example

<p class="helvetica f12 l16 m360 c444">Some text or other.</p>

will render the text in 12px helvetica/arial with a paragraph width of 360px, a line height of 16px and a colour of #444.

Background

Leading and measure are delicate things. In the bad old days before CSS, designers didn’t even think about such typographical obscurities; they just put text on the page, leaving the browser to sort things out. When CSS became popular, a few rules began to surface.

Now, web designers balance many different factors when setting their text for easy reading, and more refined sets of rules have been formulated. There’s an element of trial and error in trying to find the best combination of leading, measure and font size: using these two files is quick and easy.