New Perspectives On Web Design

(C. Jardin) #1

CHAPTER 9 The Next Steps for Web Typography


Correctly spaced letters and words should be invisible to a non-trained eye,
so if the average reader can spot the gaps between letters, you probably
went too far.

hyphenation and Justification
To equalize individual line lengths, paragraphs can be set justified. To
prevent gaps between words in a justified setting, the text should be
hyphenated. Basic hyphenation and justification is possible in all modern
browsers:

p {
text-align: justify;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

Unfortunately, this is not enough and the result is far from acceptable.
Apart from hyphenation, the line rhythm in a justified paragraph should
be preserved with a combination of variable word spacing, letter spacing
and character widths. We can get away without using variable character
widths, but variable spacing is a must for a properly justified paragraph.
This is yet another example where min- and max- properties could come
into play, for instance:

p {
text-align: justify;
min-word-spacing: -0.05em;
max-word-spacing: 0.1em;
min-letter-spacing: -0.01em;
max-letter-spacing: 0.02em;
}
/* A concept code */
Free download pdf