JoomlaVision > Web design > Mind Your En And Em Dashes: Typographic Etiquette

Mind Your En And Em Dashes: Typographic Etiquette

An bargain of typographic use separates a master designers from a novices. A well-trained engineer can tell within moments of observation a pattern possibly a creator knows how to work with typography. Typographic sum aren’t customarily inside jokes among designers. They have been built adult from thousands of years of created language, and requesting them binds in place long-established beliefs that capacitate typography to promulgate with potency and beauty.Handling these typographic sum on a Web brings new hurdles and restrictions that need to be considered. Below are a few manners of ride that will have we regulating typography some-more lucidly than ever before.

Setting Body Copy

Good typography comes down to communicating information, and a basement of information is good out-of-date physique copy  –  simple blocks of text. Here are a few ways to make your blocks of calm good and clean.

Indentation or Space After a Paragraph?

When signalling a finish of a divide and a commencement of another, we can generally possibly measure or insert a space between a paragraphs. Doing both is surplus and creates awkward, strange chunks of white space.

indent vs. space after paragraph


Indent a initial line of a new divide about 1 em (if your rise distance is 12px, afterwards that would volume to 12 pixels). Indenting a opening divide of a new territory would be redundant, since that divide would be a initial in that page or territory anyway.

Space after paragraph

A full line mangle of 1 em (like when we strike a “Return” pivotal twice) is generally some-more than adequate to vigilance a new paragraph. About 0.8 ems is sufficient.

flush left vs. fit type

Text set flush left (or ragged-right) creates an even hardness and is easier to read. Because a Web allows for reduction typographic control, fit form customarily creates rivers and vast gaps in blocks of text.

Flush left (ragged-right)

In calm set flush left, a lines will mangle naturally, ensuing in a “ragged” right side of a column. This is generally deliberate easier to review since a eye can improved heed one line from a next, since of a opposite line lengths. Additionally, studies have shown that readers measure aloft in grasp and remember when calm is flush left. Hyphenation should not be used with calm that is flush left, since that would better a whole prove of a husky right.

Avoid fit form on a Web

Justified calm is spaced out so that any line is of a same length. Because all lines have to be set during a same length, some movement in minute spacing (i.e. a space between letters), and word spacing (the space between words) is finished to widen and digest lines. This changes a altogether hardness of a physique copy, creation it reduction even.

High-end desktop edition applications (such as Adobe InDesign) have worldly systems for justifying form so that it doesn’t furnish “rivers” (large gaps in a calm from too many word spacing). They use a multiple of minute spacing, word spacing, hyphenation and glyph scaling (i.e. really somewhat adjusting a breadth of particular letters) to furnish an even hardness in a physique copy.

But there is no hyphenation control in CSS. Beyond JavaScript libraries that hoop hyphenation and CSS3’s text-justify property, browsers don’t have really worldly measures for progressing an even hardness in blocks of text. This creates fit calm on a Web rarely receptive to vast holes and rivers in a physique text.

Avoiding fit form on a Web is generally a good idea. At a optimal line length for reading (about 50 to 80 characters or 8 to 15 words), creation lines of calm all a same length, yet hyphenation or pointed minute spacing, scarcely always formula in rivers.

One Space After a Period. Not Two.

Very few typographic debates compare a power of possibly there should be one or dual spaces after a sentence.

This use is a holdover from typographers of a Victorian era. The use began when typewriters were introduced. Because early typewriters used monospaced fonts (meaning that a spaces between letters were always a same length), typists used dual spaces to impersonate a somewhat wider spaces that typesetters were regulating after periods. Now that computers (and a fonts on them) are versed with proportionally spaced (rather than monospaced) fonts, this use is outdated, and it creates ungainly breaks in a physique text.

One space vs. Two spaces

One space after a duration is copiousness to vigilance a finish of a sentence. It also keeps a calm retard even.

For those who are still skeptical, cruise this: a commencement of a new visualisation is already indicated by a period, a full space and a collateral letter. Adding nonetheless another space merely pokes a hole in a physique calm and interrupts a upsurge of reading.

The receptionist competence wish to continue regulating dual spaces after a period, yet a typographer should not.

Use Dashes Dashingly

Most fonts are versed with during slightest dual dashes: an en lurch (–, ndash;, that is a breadth of a lowercase “n”) and an em lurch (—, mdash;, that is a breadth of a lowercase “m”). Don’t upset these with a hyphen (-), that isn’t a lurch during all yet a punctuation mark.

Dashes: hyphen, en dash, em dash

The Hyphen

Hyphens and dashes are confused to a prove that they are now used roughly interchangeably by some. Some fonts, such as Adobe Garamond Pro, keep hyphens in their strange form; those hyphens demeanour some-more like a erratic cadence of a calligrapher’s coop than a loyal plane line. You’ll also mostly see hyphens used as a deputy for a reduction sign; however, a longer impression is accessible in some fonts for this purpose.

Although a hyphen does demeanour utterly a bit like a lurch or reduction sign, it is a punctuation mark. It should be used essentially to hyphenate difference in fit type. On a Web, this isn’t many of a regard because, as mentioned, there is no customary hyphenation control in browsers. The hyphen should also be used in devalue modifiers (such as “fine-tuned”), to join digits in phone numbers, and in a few other singular cases (covered in fact on Wikipedia).

The En Dash and a Em Dash

In The Elements of Typographic Style – that is a unaccepted bible of a complicated typographer  –  Robert Bringhurst recommends that dashes in calm should be a en lurch flanked by dual spaces. This is many reduction visually disruptive than regulating a em lurch with no space—which is endorsed in editorial impression books such as The Chicago Manual of Style — because there is reduction tragedy between a lurch and a characters on possibly side of it.

Why go opposite The Chicago Manual of Style in this case? The reason is that impression manuals are endangered mostly with punctuation, not typography. An en lurch surrounded by spaces achieves a same outcome as an em lurch with no spaces, yet typographically it is reduction disruptive. This was a vast discuss between my editor and me when we was essay my book.

The use of regulating dual hyphens for a lurch is a holdover from a days of typewriters. Besides being visually disruptive to well-spoken blocks of text, it is now nonessential with a richer impression sets that are accessible to typographers.

The en lurch is also used to prove ranges of numbers (such as “7–10 days”), nonetheless it isn’t flanked by spaces in this case.

Use Smart Quotes, Dummy

The selection pitch that is constructed when we form ” on your mechanism is not a loyal selection pitch (unless your word estimate or page blueprint module has involuntary formatting). True quotes are infrequently called “smart quotes,” and a right one contingency be used according to possibly we are opening or shutting a quotation. To open a quotation, use “ (ldquo;), and to tighten a quotation, use ” (rdquo;). For opening singular quotes, use ‘ (lsquo;), and for shutting singular quotes and apostrophes, use ’ (rsquo;). CMS’ such as WordPress customarily possibly modify reticent quotes to intelligent quotes automatically or have plug-ins for a job.

Smart quotes vs. reticent quotes

Smart Quotes in Action

CNN uses reticent quotes, that demeanour clunky and lifeless, while The New York Times uses intelligent quotes, that demeanour purify and sophisticated:


Smart quotes are so voluptuous that their devious forms can be used as ornamentation, such as in this lift quote on Jason Santa Maria’s blog, that facilities intelligent quotes customarily in shade form:

smart quotes on

Quotation Marks Don’t Measure Up

The ” and ‘ on your keyboard are also mostly used to suitable feet and inches (Steve Jobs is 6′ 2″). This, too, is technically incorrect. For feet, we should use ′ (prime;), and for inches, ″ (Prime;). (Steve Jobs is, in fact, 6′ 2″.)

prime vs. reticent quotes

Note that many desktop edition programs are so modernized that they automatically (and incorrectly) insert “smart” apostrophes and selection outlines in all of these situations. This can be altered in a program’s settings, yet a quickest approach around this is simply to duplicate and pulp a scold pitch from a “less sophisticated” calm editor.

+1 For Proper Math Symbols

Sometimes in a haste, we use a wrong outlines for math symbols. For example, as we schooled above, a hyphen is not a reduction pointer (−, minus;). Additionally (no joke intended), conjunction an x nor an asterisk (*) is a computation pitch (×, times;).

math symbols

Proper fractions not customarily supplement magnificence to typography, yet are some-more straightforwardly recognizable. Using a condense in your fractions (1/3) is not ½ (frac12;) as cold as regulating a correct coarse fragment (as it’s called).

Certain other black are harder to surrogate with common characters, such as when we write 98¢ (cent;) and 104° F (deg;). You competence be tempted to customarily form these out as “cents” and “degrees.”

There’s Always More With Ellipses

Sometimes, there’s some-more than meets a eye. Most of us form a ellipsis as 3 durations (…), yet many fonts come versed with their possess impression (…, hellip;) that is somewhat some-more spaced out. The Chicago Manual of Style would have we consider that a correct ellipsis consists of durations distant by spaces (. . .), yet any typographer knows that is too disruptive to physique text. Some typographers cite to set their possess ellipses by regulating skinny spaces (thinsp;) between durations (. . .). But your visualisation is best; collect a ellipsis diagnosis that creates your calm retard demeanour many unchanging (which will never be with full spaces between periods.)

Accent Marks And Other Diacritics Aren’t Passé

Sure, in a US we can work on your resume while sitting in a cafe, and it wouldn’t be many opposite than if we were operative on your résumé in a café in France. No matter how naïve we are, infrequently regulating a correct diacritical pitch is… critical. A diacritic is a pitch placed nearby (usually above or below) a minute to change a sound. The many common diacritic in English is a strident (´) accent, that is used in a series of difference borrowed from other languages and that is infrequently really important, such as for a consequence of dogmatic your passion for saké.

acute vs. grave accent

The strident accent is mostly confused with a grave accent (`), that leans to a left and is straightforwardly accessible on US keyboards next a tilde (~). The grave accent is indeed many reduction common in English than a strident accent. If we ever see one again, we competence consider we were carrying a déjà vu.

To insert an strident accent on Mac OS X, reason down Option while typing “e,” and afterwards form a minute that we wish to seem next a accent (so, if we wish “é,” you’d be typing “e” twice). Play around with Option + u, i and ~, and a whole universe of diacritics will open for you.

Ligatures Bring Letters Together

In a early days of printing, when form was set in lead, a lead slugs on that characters were set done it formidable to set certain impression pairs tighten enough. For example, in a minute multiple “fi,” a tip depot of a “f” stranded out so distant that a minute couldn’t be set tighten adequate to a “i” since of a dot on a “i.” Thus, many fonts (usually a classical ones, such as Adobe Garamond) have ligatures for certain pairings that indeed mix a letterforms together. Some complicated fonts, such as Helvetica, also have ligatures, yet their outcome is negligible.

Below, we can see that ligatures are indispensable in some fonts some-more than others. Notice how an “fi” ligature is some-more vicious to purify typography in Adobe Garamond than it is in Helvetica. Because of this, opposite fonts come with opposite ligatures.

ligature vs. no ligature in Adobe Garamond vs. Helvetica

In further to “fi,” ligatures are many ordinarily indispensable for a groupings “fl,” “ff,” “ffi” and “ffl.” Below we can see that Apple creates pleasing use of a “ffl” ligature in a form diagnosis of “iPod shuffle.”

iPod Shuffle ligature on

Using Ligatures Practically

Obviously, typing in ligatures each time we need them is impractical. Even if we did, your calm competence not eventually be displayed in a rise that is versed with a suitable characters. Fortunately, plug-ins such as jQuery’s Ligature.js will automatically insert a many ordinarily upheld ligatures where appropriate.

But, be careful: even if a correct characters are available, we competence make it formidable for users to hunt for calm on a page. Currently, Internet Explorer and WebKit-based browsers such as Chrome and Safari compare ligatures to their analogous minute pairs when a hunt authority is used (for example, when a user searches for “fig” on a page), since Firefox does not.

CSS3′s font-variant-ligatures Property

CSS3’s font-variant-ligatures skill displays a correct ligatures yet interfering with a tangible HTML formula of a page, so preserving full functionality of a hunt authority in all browsers. In this case, while Internet Explorer, Chrome and Safari do not now support this property, Firefox does.

So, if we request ligatures during a calm level, afterwards your Firefox users won’t be means to use a hunt authority for them. And if we use font-variant-ligatures, customarily your Firefox users will see a ligatures. Because of a uneven browser support for ligatures, ignoring ligatures altogether in a physique duplicate would not be unreasonable. A miss of ligatures in vast headlines and headings competence be some-more obvious, though, so picking your elite process of support there competence be worthwhile.

Being Reasonable

Obviously, gripping lane of and implementing some of these typographic sum competence seem flattering tedious. Fortunately, many Web frameworks and CMS’ have plug-ins that take caring of them for you, and some of CSS3’s typography controls are during slightest commencement to be upheld in browsers.

But as with all matters of pattern and production, economy comes into play. You competence confirm that implementing some of these sum customarily isn’t value a trouble. What’s vicious is during slightest knowing typographic etiquette, so that we can rest on it when it matters and make correct decisions that are suitable for your project.

Other Resources

You competence be meddlesome in a following articles and associated resources:

  • How to TypeLearn how to indeed form these characters on your computer.
  • The Elements of Typographic Style, Robert BringhurstThe Amazon grouping page for a unaccepted bible of complicated typographers. This book is full of good recommendation on any typographic fact we can imagine.
  • The Elements of Typographic Style Applied to a WebAn instrumentation of Robert Bringhurst’s classical book for a Web.

This post is formed on a section from David’s arriving book, Design for Hackers: Reverse-Engineering Beauty, that will be published in Sep 2011.

Related posts