Typographic Sins on the Web (part 3)
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.
You can also use CSS, at least in Chrome and Safari, to create outlines by using 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, it is difficult to distort type on the web using CSS, 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.
In CSS, the attribute for letterspacing is letter-spacing. In the text above, it has been set to -1 em. For the text you are reading right now, I’ve left it at the default: zero.
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.
Not commonly done on the web, but when it is, it’s 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 text is indented about 2 ems from the lefthand margin. 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. How do you access them on the web? Use the following CSS attribute and value: font-variant-ligatures: common-ligatures;
For more information visit this site, which also contains a bit of information on kerning for the web.
Go to Typographic Sins on the web (1 of 3)
Go to Typographic Sins on the web (2 of 3)
[…] G o to Typographic Sins on the Web (part 2 of 3) Go to Typographic Sins on the Web (part 3 of 3) […]
[…] Go to Typographic Sins on the web (1 of 3) Go to Typographic Sins on the web (3 of 3) […]
Jim,
the second article in this series has a broken URL. This third article has some missing graphics. I would love to read both and learn more. I passed your first article onto some of my staff in hopes of helping them become better admins and staff. Thanks for all three articles. Much appreciated.
Emil, thanks for letting me know about the broken links. They should be fixed now. When I log on, I don’t see any broken links to the graphics. But let me know if any specific ones you see missing and I will double check. I am glad you are sharing the article. Best,
Jim