Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

Most designers know Helvetica & Arial are not the same, but hard pressed to tell you what the differences are.

 

Comparing Rs between Helvetica and Arial

One of the most pronounced differences between Helvetica (shown in black) and Arial (shown in aqua) can be found in the cap R. You can also see Arial’s slightly higher waistline in this example.

So Here’s The Inside Story!

A Bit of History

Helvetica, one the most widely-used typefaces for decades, has a long history. It was originally designed in 1957 by Swiss typeface designer Max Miedinger for the Haas Type. It was commissioned by Eduard Hoffmann, managing director of the Swiss foundry, to compete with other popular sans serifs of the day, particularly Akzidenz Grotesk.

This new design was therefore named Neue Haas Grotesk (translation: New Haas Sans Serif) to reflect this lineage.

The name was changed to Helvetica (an adaptation of Helvetia, the Latin name for Switzerland) by the Stempel type foundry, the parent company of Haas, to reflect its Swiss heritage. Its popularity soared in the mid-1980s when it was included in the core fonts for the Apple operating system and laser printers, alongside Times Roman and Courier.

Over the years, the Helvetica family was expanded to encompass an extensive range of weights and width variants.

Arial, on the other hand, is often viewed as the “poor man’s” Helvetica by designers. Although designed to compete with (and therefore be similar to) Helvetica, it has its own individual history and backstory. Arial was designed in 1982 by Robin Nicholas and Patricia Saunders for Monotype.

Although created for use in an early IBM laser printer, its roots lie in the 1926 Monotype Grotesque design. In 1992, Microsoft licensed Arial to be included in the suite of fonts supplied with the Windows operating system.

The family has since been expanded beyond the original weights, and now includes 28 versions: six weights plus companion italics for the regular width, four condensed, four narrow, four rounded, and four monospaced versions.

What’s hot? What’s not? Learn more about the latest font trends by downloading our  Font and Typography Trends Report

Many of the differences between these two popular typefaces are related to their intended usage:  Helvetica was designed for print, while Arial was designed for laser printers and then adapted for use on computers, both being lower resolution environments than print.

Helvetica has sharper, crisper, and more stylish details, such as the leg of the cap R, more curvy diagonal spine on the numeral 2, and horizontal or vertical end strokes on many characters.

In addition, Helvetica has a slightly higher waistline and an overall less rounded appearance than Arial. Arial, on the other hand, has a less elegant, blander appearance, most likely so that it prints well on the laser printer it was intended for. These traits also make it better for other lower resolution environments, including the web and other pre-retina and other hi res display digital environments.

Arial has softer curves and fuller counters, as well as a characteristic diagonal terminal on the t, and a curved tail on the cap Q.

Other differences between the two typefaces are noted in the next three illustrations.

Other differences between the two typefaces are noted in the next three illustrations.

 

D.HelvArial

The differences between Helvetica and Arial are most noticeable in larger sizes, while they look fairly similar in smaller text. Excerpt from 1491: New Revelations of the Americas Before Columbus, By Charles C. Mann.

The differences between Helvetica and Arial are most noticeable in larger sizes, while they look fairly similar in smaller text. Excerpt from 1491: New Revelations of the Americas Before Columbus, By Charles C. Mann.

 

Helvetica and Neue Helvetica

In 1993, D. Stempel AG, Linotype’s daughter company, released a reworking of the original Helvetica entitled Neue (New) Helvetica.

This freshened up version includes the refinement of some characters, strengthened punctuation, cap and x-height adjustments, widened cross bars, and a new numerical system to identify the weights, similar to Univers and Frutiger. It also has additional weights: eight upright versions plus italics for the regular width, obliques for the expanded versions, as well as nine weights plus obliques for the condensed.

There is also a bold outline version for the regular width. The resulting total is 51 weights in all – many more than in the original family.

 

The differences between Helvetica and Neue Helvetica are subtle yet significant: wider rounded shapes, a wider arm on the r, extended crossbars, and larger punctuation.

The differences between Helvetica and Neue Helvetica are subtle yet significant: wider rounded shapes, a wider arm on the r, extended crossbars, and larger punctuation.

 

Two of the most popular new weights are Ultra Light and Thin, which are intended for display usage.

For this reason, the spacing of these weights is a lot tighter than the heavier weights. The problem arises when they are used for small text (which has become a common usage), where their tight spacing makes the text look very cramped and hard to read. The solution is to open the tracking as needed to give the text more “breathing” room.

This will expand the usable size range of this still extremely popular typeface.

One of the biggest problems with Helvetica Neue Ultra Light and Thin (heading and text, respectively) is their use for text and other smaller settings, due to their very tight spacing (upper). This can be improved by opening the tracking as needed: +50 for the heading set in Ultra Light, and +40 for the text set in Thin (lower) in this example.

One of the biggest problems with Helvetica Neue Ultra Light and Thin (heading and text, respectively) is their use for text and other smaller settings, due to their very tight spacing (upper). This can be improved by opening the tracking as needed: +50 for the heading set in Ultra Light, and +40 for the text set in Thin (lower) in this example.

Not ready to quit reading? Take your font expertise to the next level. Check out our recent blog post about Abbreviations in Font Names and crack the code to various font abbreviation mysteries.

For more information on font trends, check out our Font and Typography Trends Report and get up to speed on the latest typography trends.


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

You might or might not remember typewriters, but their use is responsible for many of the type crimes committed today.

How so?

Typewriters had a very limited keyboard, and did not accommodate many of the typographically correct characters we use in professional typesetting. Quotation marks and apostrophes are one example of this: although different from inch and foot marks, they are all represented by the same keys on a typewriter.

But when setting type in the professional arena (as opposed to just “typing”), they are separate and different glyphs.

Quotations marks, also referred to as smart quotes, typographer’s quotes, and sometimes curly quotes (although they don’t have to have the curly design), are design-sensitive, that is, are designed to match the typeface they belong to.

Each typeface has different versions for the left and right (or open and closed) quotes. Apostrophes, which are use to indicate possession and omission, are actually the same, exact glyph used for the single, closed quote, and therefore are also design-sensitive.

Inch and foot marks, also called primes, are different from quotation marks in that they more neutral in appearance (as opposed to matching each typeface), and are either straight or slightly angled, and usually tapered. The glyphs used to set primes are most often the typewriter quotes (also referred to as straight or dumb quotes) available in most fonts, which are vertical strokes.

Note that true primes are slightly angled, but since they are not available in most fonts, the vertical typewriter quotes are the accepted glyphs for measurements in typesetting.

 

The differences between smart quotes, dumb quotes, and true primes are easy to see in these examples set in Arno Pro.

Straight quotes vs smart quotes. The differences between smart quotes, dumb quotes, and true primes are easy to see in these examples set in Arno Pro.

 

The design of both smart and dumb quotes (sometimes called "straight quotes") can vary from typeface to typeface.

The design of both smart and dumb quotes (sometimes called “straight quotes”) can vary from typeface to typeface.

 

How to Avoid the Wrong Symbol

If the differences between smart and dumb quotes are so obvious, why do we see so many incorrect appearances of these characters in both print and digital media? Part of the fault lies with writers who were taught to type using old-fashioned typewriter conventions, and are not aware of the differences between these characters in proper typesetting.

Either that or they know the differences but don’t know how to access the right character in word processing software. In other cases, copy is lifted from the web, a PDF document, or from an email – all of which can result in quotes and primes being improperly designated.

Even if the copy does contain smart quotes, there are some instances that might still be wrong.

All text should be reviewed for the accurate use of primes in measurements, which might have automatically – and incorrectly – been converted to smart quotes. In addition, be sure to check that abbreviations, contractions and omissions, or all words that should begin with an apostrophe, in fact, do, rather than an open single quote.

 

Take care to use the right glyphs for both quotation marks and measurements.

Take care to use the right glyphs for both quotation marks and measurements.

 

When importing, converting, or typing text, check that the correct glyph is being used for all instances. Primes in measurements can easily appear as smart quotes (upper), while apostrophes that appear in omissions are frequently set as open single quotes (lower). When these errors appear, they need to be manually corrected.

When importing, converting, or typing text, check that the correct glyph is being used for all instances. Primes in measurements can easily appear as smart quotes (upper), while apostrophes that appear in omissions are frequently set as open single quotes (lower). When these errors appear, they need to be manually corrected.

 

But no matter how copy appears, it is up to the designer, production artist, and webmaster/programmer to make it right. Here are some tips to help get it right:

  • Begin with typographically correct copy. The default setting of most design software is to automatically use Typographer’s Quotes when typing, but this is not true for all word-processing programs. Therefore, set these preferences to convert to smart quotes. Another way to correct these errors is to use a utility such as Tex-Edit Plus that can clean up a document in seconds.
  • Import text properly, using the Place command available in most design software. When using InDesign, select Show Import Options where you can choose the Option to Use Typographer’s Quotes.
  • Review imported text and make sure all measurement are set with primes, not smart quotes.
  • Check for apostrophes (and not open single quotes) in contractions.
  • Always proof the final text carefully.
Smart quotes in word. Microsoft Word preferences can easily be set to use “smart quotation marks”.

Smart quotes in word. Microsoft Word preferences can easily be set to use “smart quotation marks”.

 

Tex-Edit Pro is a great utility that allows for quick and easy cleanup of text, including quotes.

Tex-Edit Pro is a great utility that allows for quick and easy cleanup of text, including quotes.

 

Smart Punctuation in Digital Media

The same rules and standards for printed matter apply to digital media as well, but the process of applying them might be different. If the copy is formatted correctly, smart quotes might appear automatically when inserted in digital media such as web sites, but in other cases, they will need to be replaced with HTML codes to appear correctly.

When using content management systems (CMS) such as WordPress or Drupal, the ability to set these special characters (as they are often called) is often controlled by preferences in the back end. But even when set to display smart quotes, you might loose the ability to change them back to primes or apostrophes. Additionally, not all email clients (such as Constant Contact) support “smart” punctuation.

Setting type like a pro requires close attention to these – and many other details. No matter what role one plays in the process, it is important that all involved know the proper usage of quotes and primes, and review for their correct appearance.


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

Fractions are an essential element in typesetting. They appear with great regularity in measurements and quantities, recipes, scores, numerical charts and listings, textbooks and manuals, as well as math and science.

Diagonal fractions are the most commonly-used fraction style in typeset copy. When they are called for, the challenge lies in knowing which diagonal fractions are available in any given font, and how to access or create them. Here’s some tips and general rules for typesetting diagonal fonts.

All three categories of diagonal fractions are shown above.

All three categories of diagonal fractions are shown above.

Diagonal fractions fall into three categories: basic, extended, and arbitrary.

Basic fractions are the ones that are available in most fonts regardless of the font format, and usually compromise ¼, ½, and ¾.

Extended fractions are a broader collection of diagonal fonts that are found in many – but not all – OpenType fonts. They consist of 1/8, 3/8, 5/8, 7/8, and sometimes 1/3 and 2/3. Extended fractions are also referred to as prebuilt fractions, as they are part of a font’s character complement.

Arbitrary fractions are any other random fraction, such as 25/1000 and 76/389. They are created on-the-fly by the fraction-building function available in some OpenType fonts, and therefore are not actual glyphs found in a font.

The Type1 font format of Minion only has room for the three basic diagonal fractions…

The Type1 font format of Minion only has room for the three basic diagonal fractions…

 

…while the Minion Pro OpenType version has the nine extended versions.

…while the Minion Pro OpenType version has the nine extended versions.

 

Setting Basic and Extended Fractions

The first step is finding out which fractions are available in any particular font. Both basic and extended fractions can be found in the Glyphs panel of most design software, usually under the Numbers subset.

Once you determine that a font has the prebuilt fractions you need, there is an easier way to set these fractions that does not require accessing them from the Glyphs panel.

Here’s how to access basic and extended fractions in InDesign:

  • Set the fraction manually, that is, using full sized numbers separated by a slash
  • Highlight this horizontal fraction
  • Then select Fractions via InDesign’s Character panel > OpenType panel (or submenu)

If using Illustrator, the process is slightly different:

  • Set the fraction manually
  • Highlight the horizontal fraction
  • Then click on the Fractions icon in the OpenType panel
    (Note that Illustrator has a separate OpenType panel vs. InDesign’s OpenType submenu accessed off of the Character panel.)

In both cases, the horizontal fraction will automatically be replaced with the prebuilt, diagonal style, if available in that font.

 

Setting Arbitrary Fractions

Arbitrary fractions are built on-the-fly using superior and inferior figures as well as a fraction bar, and therefore are not located on the Glyphs panel. As previously mentioned, the ability to create arbitrary fractions on-the-fly is a feature that is programmed into some, but not all, OpenType fonts.

The bad news is there is no easy way to determine which OpenType fonts have this ability; it is mostly a matter of trial and error to determine which do and which don’t. But the good news is there are still plenty of great-looking fonts that do, especially those intended for text.

The steps to setting arbitrary fractions are the same as prebuilt ones:

  • Set the fraction manually
  • Highlight the horizontal fraction
  • Then select Fractions via InDesign’s Character panel > OpenType submenu, or Illustrator’s Fractions icon.

If the font in question has the ability to set arbitrary fractions, it will automatically be converted. If not, nothing will happen.

The Fraction command is used to access the prebuilt ones, as well as to create arbitrary fractions on-the-fly.

The Fraction command is used to access the prebuilt ones, as well as to create arbitrary fractions on-the-fly.

 

Illustrator uses icons instead of words for many OpenType features, including Fractions.

Illustrator uses icons instead of words for many OpenType features, including Fractions.

 

The Fraction option is also included in both Character and Paragraph Styles.

The Fraction option is also included in both Character and Paragraph Styles.

Note: Only use the Fraction command for individual fractions, and not for an entire block of text, or all full-sized numerals will be converted to superscript/superior or subscript/inferior figures.

Other fraction styles include nut or vertical fractions (often used for math and science formulas), horizontal fractions (considered unattractive and unprofessional in most typesetting), decimal (5.25, etc.), and spelled out. Make sure you do your research, and use the appropriate fraction style for the job at hand.


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

Small caps are capital letterforms that are shorter than full-sized caps. They are usually the height of the lowercase or slightly taller when part of a text font, and can be even taller – sometimes slightly shorter than the full caps – when designed for a display design. Small caps have many uses.

They can be used for titles, subtitles and title pages in publishing, headlines and subheads, text lead-ins, page headings and footers, column headings, as well as a substitute for full-sized caps in acronyms and abbreviations.

The small caps in these three fonts are all different heights in relation to the x-height of each typeface.

The small caps in these three fonts are all different heights in relation to the x-height of each typeface.

 

. Small caps have many uses. This setting uses them for the headline, byline, and the lead-in to the text. Tangent, the typeface used, has true-drawn small caps for all the weights, including the obliques, which was used for the byline.

Small caps have many uses. This setting uses them for the headline, byline, and the lead-in to the text. Tangent, the typeface used, has true-drawn small caps for all the weights, including the obliques, which was used for the byline.

The most important thing to know about small caps is to only use the true-drawn variety as opposed to the fake, computer-generated ones.

True-drawn small caps are designed by the type designer to match the weight, width and spacing of the lowercase (or caps if designed for an all-cap typestyle). The fake, computer-generated ones look too light, too tight, and in some cases, too narrow.

For these reasons, they are considered a “type crime” by type-sensitive designers. Unfortunately, the use of these “fakers” is an all too common occurrence. Here is how this amateurish and unprofessional typographic practice can be avoided: if one knows ahead of time that small caps would be a useful feature in any particular job, only use font(s) that contain the true-drawn variety.

True-drawn small caps (upper) vary greatly from the fake, computer-generated ones (lower). The fakers are always too light, and often too narrow as well as too tightly spaced.

True-drawn small caps (upper) vary greatly from the fake, computer-generated ones (lower). The fakers are always too light, and often too narrow as well as too tightly spaced.

 

If small caps are such a useful typographic tool, why don’t more fonts have them?

Prior to the OpenType font format that can accommodate thousands of characters, the older Type1 and TrueType formats could only accommodate 256 characters, and therefore did not have room to include small caps – even if they were originally designed and available in older font technology such as phototypesetting and hot metal.

In order to work around this limitation, typeface designers and foundries wanting to include small caps had to put them in a second font – either an additional font designated with a SC in the name, or an Expert Set. This made it more expensive for the foundry, and more time-consuming and tedious for the type user, who had to access them from a separate font for each and every usage.

But with OpenType’s expanded character capacity, there is more than enough room for small caps, as well as many other characters desirable to graphic designers.

 

Identifying and Setting True-drawn Small Caps

So how does one know if a font has true drawn small caps? And if it does, how does one access them?

When using Adobe InDesign, the industry standard for page layout and typesetting, the user interface can be a bit confusing. One can always view the Glyphs panel to see if the font contains small caps, but there is a better way that combines identifying the availability of small caps and applying them.

Here are the steps:

– First, select the font in question in the font dropdown menu in the Character panel or Control panel.

– Next, open the OpenType panel. If the All Small Caps option is not bracketed, there are true-drawn small caps in that particular font. If it is bracketed, that font does not contain them. (Note that some typeface families have small caps for just some of the versions.)

Once you determine that a font does have small caps, you can apply them in one of two ways:

– If you want to convert both caps and lowercase to small caps, select the All Small Caps option in the OpenType panel.

– If you want to convert just the lowercase so that you have a blended cap/small cap setting, select the Small Caps option in the Character panel.

The Small Cap option in InDesign’s Character panel will change any selected lowercase text to small caps. The All Small Caps option in the OpenType panel will convert both caps and lowercase to small caps.

The Small Cap option in InDesign’s Character panel will change any selected lowercase text to small caps. The All Small Caps option in the OpenType panel will convert both caps and lowercase to small caps.

 

Note that if a font does not have true-drawn small caps, InDesign will create the fake version by reducing the full caps to the default 70% of the cap height.

If you want to eliminate the possibility of fake small caps from ever appearing in your work, you can change the default Small Cap Size from 70% to 100% via Preferences > Advanced Type > Character Settings.

This will not affect true-drawn small caps from appearing when available in a font.

If you want to avoid fake small caps from appearing in any of your work, change the Small Cap setting in Preferences from 70% to 100%, and make this your default.

If you want to avoid fake small caps from appearing in any of your work, change the Small Cap setting in Preferences from 70% to 100%, and make this your default.


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

Typographic terminology is sometimes very specific, and the nuances can be confusing. Understanding the distinctions will enable you to communicate more clearly, typographically speaking, and help you to make the best use of your fonts and software.

Character vs. glyph: A character is the symbol representing an individual letter, numeral, punctuation, sign, symbol, accent, or other elements in a typeface. A glyph is the actual representation of that character.

Several glyphs may represent one character, such as the lowercase a being represented by the default lowercase a, swash version, small cap, and superior a.

The lowercase a is represented by these four glyphs in Adobe Garamond Premiere Pro: default glyph, swash alternate, small cap, and superscript a.

The lowercase a is represented by these four glyphs in Adobe Garamond Premiere Pro: default glyph, swash alternate, small cap, and superscript a.

 

Typeface vs. font: A typeface is all the letters, numbers, punctuation, and other signs and symbols of a language system designed in a particular style.

A font (in today’s digital world) is a complete character set of a particular weight and style of a typeface in digital form. It is the delivery mechanism of a typeface, and is considered software.

Each font consists of one digital outline for every glyph, which then can be scaled to any size. In the days of metal type, a font was one version of a typestyle in one particular size. A typeface would then consist of many fonts, one for each size: thus Caslon Regular 10 point was one font, while every other size was considered a different font. 

 

Italic vs. oblique: Italics are a slanted typestyle most commonly designed as a companion to a roman, or upright version.

It is usually a unique and separate design, and is often somewhat calligraphic in nature. Oblique refers to a slanted version of its upright companion with few or no design changes other than the angle. (A proper oblique is designed by the typeface designer, and not slanted by a computer command.)

Although these two terms have slightly different meanings, not all typefaces apply the technically correct term. For instance, in the many versions and rereleases of Helvetica, one can see both italic and oblique used for the name of the same design.

The difference between italic and oblique is apparent when set next to their upright companion.

The difference between italic and oblique is apparent when set next to their upright companion.

There are some exceptions to the rules, such as these two versions of what seems like the same typeface, but each actually has a different name: the Italic being the OpenType version, while the Oblique being the Type1 version.

There are some exceptions to the rules, such as these two versions of what seems like the same typeface, but each actually has a different name: the Italic being the OpenType version, while the Oblique being the Type1 version.

 

Slash vs. fraction bar: The slash (aka forward slash) is a diagonal line going from upper right to lower left, occasionally extending slightly below the baseline.

It is easily found on the keyboard, and is frequently used in numerical dates as in 1/25/58, as a substitute for a conjunction such as in East/West and Y/N, math and ratios, and URLs.

The fraction bar is also a diagonal line, but it is on a more extreme angle, and extends from the cap height to the baseline, and not above or below as do some slashes. It is designed specifically for diagonal fractions, and thus its width and weight is sensitive to each typeface design. 

The differences between the forward slash (left) and fraction bar (center) are clearly seen in Chaparral Pro.

The differences between the forward slash (left) and fraction bar (center) are clearly seen in Chaparral Pro.

 

Diagonal vs. nut fractions: Diagonal fractions are those where the numerator and denominator are separated by a diagonal stroke (usually a fraction bar), while nut fractions, also called stacked or vertical fractions, are those where the top and bottom numerals are separated by a horizontal line.

Diagonal fractions are used for proportions, ratios and percentages, while nut fractions are frequently used in – but not limited to – math and scientific formulas.

A diagonal and a nut, or vertical fraction are shown above.

A diagonal and a nut, or vertical fraction are shown above.

 

 

Kerning vs. tracking: Kerning in the digital world is the addition or reduction of space between a pair of characters to improve the overall balance and consistency of the spacing.

Tracking, on the other hand, is the digital term for the addition or reduction of spacing between a range of characters.

This can be used to improve the overall spacing of a font at a particular size, or to create the appearance of a more open, letterspaced look, usually reserved for a brief, all cap setting.

Kerning alters the spacing between two characters, while tracking affect a range of characters.

Kerning alters the spacing between two characters, while tracking affect a range of characters.

 

Widow vs. orphan: A widow is a word, hyphenated word, or several short words that appear at the end of a paragraph.

They are considered undesirable in fine typography as they create a visual hole, whether they appear in-between two paragraphs, or on the bottom of a column of type.

An orphan, on the other hand, is similar, in that it too is a word, hyphenated word, or several short words, but appearing at the top of a column.

Orphans also create a visual hole in a line of type, resulting in a disturbance of the alignment and symmetry at the top of one or more columns. Both should be checked for towards the end of a project, and fixed if possible, either by altering the line breaks or column width, or by editing the copy to either eliminate the short line, or lengthen it.

Widows and orphans are similar, but appear in different places.

Widows and orphans are similar, but appear in different places.

 

 

Monospaced vs. proportional spacing: A monospaced font is one in which each character has the same total width (the width of the glyph plus the space added to the right and left) as in typewriter type as well as tabular figures.

The width and design of some glyphs are occasionally altered to create a better fit within the fixed width of the font.

Proportional spacing is the spacing used in most typefaces where each character has a unique width in proportion to the shape of each glyph.

. Some characters in a monospaced font (upper) might be altered to better fit the fixed width, such as the m and i in the upper showing. Proportional fonts (lower) have more even, balanced spacing.

. Some characters in a monospaced font (upper) might be altered to better fit the fixed width, such as the m and i in the upper showing. Proportional fonts (lower) have more even, balanced spacing.

Copyeditor vs. proofreader: A copy editor checks the text for accuracy, clarity, usage, consistency of style, as well as house style, if a requirement. This is most often done at the beginning of the design and typesetting process.

A proofreader is generally the last person to check the text before (and sometimes after) it goes into final production, whether it be print or digital media.

It usually consists of checking for spelling, grammar and tense, syntax, punctuation, extra spaces, and sometimes font size, styling, and other characteristics.

 


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

A.HyphensDashesHyphens, en and em dashes appear with great frequency in typeset copy. Unlike the days of typewriters where the only character available to represent these three punctuation marks was a hyphen, all three are available in today’s fonts. They all have different usages, as well as varying design characteristics for each typeface design.

 

In today’s digital world where graphic designers are responsible for so many aspects of typesetting and production, it is up to us to know the difference between these three symbols, and to check for appropriate usage and appearance in every job we come into contact with. From reviewing the initial copy (text) to proofreading the final output, designers need to be aware of these punctuation marks, and edit typeset copy accordingly for typographic accuracy as well as good taste.

 

When to Use Hyphens, En and Em Dashes in a Sentence

Hyphens ( – ) are the shortest of the three, and are used to hyphenate words at the end of line. They are also used for compound, or hyphenated words and phrases, such as sister-in-law and merry-go-round. In addition, they are the correct punctuation for phone numbers, as well as game and sport scores, and contest results.

B.HyphensDashes

 

En dashes ( – ) are the middle width of the three, and are used to indicate a break in time, or a span or range. (An easy way to know if an en dash is the correct punctuation for a range is if it can be replaced with a preposition, such as to or through.) They are also used to indicate a con­nec­tion or con­trast between pairs of words, such as an east–west flight, and a Democrat–Republican split. The en dash is probably the least understood and most incorrectly used of the three; it is often substituted with either a hyphen or an em dash, both of which are wrong when the en dash is the correct punctuation.

C.HyphensDashes

 

Em dashes ( — ) are the widest of the three. They are most often used for a break in thought, or a thought within a thought or a sentence.

D.HyphensDashes

 

Design Differences

While hyphens are usually consistent in their design relative to each typeface (usually short horizontal or slightly angled strokes), en and em dashes can vary greatly from typeface to typeface. They can differ both in the width of the actual glyph, as well their overall spacing, that is, the space added (or not added) to both sides of the glyph to give them ‘breathing room’ when they appear next to other characters.

E.HyphensDashes

 

The historical standards in the days of metal type for the width of both dashes were fixed for each point size, that being 1000 units to the em square, while en dashes were half that, at 500 units to the em dash. (An em is a measurement relative to the point size of the type, therefore in a 12-point typeface an em is 12 points.)

In addition, dashes had little or no additional space on both sides (referred to as side-bearings in the world of type design). Today’s specs are not that rigid, and can (and should in my opinion) vary dependent on the overall width of the typeface design.

A good rule of thumb is for en dashes to approximate the width of the cap or lowercase ‘n’, while the em dash to approximate the cap or lowercase ‘m’. This results in dashes that are in proportion to the typeface they are designed for: dashes in condensed or compressed typestyles will be narrower, while regular or expanded typefaces will have dashes that are wider, and in proportion to their width.

In addition, dashes should have some space surrounding them so they aren’t crowded and don’t appear to crash into other characters.

So how does the type-sensitive designer deal with em dashes that look too wide in any particular typeface? And what about either dash that appears too tight? It is an accepted practice by many designers to substitute an en dash for a very wide em dash.

While this might not be ‘grammatically correct’ according to grammar references and style manuals, it is a typographic practice that takes into account the varying widths of dashes from typeface to typeface, and serves to eliminate the visual holes that a very wide em dash can create.

As for any dash that appears too tight, space can be added to the right and left to give them a more open appearance. This can be achieved via kerning, or with the use of thin spaces if you are using InDesign. Keep in mind that this should be done on a case-by-case basis, and done consistently for any particular typeface, project, web site or client. 

Double hyphens are never correct in professional work. (middle and lower) Although an em dash is the correct punctuation for this example, the very wide, tight em dash in this typeface can be replaced with an en dash with space added to both sides, to improve the overall appearance. Excerpt from A Tale of Two Cities by Charles Dickens.

Double hyphens are never correct in professional work. (middle and lower) Although an em dash is the correct punctuation for this example, the very wide, tight em dash in this typeface can be replaced with an en dash with space added to both sides, to improve the overall appearance. Excerpt from A Tale of Two Cities by Charles Dickens.

 

Space can be added to both the en and em dash if they appear too tight. In addition, a very wide em dash can be replaced with an en dash.

Space can be added to both the en and em dash if they appear too tight. In addition, a very wide em dash can be replaced with an en dash.

 

Final Thoughts On How To Use Hyphens In Writing

Never use two hyphens in place of a dash in professional typography. This is a holdover from the typewriter days when the limited keyboard did not include dashes, thus two hyphens were used in place of dashes.

The problem arises today because many copywriters continue to use this outdated practice, and submit copy with double hyphens that are not corrected by designers and webmasters. The best way to avoid this is to proofread and correct all copy before it is typeset.

In addition, when setting type for the web or other digital media, always try to adhere to professional standards of typesetting, including the correct usage of en and em dashes. While there are some instances where this is not possible (such as some email clients which do not support the use of dashes), in most cases it is.

Some instances might require special HTML coding, so be sure to inform all those responsible for the type styling, including webmasters and developers who might not be aware of the correct typographic practices.


Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestShare on Reddit

Figures (aka numbers or numerals) are a common element in text of all kinds. They appear anywhere from dates, measurements and quantities to addresses, phone numbers, and a lot more.

When typesetting numerals, it’s important to understand the different styles available in some fonts, and when to use which. Prior to current font formats, there was only ‘room’ for one style of numeral in a font, but due to OpenType’s capacity to include thousands of characters, many fonts now contain four figure styles.

A.Figures

 

Lining vs. Oldstyle Figures

The four kinds of figures consist of two design styles and two spacing styles: Lining and oldstyle are the design styles, while tabular and proportional relate to the spacing.

Lining figures, also called aligning or cap figures, are of uniform height and align on the baseline and the cap height (thus the term aligning). These are a good choice when you want the numerals to really stand out.

Oldstyle figures, on the other hand, are numerals that approximate the shape and form of lowercase letters in that they have an x-height, as well as ascenders and descenders in a set pattern. These figures can be quite beautiful, and look best in running text where you don’t necessarily want the figures to stand out from the surrounding text. They can be very elegant, and occasionally have slight design variations from the companion lining figures.

B.Figures

 

C. Figures

Lining figures in running text will stand out as if they were all caps (left). If you want a more fluid texture with no extra emphasis on the numerals, use proportional oldstyle figures (right).

 

Tabular vs. Proportional Spacing

Tabular figures all have the same total width, which consists of the actual glyph plus the spaces added to the right and left, called sidebearings in the type design world. Tabular spacing is necessary to align vertical columns of numbers, such as those found in tables, thus the turn tabular. They’re also used for prices, invoices, financial charts, and any instance where figures have to align vertically.

Proportional figures, on the other hand, are those that are individually spaced so that they blend in with the overall color, texture, and spacing of the upper and lowercase characters. Have you ever seen a numeral ‘1’ in running text with disproportionate large spaces around it? That is a tabular figure, which unfortunately is often used when proportionally spaced figures are the preferred figure style. This is a common occurrence because many type users are not aware of the available figure styles in a font, and thus ‘settle’ for a font’s default figures, which is frequently tabular lining figures.

 

D. Figures

Tabular figures all have the same total width, while proportional figures have spacing that varies depending on the width of the character.

 

E. Figures

When setting columns of numerals, use tabular figures so that each column aligns.

 

How to access figure styles

The task of determining which figure styles are available in any given font is an important first step in selecting an appropriate font for projects that includes figures. (I will discuss the process in Adobe InDesign, so if you are using other design software, it will most likely be a something similar.)

The first step is to activate the font, making sure it is an OpenType font. This is indicated in the font menu with a black and turquoise ‘O’ symbol. Next, open the OpenType panel located off of the Character panel. You will notice, five figure settings on the very bottom of that panel:

Tabular Lining

Proportional Oldstyle

Proportional Lining

Tabular Oldstyle

Default Figure Style

If a font contains any of the top four styles, they will be unbracketed. Any figure style that is bracketed is not available in that particular font, even if it is OpenType. The problem with this method is that it is not always 100% reliable: some OpenType fonts have both lining and oldstyle figures, but do not have them in both tabular and proportional spacing, yet they might still all be unbracketed.

For this reason, the very best way to determine the available figure styles is to typeset the figures in each available style, and then check them carefully to determining if they are what they are supposed to be.

At the bottom of the list you will see Default Figure Style, which usually has a check mark unless it has been changed. The default style in most fonts is Tabular Lining. Therefore, unless you change the default or manually change the figure style in any given document, this is what you will get. This is unfortunate because Tabular Lining Figures are only appropriate for vertical lists of numerals, which is a small percentage of typeset numbers. So be sure to explore the available figures in any font you are considering, and check that it has the one(s) you need.

 

F. Figures

Figures styles in Adobe InDesign are found at the bottom of the OpenType panel. If any are bracketed, they are not available in that font.

If you frequently use a figure style other than the typical Proportional Lining default, consider changing the default to the style you most frequently use (which in my case is Proportional Oldstyle).

In order to change this or any other default in most Adobe applications, open the app but with no documents open; then change the setting as desired, and quit the app. This will change the default for any new documents, but will not change anything in existing documents, which you would have to change manually.

 

*  *  *  *  *

Ilene Strizver, founder of The Type Studio, is a typographic consultant, designer, writer and educator specializing in all aspects of visual communication, from the aesthetic to the technical. Her book, Type Rules! The designer’s guide to professional typography, 4th edition, has received numerous accolades from the type and design community. She conducts her widely acclaimed Gourmet Typography Workshops internationally. Sign up for her free enewsletter, All Things Typographic, at www.thetypestudio.com.