CSS Tutorial - Subtle Touches

Whilst style sheets can be used to make exciting, dynamic things there are some things it does which don’t get used too much - but can add to the experience of your site, and whilst your visitors probably wouldn’t see the difference unless pointed out, it can make a large difference to the experience, especially in a site with lots of text.

Letter-Spacing

Pretty self explanatory, but rarely used - the reason? At a guess i’d say because you wouldn’t guess it was there, because there is no HTML equivalent - most people simply ‘re-make’ their site using css - replacing tags with font-family: commands in the style sheet - nothing new basically. This command tells the browser how much space to put between letters displayed (the tracking ), you just input a length - here are some examples:

In Action

span style=’letter-spacing: 0.5px;’>0.5px spacing
1px spacing
2px spacing
5px spacing
10px spacing

The Code

letter-spacing: 10px;
You can either put this code in an external style sheet, or as i have done above, in a <span> tag - the code for the 5px spaced text is shown below:
<span style=’letter-spacing: 5px;’>5px spacing</span>
The span tag in itself does nothing - so is very useful here!

Word-Spacing

Yep, you can also increase the space in between words - again, this is very rarely used, but very effective, as it makes long bursts of text a lot easier to read, use too much however, and it makes it harder to read - try to strike a nice in between value, here are some examples:

In Acction

The quick brown fox jumps over the lazy dog. - 0px spacing
The quick brown fox jumps over the lazy dog. - 0.5px spacing
The quick brown fox jumps over the lazy dog. - 1px spacing
The quick brown fox jumps over the lazy dog. - 5px spacing
The quick brown fox jumps over the lazy dog. - 10px spacing

The Code

word-spacing: 10px;
You can either put this code in an external style sheet, or as I have done above, in a tag - the code for the 5px spaced text is shown below: The quick brown fox jumps over the lazy dog. - 1px spacing As you know (if you read page one) the span tag on its own does absolutely nothing, and so is immensely useful when applying styles.

This site uses (mostly) 0.4px word spacing, which doesn’t draw attention to itself (as 10px would) but does make it a little bit easier to read - I hope!