Typographic Sins on the Web
Part 1 of 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 1 of a 3 part series.
1 – Two spaces between sentences.
This one’s easy, because html helps us out: it only allows one space between characters unless you want to hard code a space using in your html code.
2 – Dumb quotes instead of smart quotes.
To create smart quotes, you just need two snippets of code for your html:
Lefthand quote ( “ ) = “
Righthand quote ( ” ) = ”
Looking for more character codes? (They’re actually called HTML Symbol Entities.)
3 – Dumb apostrophe instead of a smart apostrophe.
A smart apostrophe ( ’ ) = ’
4 – Failing to tuck periods/commas inside quotes marks.
Easy to do on the web. Just type the comma or period before the code for the quote.
5 – Failing to kern display type.
You can kern type using a variety of web tools. Here are a couple to try: kernjs.com and letteringjs.com
6 – Using a hyphen instead of an en dash.
Use an en dash to indicate a duration of time instead of the word “to”: the 8–10 commandments, not 8-10 commandments.
What’s the code for an en dash? –
7 – Using two hyphens instead of an em dash.
An em dash signifies a change in thought—or a parenthetical phrase—within a sentence.
The code for an em dash is —
8 – Too many consecutive hyphens.
It is sinful to have more than two hyphens on consecutive lines of type, and even that should be avoided.
This is one that a designer does not really need to worry about on the web, since browsers don’t hyphenate words.
9 – Large amounts of bodytext in uppercase letters.
IT BECOMES REALLY DIFFICULT TO READ.
Again an easy one to do on the web: don’t type in uppercase. By the way, if you’re using CSS, an easy way to adjust text to all caps or lowercase is using the attribute “text-transform” with one of the following values: uppercase, lowercase.
text-transform: uppercase;
You can also use the value “capitalize” which creates a capital letter after each period.
10 – Large amounts of reversed type ARE HARDER TO READ.
Type on a busy background is also unreadable.
Make sure the attribute “background-color” for your containers or for your <body> tag is defined with a value that contrasts well with the color/value of the text.
11 – Using process colors for body text.
It is harder to read, but more importantly, it is hell to register on press.
No need to worry about this one for the web as far as registration goes, of course. But keep in mind that reading color text on a screen can be tiring to the eyes, so use color for emphasis and headings, and think before using it for body text.
G o to Typographic Sins on the Web (part 2 of 3)
Go to Typographic Sins on the Web (part 3 of 3)
