CSS: 5 tips for a better typography

CSS typography has always been misused or misunderstood in some way. It's not about text properties or accessibility only, but also about design and beauty. It's time to try to get back the pure visual effects of a good typography. So here are five simple tips for a better CSS typography.

Use letter-spacing

You can use the letter-spacing property both to increase the legibility of your headings and to properly justify text. Examples:

Headings

h2 {
	font: normal 1.5em Georgia, serif;
	letter-spacing: 0.1em;
}

Text justification

p {
	text-align: justify;
	letter-spacing: 0.1em;
}

Using a value expressed in em augments scalability and flexibility.

Use web fonts

You can either choose to use Google Web Fonts or a font embedded with @font-face. If the latter is the case, then you should read the following article.

Use negative text indentation

The text-indent property indents the very first line of a block. You can use it with a negative value on headings to create the effect of hanging text:

h2 {
	font: normal 1.5em Georgia, serif;
	letter-spacing: 0.1em;
	text-indent: -1em;
}

Use text shadows

The CSS3 text-shadow property accepts four values: three offset points (top, right, bottom) and a color value. You can use this property to create shadows on text:

h2 {
	font: normal 1.5em Georgia, serif;
	letter-spacing: 0.1em;
	text-indent: -1em;
	text-shadow: 3px 3px 3px rgba(240, 240, 240, 0.7);
}

Use rotations

You can use the CSS3 transform property to create special effects on text. Now this property is available through vendor prefixes, but you can use it to create the effect of vertical text:

h2 {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	transform: rotate(-90deg);
}

Rotating the heading's box by minus 90 degrees makes the text appear vertically.