Spacing between characters in a text in HTML




What is it all about?

HTML has a standard width on the space between characters, based on the font size. This is usually the width you want to use, but there may be instances where you want a specific width of the text, without having to change the font size. This can be done by changing the distance between the words or the characters. Doing one or the other depends on the text and the desired effect, e.g. a line containing only one word has to be stretched by changing the distance between the characters.

The distance between characters is controlled by the variable letter-spacing on the attribute STYLE, and can have tue following values:

ValueDescription
normalNormal distance between characters (default).
lengthFixed distance between characters, specified in px, pt, cm, etc. Negative values are allowed.
initialSetting the value to default.
inheritInherit the value from the parent element.





How does it look?

Let's look at a couple of examples. This is a few lines from Kenneth Grahame's The Wind in the Willows in a DIV tag for demonstration:

The text in the original version
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="letter-spacing:5px"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="letter-spacing:-0.05cm"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.