Some may think that keeping ones typographic soul free from sin can only be accomplished in printed work. But what about the web? Can all sins be avoided? Here are a few tips on how to use HTML and CSS to keep your typographic soul clean, even on the web. This is part 3 of a 3 part series.
24 – Strokes that encroach upon letterforms.
If you are adding a stroke to a letterform, you are probably saving it as a .jpg or .png. Just make sure the software you are using (Adobe Illustrator for instance) stacks the stroke behind the fill (see figure 1 below). In Illustrator, the default is that half the stroke goes inside the letterform and half to the outside, which seriously impedes readability. Change it to put the stroke around the outside of the letterform. In Chrome and Safari, you can use the attribute “text-stroke-width” but please don’t. It puts the stroke on the inside of the letterform.
25 – Horizontally scaled type.
Unrepentant:
Penitent:
26 – Vertically scaled type.
Purgatory:
Heaven:
Again, you can’t distort type on the web, unless you’re creating a graphic in Illustrator or Photoshop. Instead of squishing type, choose a typeface that is condensed or extended.
27 – Negative letterspacing.
Not very readable.
28 – Bad line breaks in headlines and body text.
If you don’t break lines for
sense, they can be harder to read.
29 – Stacking lowercase letters.
It is hard to read. Rotate the text to put it on its side. This aids readability
30 – Failing to indent bulleted lists.
- Bulleted lists look better when the second line aligns flush
with the first letter of the line above it, instead of with the bullet.
Thankfully, the web automatically takes care of this when using an unordered list <ul>. The bullet hangs into the margin with the text usually indented about 30 or 40 pixels. Notice that the second line of text aligns with the text above it and not with the left side of the bullet.
31 – Failing to use accent marks.
Sinner: No esta aqui | Saint: No está aquí.
There are html character codes for a variety of letters, including those with accents and those from other languages:
À = À
Á = Á
 = Â
à = Ã
Ä = Ä
Å = Å
Æ = Æ
Ç = Ç
È = È
É = É
Ê = Ê
Ë = Ë
Ì = Ì
Í = Í
Î = Î
Ï = Ï
Ð = Ð
Ñ = Ñ
Ò = Ò
Ó = Ó
Ô = Ô
Õ = Õ
Ö = Ö
Ø = Ø
Ù = Ù
Ú = Ú
Û = Û
Ü = Ü
Ý = Ý
Þ = Þ
ß = ß
à = à
á = á
â = â
ã = ã
ä S= ä
å = å
æ = æ
ç = ç
è = è
é = é
ê = ê
ë = ë
ì = ì
í = í
î = î
ï = ï
ð = ð
ñ = ñ
ò = ò
ó = ó
ô = ô
õ = õ
ö = ö
ø = ø
ù = ù
ú = ú
û = û
ü = ü
ý = ý
þ = þ
ÿ = ÿ
32 – Failing to align baselines of type in adjacent columns of body text.
Baselines of all columns of text on a page should align. This creates a pleasing margin of pure white space.
How can we do this on the web? Here is a great web site that can help: baselinecss.com
33 – Failing to correct bad rags.
For centered or non-justified text, avoid obvious shapes (like pyramids,
steps, wedges, angles and overly short or long lines).
Avoid wedges:
Or is it really
Garamond?
Helvetica?
Avoid pyramids:
Or is it really
Garamond?
Helvetica?
Avoid overly short or long lines:
most readable typeface in the world is Century Schoolbook,
designed by Morris Fuller Benton. Or is it really Garamond?
Helvetica?
This one looks pretty good:
in the world is Century Schoolbook,
designed by Morris Fuller Benton.
Or is it really Garamond? Helvetica?
34 – Failing to use ligatures.
unholy:
holy:
Ligatures are two or more characters that are designed together as a unit. They are aesthetically more pleasing and make body text easier to read by eliminating parts of letterforms that encroach upon each other and create distracting anomalies.
Posted in Uncategorized | No Comments »
