Advanced typography - wordspacing, letterspacing and textalign!

So now you've got the basics of typography down, let's have a look at how you style the text for your liking. Typography is a very big part of your entire website's look and therefore it is nice to know how you get the text to behave just the way you like it.

Text-align - a neat feature

In the western world, we are so used to left-aligned text, that text-align is a property we hardly notice - except for one place, when we are reading an old fashioned paper, where the text are justified in order to make the columns of the paper appear more 'clear'.

Let's have a look at the four options; right, left, center or justify;

<style>
p {text-align: right;}
</style>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<br />
For scent was a brother of breath. Together with breath it entered human beings, who couldn't defend themselves against it, not if they wanted to live. And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

As you can see, this looks quite odd when using the Latin alphabet but if you were to use the Arabic alphabet this would be the kind of text flow that you were used to.

The 'center' value should be used with cause - most people find it harder to read centered text (as they are not used to it), but under some circumstances, such as with e.g. headings, the 'center' value might be a good choice;

<style>
h3 {text-align: center;}
</style>

<h3>Breaking news - I'm centered!</h3>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.</p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. He who ruled scent ruled the hearts of men.</p>

The last value we'll have a look at is the 'justify' option. If you choose to use this, you should be aware that the space between both each letter and the words may be stretched or squeezed and make the entire text seem 'off'. Therefore you should reconsider your use if you choose to use justify with a text with very long words, short paragraphs, or extremely short sentences - but let's have a look at how the justify works; (the paragraphs of this example is a bit too short for my liking when it comes to justified text, but it is a matter of taste.)

<style>
p {text-align: justify;}
</style>

<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.</p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Word-spacing - perfect for headings

Word-spacing is one of those features that should only be used for headings, block quotes, or other non body text as it can have a nice visual effect but decreases the readability. CSS treats every character or set of characters with a space around them as a 'word'. The measurement unit for word-spacing is em - as 1 em is the height of the letter x, then a word-spacing of 1.5em equals 1.5 x'es. The following example illustrates how word spacing might be a good choice for headlines and seldom are used for body text;

<style>
h2 {word-spacing: 1.2em;}
.tooMuch { word-spacing: 1.2em;}
</style>

<h2>Proper use of word-spacing</h2>
<p class="tooMuch">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>

Letter spacing - also perfect for headings

You use the letter-spacing property to control the amount of space between the letters. You can even use negative values in order to get the letters to stand even closer. But the question is - should you? Just like with word-spacing I recommend only using this feature for headings, block quotes, maybe menu items, and so forth, but never ever body text. Take a look at how the letter-spacing property works;

<style>
h2 {letter-spacing: 0.25em;}
.tooMuch { letter-spacing: 0.5em;}
</style>
<h2>Proper use of letter-spacing</h2>
<p class="tooMuch">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

Text-transform

As the name says, text-transform transforms your letters - they can be transformed to uppercase, lowercase, or capitalize. The syntax is straight forward:

p {text-transform: uppercase;}

This is what the three values look like - I have used an inline stylesheet in order to style the text:

<p style="text-transform: uppercase;">An example of uppercase text.</p>
<p style="text-transform: lowercase;">An example of lowercase text.</p>
<p style="text-transform: capitalize;">An example of capitalized text.</p>

An example of some simple typograpgy

Up until now we have looked individually at some of the effects, you can achieve with the tools of the typographic tools-box, but how can you combine the text-align, word-spacing and all the other neat effects without creating a big mess? In order to give you some inspiration I have assembled an example - it is a nice mix of text-transform and letter-spacing combined with some padding and borders. Have a look at the example;

<style>
h2 {
	font-size: 1.7em;
	text-transform:uppercase;
	}
p:first-line {
	text-transform:uppercase;
	}
.introduction {
	letter-spacing: 0.25em;
	text-transform:uppercase;
	border-bottom: 1px solid white;
	border-top: 1px solid white;
	padding-bottom: 1em;
	padding-top: 1em;
	}
</style>

<h2>The Perfume - An excerpt</h2>
<p class="introduction">For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. But they couldn't escape scent.<p>
<p>And scent entered into their very core, went directly to their hearts, and decided for good and all between affection and contempt, disgust and lust, love and hate. <br />He who ruled scent ruled the hearts of men.</p>

As you can see, letter-spacing and text-transform is used to highlight specific parts of your text and hereby making it easier for your users to skim your text in order to get an overview of your text. And this is how all of these features should be used - to make the text easier for your reader to understand!

What you have learned

• You can align your text in four different ways; right, left, center or justify.
• Whenever you choose to use either center or justify you should be aware that it decrease the readability of your text for some users.
• Word spacing should normally only be used for headlines - using it on body text may decrease the readability of your text.
• The same applies for letter-spacing - use these two with care!
• All of these effects should be used with one purpose in mind - to make the text easier for your readers to understand!