[an error occurred while processing this directive]

fun with fonts

jessey.net | Simon | articles | previous article | next article

Cascading Style Sheets provides a mechanism for doing very fancy effects with fonts. When used in association with positioning rules it is possible to create designs that previously could only have been accomplished with images.

The fun with fonts heading at the top of this document is a classic example of what can be achieved and you will pleased to learn it is very simple. I started by writing the heading as a normal h1 heading. Then I substituted the spaces for non-breaking spaces. Next, I gave each individual word a span element and assigned a separate class attribute for each one. Finally, I applied style rules to each class. Here are the rules for the word fonts:

span.fonts { font-family: 'Comic Sans MS', sans-serif; font-size: 5em; background: transparent none; color: blue; position: relative; left: -1.0em; top: -0.4em; }

Of crucial importance here is the style rule position: relative, because it allows me to shift the elements around. left: -1.0em moves the word 1em to the left of where it would normally be.

stacking text

As you can see, stacking text on to each other is easy. The stacking order is decided by the order in which the text appears in the markup. That stacking order can be altered using the z-index property. By applying a lower z-index value to the word text, I can ensure it appears below the word stacking:

stacking text

You have to be a little careful with relative positioning because the element being moved it shifted with respect to its containing block. If the element moves to far in any direction, the browser will be forced to compensate with a horizontal scrollbar. It is important to take into account the fact that the user may specify a large font size, either within a user style sheet or with a browser tool.

information resource

There are many other font effects and you can find their specifications in the Fonts section of the World Wide Web Consortium's CSS Level 2 specifications. Thank you for reading.

XHTML 1.1 icon, indicating validated XHTML 1.1 CSS icon, indicating validated CSS

© Simon Jessey, 2002