This page highlights some font tricks which I've tried out using CSS (CSS found here, put to effect in my weblog). They are based on the same technique one may use to generate text shadows in CSS, but I think they look a LOT more funky. The title (it is actually 5 title divs) for this page shows off the first variant of this technique , the CSS code is as follows:

.title1 { text-align: center;
	color: black;
	margin-top: 0px;
	margin-left: 0px;
	font: 900 75px Impact, Arial, helvetica, sans-serif }

.title2 { text-align: center;
	color: black;
	margin-top: -99px;
	margin-left: -11px;
	font: 900 75px Impact, Arial, helvetica, sans-serif }

.title3 { text-align: center;
	color: red;
	margin-top: -87px;
	margin-left: 0px;
	font: 900 72px Impact, Arial, helvetica, sans-serif }

.title4 { text-align: center;
	color: white;
	margin-top: -88px;
	margin-left: -12px;
	font: 900 70px Impact, Arial, helvetica, sans-serif }

.title5 { text-align: center;
	color: yellow;
	margin-top: -82px;
	margin-left: -6px;
	font: 900 72px Impact, Arial, helvetica, sans-serif }

The HTML then simply contains 5 divs with the classes above, and the same text repeated in each. The basic tricks here are:

• Negative margin-top and margin-left values, this overlaps the text on top of each other. By altering these values, one can get very different stylistic effects. In the case above, the text is roughly overlapping, but 'jittered' to spread each holding div around a bit.
• Different font sizes. This can create very neat effects, whereby the offset of one text from another is different along the length of the text. Notice in the title above how the centre shows less overlap than the edges (the text is centred). This is because the yellow text is a smaller font size than the black text background. To obtain different effects, one can align the text to the left or right and this variable overlap will then 'spread' from where the text is aligned. You can use this to get what I call 'candle shadow', when a light source is close to an object and the shadow offset is different the further the objects are from the light source.

Related to this technique, but this time using different bits of the same source text in each div (in this case three), is the following styling:

This techniques uses the same margin-left / margin-top placing as the first example (in this case the text is left aligned), But now each holding Div contains different chunks of the same text. This can be used to good effect if you wish to highlight specific bits of a sentence. Here is another example of this technique, this time using centered text:

One other small feature is the vertical text link on the left hand side. This is super simple to do, it is just a fixed position holding div in which each letter is separated by a new line. This could be relatively/absolutely positioned to be inside another CSS box. I wish CSS had a proper text-rotate and text-orientation properties to make vertical and angled text more easy... I need to check the CSS3 specs to see if things are better (I assume they are with the addition of the Asian font formatting options etc.)

Problems:
The clearest problem with these kinds of techniques is one of accessibility. If you were to browse this page with speech-based software, each title would repeat, because we have overlaid several versions of text. This I assume would seriously impede navigating this page and would become very confusing. The solution is quite straight-forward however, because CSS allows one to import a stylesheet that would be for aural browsers only. In this stylesheet, one could 'hide' all of the classes that were being used solely for the purpose of 'decoration'. This would result in a 'clean' page for aural browsers, and a 'styled' page for visual browsers. I will implement this as soon as I have time for this page...

Valid XHTML V1.0 Strict | Valid CSS V2.0 | Mail me (linked from my homepage)