home button
Johann Sparkling 96pt

Back to the top

Web-Safe Fonts
css type handling

CSS type handling

Formatting type using CSS is the modern, approved form of type setting in web pages, having replaced the clunky and limited <font> tag some time ago. You don’t have to learn all sorts of esoterica to gain a fair degree of DTP-like control over type, and the results can still be fairly reliable and accessible.

Start by defining the defaults for the the p (paragraph) or the body tag to control all otherwise-unformatted text in the page. This example sets Book Antiqua first, followed by Bookman for Mac, Winows and Linux, then trusty old Georgia, fusty old Times, and finally the ‘serif’ request in case all else fails. In this example the size is set as 0.8em, which is roughly 13px in Macintosh terms (80% of the browser default of 16pt) but allows scaling in all browsers. The leading is set to 1.4ems, a little wider than the default ‘130% of type size’ that most browsers apply when left to their own devices.

The text alignment can be controlled using left, right, center or justify, although the justify setting should only be used where a reasonable number of words - say ten or more - fit on each line. It isn’t possible for browsers to adjust word spacing in smaller increments than single pixels, so narrow measures can look fairly odd when justified.

For inter-paragraph spacing set both the margin-top and margin-bottom values. To get reliable results that make numeric sense, set the margin-top to around a quarter of the total space you want and set margin-bottom to the other three-quarters. For example, to get 0.8em paragraph spacing set margin-top to 0.2em and margin-bottom to 0.6em.

For a first-line text indent use the text-indent property. Set this to 1em to get an indent the same size as the type height. If you’d prefer a text outdent so the first line hangs out to the left of the column measure just use a negative value.

Some header tag styles are also specified, using a more dramatic font family. All other settings are left as-is for the browser to control. Finally, a standard unordered (bulleted) list is defined, using the same slightly reduced size and Century Gothic sans-serif as the preferred typeface.

<style type=”text/css”>

<!--

p {

font-family:”Book Antiqua”,”Bookman Old Style”,”URW Bookman L”,Georgia,Times,”Times New Roman”,serif;
font-size:12px;
line-height:1.4em
text-align:justify;
margin-top:0.2em;
margin-bottom:0.6em;
text-indent:-1em; }

h1,h2 {

font-family:Copperplate, “Copperplate Gothic Bold”, “Gill Sans”, Gadget, “Arial Black”,sans-serif; }

ul {

font-family:"Century Gothic", "URW Gothic L", Futura, Arial, sans-serif;
font-size:0.8em }

-->

</style>