The Five Worst Web Type Crimes

7

Type crimes don’t only exist in print. You’ll find them on the web and other digital media as well. Any public media that contains type should be adhering to professional standards of good typography. Unfortunately, this is not always the case, particularly on the web. In fact, type crimes are a lot more prevalent on the web, and in any scenario where an experienced graphic designer is not part of the process when posting text. Let’s take a look at five things you should make every attempt to avoid.

Double word spaces

Double spaces between sentences are a well-known type crime in print, but they also appear on the web. The reason for this is many people who write copy, whether they be professional writers, bloggers, business owners and such, are not knowledgeable of proper typesetting practices, as opposed to just ‘typing’. Without a proofreader knowledgeable in typographic practices, major errors such as this go unnoticed and frequently go from the writer to web master to upload, with no one in-between.

Any copy intended for publishing should be proofread for this common and extremely unprofessional type crime. If there is no one in-the-know looking over the copy, as is frequently the case for personal blogs and other WordPress sites, it needs to be checked for this error. The easiest way is to search for two word spaces and replace with one. Then check the copy over carefully to make sure that something else wasn’t deleted by this action that needs to be there. (Read more about double word spaces here.)

Two word spaces between sentences make for visual interruptions that disturb the overall ‘color’ of the type, and also reduce readability.

Hyphens and dashes

Hyphens and dashes appear with great regularity in all kinds of text. The problem arises when hyphens (or more commonly, two hyphens) are used instead of dashes, a substitution that is considered a major type crime.

Before typing or applying the proper punctuation, one must understand the difference between hyphens and dashes (which can be explained in detail in this article). Once text is properly punctuated, the next task is to understand how to apply this “smart” punctuation to the web and other digital media. Hyphens are not an issue, but on the web, dashes must frequently be coded in order to appear correctly. This is not as complicated as it seems: it frequently just requires a search and replace, inserting the proper code, which can easily be found on the web. If there is a web programmer or web master, this should be pointed out to them and they will do it. But if not, anyone in the process can do this, including the designer, writer, or even you if it is for your own blog. Codes for specific punctuation can easily be found on the web.

It should be noted that some content management systems (CMS), including WordPress, might render the dashes properly if they are in the actual copy. But this automatic insertion needs to be investigated on a case-by-case basis in order to have them appear correctly. In addition, keep in mind that some email marketing services do not support this “smart” punctuation – even if coded in ­– so note this accordingly.

These three punctuation marks vary primarily by width.

Never use two hyphens in place of a dash, a practice from the days of typewriters when dashes weren’t available on the keyboard (top). When using any dash on the web, it is best to add a space before and after to allow for more line break options (bottom two). If you don’t, it can result in overly deep rags (second from top).

Quotation marks and primes

In professional typesetting, quotation marks and primes – which are commonly referred to as inch and foot marks – are entirely different glyphs. But unfortunately, most copywriters, business owners, and others are not aware of this. Once again, if one doesn’t’ “type” them in correctly and there is no one to do a typographic proofreading of the copy in order to call out these marks, they frequently appear incorrectly on the web and other digital media, such as movie titles, motion graphics, and the like.

True quotation marks are design sensitive, that is, are different for the open, left designs and the right, closed ones. On the other hand, primes, which are frequently referred to as typewriter quotes, are straight or sometimes slightly angled marks, both of which are not design sensitive. (Read more on these glyphs here.) The problem arises in digital media because even if the quotes appear correctly in the submitted or uploaded text, they will not necessarily appear that way in digital copy. Unless you are using WordPress or a CMS that is set to automatically convert these for you, they will need to be coded into the copy before inserted and upload it into the appropriate medium. I have done this numerous times, and considerate it the responsibility of the person uploading the text. It’s really not that difficult, usually requiring a “search and replace” with the proper code.

As mentioned earlier, problems can arise with certain CMSs as well as email marketing systems which might or might not allow for smart quotes or other specific smart punctuation, even if you code them. Therefore, be aware of the capabilities of the medium you are uploading to, and deliver or upload the copy accordingly.

The differences between smart, typographer’s quotes, and both typewriter quotes and true primes – both used for measurements – can be seen above.

The top example shows the incorrect use of dumb, typewriter quotes, as well as smart, typographer’s quotes. The two examples below it are considered correct.

Hard line breaks and inter-line hyphenation

There currently is no automatic hyphenation on the web. In addition, one cannot manually control rags and line endings, as type size and style can look different for everyone, depending on platform, device, resolution, as well as the readers’ personal settings. This is important to know because some people who are not aware of this try to correct what they see on their screen with hard line breaks and manual hyphenations. This should be avoided at all costs because it usually results in very deep rags as well as interline hyphenations for some viewers, both results of which are extremely unattractive and unprofessional to boot.

When a deep rag appears on your screen when inserting text, do not try to fix it with a manual hyphen (upper two), or it will most likely appear mid-line for some viewers (lower).

Poor Justification

Many people find justified text attractive, and/or desirable when used for a specific layout or design. But the problem on the web as well as some other digital media is that you cannot control the line endings, and therefore have no idea how the justified text will look for each viewer. If the column width is too narrow and the words are too long, justification can frequently result in text with very large or very tight word or letter spaces, all of which are extremely unattractive, and can render the text much less readable.

My advice in general for the web as well as for other digital media that cannot be specifically controlled is to avoid justification entirely and go with flush left or other non-justified settings. This will ensure your text is easy to read for all readers on any device, with appropriate word and letter spacing. (Read more about this topic here.)

Poor justification (upper) can lead to very open spaces, which are a typographic eyesore and reduce readability. Flush left text (lower) allows for a more natural look, which is also easier to read.

Ilene Strizver is a noted typographic educator, author, designer and founder of The Type Studio in Westport, Connecticut. Her book, Type Rules! The designer’s guide to professional typography, is now in its 4th edition.
  • Jim Jordan says:

    The first crime seems completely imagined. HTML only displays one space, even if there are 3000 consecutive spaces in the source HTML. The way to render more than one space after the end of a sentence is to manually include the non-breaking space HTML entity. That would be a lot of extra effort to commit this crime.

    Are there real examples of “this common and extremely unprofessional type crime”? Is there a browser-based WYSIWYG editor or application that allows the type-ignorant to commit this crime?

    • Jim, double word spaces between sentences do appear in WordPress as well as some email marketing clients. This site as well as my own web site do display this type crime (I tested both), as well as many blogs and web sites built with WP, and perhaps other CMSs as well as some email marketing clients, which is why they frequently appear on the web and other digital media. Ilene

      • Jim Jordan says:

        The issue of consecutive spaces appears to be the fault of TinyMCE, the WYSIWYG component used by WordPress and other apps. It would be easier to petition the handful of TinyMCE developers than to try to steer the millions of WordPress (and other CMS) users to practice better typography. WordPress admins/developers can include an optional function to prevent their less-mindful authors from using consecutive spaces. https://blog.room34.com/archives/5075

  • Scott Comerford says:

    Speaking of proofreading: “…might render the dash is properly…” and “… can arise with certain CMSs is as well as…”
    There may be others, but these were the two that stood out to me.

  • melinda rene says:

    You forgot to mention one of the biggest mistakes—the length of the line! Both in print and on screen the line length shouldn’t exceed approximately 30 ems—allowing for easier reading of text.

  • Steve Leeper says:

    Thanks Ilene. I’ve been fighting against these “crimes” for over 40 yrs now. I’m almost ready to give up. I see the use of primes where proper quotations should be used EVERYWHERE! Also the other “crimes” you mentioned. And noted in the above comments the use of overly long line lengths. These were all things I learned to avoid in Type 101 many yrs ago. People tell me to not “sweat the small stuff.” I guess I’m hopeless. BTW: no choice but to use primes in these comments … :-(

  • Dawn says:

    For those who think we ‘more seasoned’ (or old) designers should not “sweat the small stuff,” my usual response is there is a fine line between good design and great design. I see good design a lot. With training as a professional designer, however, I see little great design because of these crimes and more. “Just get it done” has replaced the idea of making great design. Thanks for the article and reminder so that my old designing derrière doesn’t get sucked into ‘good’ design execution.

  • >