Typographic Literacy: Part Two
Typographic literacy is on the decline, and subsequently a whole host of errors are now accepted as ‘the norm’. Below is an exploration of some of the biggest typographic faux pas, and the ways each should be corrected.
Double Spacing

This convention harks back to the days of monospaced typewriters where it was common practice to insert a double space to distinguish the beginning of a sentence from the surrounding single word spaces. When using proportional fonts this really isn’t necessary, and is, to be brutally honest, just plain ugly.
‘Dumb’ Quotes

Typewriters are also responsible for the introduction of ‘straight quotes’, non-specific quote marks designed as a space-saving measure for the keyboard, avoiding the need for separate opening and closing quote marks. Straight quotes are commonly used in place of proper quotation marks or ‘curly quotes’. Many designers will tell you that straight quotes are used to represent feet and inches, but in reality, feet and inches should be represented using primes. Straight quotes are obsolete and should not
be used.
Incorrect Hyphenation and Sentence Breaks

Hyphens are the most commonly used method of splitting sentences and indicating ranges of values. However, hyphens should only be used to split words across lines or to connect compound words (e.g. double-barreled). To indicate a break in thought in a sentence, an em dash with hairline spaces should be used (an en dash with a space before and after is also acceptable, but should be kerned appropriately).
Horizontal and Vertical Scaling

Well-designed typefaces have varying degrees of contrast between horizontal and vertical strokes. For example, in most sans-serif typefaces the vertical strokes are optically thicker than horizontals in order for them to look the same width. Distorting type through scaling upsets the balance of a typeface. With vertical scaling the vertical strokes can become too thick, disrupting the left-to-right flow of a piece of type, and smooth curves can appear to ‘peak’ in certain areas. With extreme horizontal scaling the horizontal strokes become thinner than the verticals. If it is really necessary to distort type, it should be no more than 1-2% wider before it becomes obviously noticeable. It is best practice to use a typeface family with the appropriate widths for your needs – many now have multiple widths ranging from Ultra Compressed to Extended.
Auto-Styling

Many design and layout applications permit ‘faked’ bold, italic and small caps. The apps use mathematical algorithms to stroke, slant and scale individual characters. Adding a stroke to make a bold weight loses some of the details that aid legibility, and simply skewing the typeface affects the overall weight and can cause some strokes to virtually disappear. Fake small caps are achieved by forcing lowercase characters to uppercase and scaling them down, making them feel narrower and lighter than the original lowercase. Commercial typefaces are designed with multiple weights, italics and variants, each with carefully considered optical corrections and custom-designed glyphs. For example, bold weights have greater contrast between horizontal and vertical strokes, italics generally utilize a single-storey lowercase ‘a’, and small caps have been width- and weight-corrected for optical balance. Again, the best solution is to choose a type family with the appropriate variants for your needs. Please, steer clear of auto-styling.
Widows, Orphans and Rivers

“An orphan has no past, a widow has no future.” An orphan is a single word line at the end of a paragraph. A widow is a single line of text at the top of a column. Both result in excessive white space which interrupts the balance of a set piece of text. A river is a line of white space that appears to run through a paragraph of text. Creative kerning and letter-spacing, or rewriting the text is the only effective solution to these issues.
Poor Kerning

Typefaces are generally spaced for text usage (small) and not for display purposes (large). Manual kerning is required to make display type look evenly spaced, a practice which is non-existent outside the design community, and one which many designers tend to overlook. It is also worth noting that the majority of typefaces are designed with tabular figures – numbers which sit within an equal space so they line up perfectly in tables. For text and display purposes, this needs a lot of manual correction. Some typefaces have sets of lining and old-style figures, but again these tend to be spaced for text use, unless there are size-specific variants.
2010
2:55 PM
Thanks for the post Joe, some great guidelines here.
I would be interested in your thoughts on writing for the Web.
I was a little surprised how dense the text was on these typography blogs- particularly the first one. I’m sure you are familiar with “F Pattern” reading (http://www.useit.com/alertbox/reading_pattern.html) so I’m curious what your thinking is on typography for the Web.
Do you have any theories or suggestions on how to make web content “scan friendly”? Or do you feel that the “scan” trend in Web typography is misguided or has gone too far?
Look forward to your response.
2010
2:15 PM
Thanks for your response, Jeb. I’ve certainly heard of the F-pattern before but hadn’t seen those heatmap examples. Thanks for the link!
Scanning ability I feel is very important on the web, and more often than not is something that is either overlooked or badly executed. I think (aesthetically) good web typography depends on several things…
Font selection and size plays a big part in the overall ‘color’ of a block of text. For instance, Arial is more tightly tracked than Verdana, which tends to be much easier to read at small sizes on screen, the looser tracking prevents it from feeling so ‘heavy’. Georgia is the obvious choice when using a serif font. Lucida Sans/Grande is very readable but often overlooked for web text, despite being available on over 98% of computers (including Mac, Windows and Linux). In print there is a seemingly infinite choice of typefaces, each with their own unique purpose. Unfortunately, the options on screen are limited to a select few.
Leading and paragraph spacing are also very important. I’ve seen so many websites use 11px Arial with 14px leading, which produces a very dark block of text. There is almost no separation between lines of text and the eye can get lost during left-to-right scanning. A default paragraph break tends to insert too much space between paragraphs, causing an interruption to the flow of the text.
I find the biggest obstacle to easy scanning of text is column width. Our blog uses a 435px wide main text column, narrow enough to minimize left-to-right eye movement. With a wide column (and especially with tight leading) the eye can get lost and skip lines, particularly when moving from the end of one line to the start of the next. Newspapers do this really well, often limiting the word count on each line to 7 or 8 words. Obviously this doesn’t work online without having a huge scrolling page, so some middle ground has to be found here.
Of course, nothing trumps well-written content!
2010
6:47 AM
[...] Via Typographic literacy [...]
2010
4:03 PM
[...] Via Typographic literacy [...]
2010
3:28 PM
fantastic article!!
2010
9:02 PM
[...] Via Typographic literacy [...]
2010
10:20 AM
[...] Via Typographic literacy [...]