Dynamic Graphics+Create Magazine
HOME   |   SUBSCRIBE  |   ABOUT  |   CONTACT US  |   NEWSLETTERS  |   CALL FOR ENTRIES  |   ADVERTISE  |   SUBSCRIBER SERVICES  |   WEBCASTS  |   JOBS
Topics
Webcasts
Newsletter
Subscribe/Renew
 
Purchase past issues to complete your library or to find the essential tips and techniques you've been searching for.
 
Tutorials
Create a halftone border in Photoshop.
Add a halftone drop shadow using Photoshop.
Downloads
Free high-quality high resolution photos.
JUPITERIMAGES SEARCH
Jupiterimages offers millions of quality photos, fonts, clipart images and animations!

 
Jupiterimages.com
Clipart.com
Photos.com
Animation Factory
internet.commerce
Join Partner Program
Typographic Details
Getting the small stuff right yields big improvements in your type treatments. 

by Allan Haley
June/July 2006

Good typography is about choosing the right typeface and point size, determining the best line length and column depth, defining hierarchy and emphasis— generally making text and display copy clear and easy to read. It’s the stuff you deal with daily. And that’s the problem. Because we work with type so frequently—usually under tight time constraints—it is difficult to keep track of all those details that separate good typography from mere words on paper. So try looking at type in a new light, as typographic hardscape and landscape rather than a myriad of separate details. Think of hardscape as the black stuff on white paper: letters, punctuation, figures, and symbols. Typographic landscape is the background and spacing around the hardscape.

Typographic Hardscape
Ligatures
Ligatures were one of the first typographic tools, having been around since Gutenberg came up with the idea of automating calligraphy. The most common are fi, ff, fl, ffi, and ffl. Many additional fancy ligatures, however, are also now being made available in OpenType versions of well-known fonts (see my article, “Typographic Spice Rack: Swash and Alternate Characters,” in the April/May 2006 issue, V11N2).

Ligatures have built-in spacing between the joined letters. When type is set with tighter- or looser-than-normal letterspacing, the built-in spacing between the ligature letters will make them stand out from the rest of the copy and look odd or awkward (see figure 1).

Some of the unusual ligatures now available in fonts should come with a caution statement. Typical ligatures, like the f-ligatures referenced above, fit in almost anywhere. Fancy ligatures work well in headlines, subheads, pull quotes, and short blocks of text copy. Liberally sprinkled through long blocks of copy, however, they make the text look fussy and contrived (figure 2). Stick to the basics for anything over 100 words.

Small caps
Small caps are capital letters drawn to, well, smaller proportions. The key word here is drawn. Small caps are not full-size capitals simply reduced in size. Small caps have been designed to be close in proportion to lowercase letters from the same font. Reduced-size regular caps look weak and spindly when set in conjunction with full-size or lowercase letters. If your content calls for small caps, they should be of the drawn variety (figure 3).

Figures
Lining figures are either the same height or are just slightly shorter than capital letters, and match them in weight and proportion. Lining figures work best when combined with caps and where legibility is more important than typographic aesthetics (figure 4). Any other time they look ungainly. Tabular figures are similar in design to lining figures, but are created with a single common width value to enable setting columns of figures that align. Save tabular figures for box scores and financial statements. See figure 5.

Old Style (sometimes called lowercase) figures are based on three forms: ascending for the 6 and 8; medial for the 1, 2, and 0; and descending for the 3, 4, 5, 7, and 9. Old Style figures perform best in text copy and other instances where the figures should blend in with surrounding letters (figure 6).

Periods
Adding two spaces after a period is called French spacing. Common in books before the 19th century, it became the norm for copy written with a typewriter. French spacing is now unnecessary and distracting— one space after a period is plenty.

Quotes
Whether it’s an annual report, church newsletter, or just a grocery list, don’t use “dumb quotes.” It’s a dead giveaway of a lack of typographic acumen.

Ellipsis
Use a real ellipsis rather than three periods. Periods space closer together than an ellipsis and create a darker image on the page (figure 7). In addition, ellipses are normally just slightly smaller than a period—again so they do not appear too large or too dark on the page.

Hyphens
Hyphens should have no additional space added to either side of the character. Another thing about hyphens: You don’t want a bunch of them stacked up in the right margin—it’s distracting to the reader. Some say there shouldn’t be more than two hyphens in a row. An even better rule is that there shouldn’t be more than two of any kind of punctuation in a row. Figure 8 shows how the offending result can look.

Dashes
Additional space is normally not put around em dashes. Very long em dashes, however, can be distracting in text copy. Sometimes, with a little space added to either side, an en dash can be used to replace an em dash. Figure 9 provides examples.

Em bullets
Em bullets are almost always too big. They should be limited to use with cap letters. See figure 10.

En bullets
En bullets center on cap height when they begin a line (see figure 11). They center on lowercase xheight when used with lowercase text.

En bullets are best set smaller when used with
• a typeface that has a small x-height
• a condensed typeface

Open boxes
Open boxes base-align when they are cap size or smaller. They center on the point size when they are larger than cap size. See figure 12.

Solid boxes
Solid boxes base-align when used full size. Use with care as they are almost always overwhelming.

Typographic Landscape
Word spacing
The best word spacing is something that isn’t noticed. Word spacing that’s too tight makes it hard for the eye to distinguish one word from the next. This, however, is almost never the problem—loose and uneven word spacing is normally the culprit. When there is excessive word spacing, copy can break into separate elements, forcing the reader to read individual words rather than phrases or blocks of copy. Figure 13 shows an example of how just two factors—column width and whether the copy is set flush or rag—can affect spacing and call for manual adjustment.

Assigning appropriate space between words is more of an optical determination than an exact science— don’t rely on the font or your software application’s default settings. The best word spacing will be affected by the proportions of a typestyle, letter fit, and point size of the setting. Some examples:

• A condensed type design needs less space between words than an expanded face.
• A block of copy with tight letterspacing needs less word space than a more openly fitting design.
• Larger point-size settings require less word space than smaller sizes.

A quick check to determine if there is too much word space is to turn the copy upside down. If one word can be easily distinguished from another, there’s too much.

Hang that punctuation
Punctuation should be outside a flush margin—on both the left and right side. When a line begins with a quote, and the punctuation is inside the margin, the line appears indented. If you’re setting justifi ed columns and a line ends with punctuation, the smooth column appears to be pockmarked (figure 14 shows an example of how the column should look with hanging punctuation). Initial letters beginning paragraphs almost always look better if hung outside the margin.

Not all software applications support hanging punctuation. If yours doesn’t—and good typography is your goal—you may want to think about switching to one that does.

Rags, widows & orphans
If you’ve gotten by Design 101, you know that rag refers to the irregular right margin of a block of copy set flush left. What’s important about a rag is that the changes in line length are minor. The best rags aren’t noticed.

A widow is a very short line—usually one word, or the end of a hyphenated word—at the end of a paragraph or column. Widows leave too much white space between paragraphs or at the bottom of a page. This interrupts the reader’s eye, disrupts the reading process, and can even deter comprehension.

Like a widow, an orphan is a single word, part of a word, or very short line, except that it appears at the beginning of a column or a page. The result is the same: It creates uneven visual alignment and can interfere with reading and comprehension.

Issues with rags, widows, and orphans can be corrected by manual line breaks and subtle rewrites. If the former doesn’t solve the problem—or creates another—try the latter.

It’s about optics
When you’re working in large type sizes, optical alignment is almost always more important than mathematical accuracy.

• Sometimes line spacing in headlines must be adjusted to look even. Ascenders and descenders can make lines of copy closer to each other than lines that have none (figure 15).
• Left-aligned headlines beginning with round or diagonal letters, or those beginning with letters that have a crossbar (T) or an arm (Y), should overhang the margin to look correct (figure 16).
• Punctuation in headlines almost always looks too large. A small reduction in the size of the marks will make things look better.

About the author
Allan Haley is the director of Words & Letters at Monotype Imaging. He is chairperson of AIGA Typography and a past president of the New York Type Directors Club.
Events & Courses


JupiterOnlineMedia

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info


Legal Notices, Licensing, Reprints, & Permissions, Privacy Policy.

Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

Solutions
Whitepapers and eBooks
IBM Whitepaper: Innovative Collaboration to Advance Your Business
Internet.com eBook: Real Life Rails
Avaya Article: Call Control XML - Powerful, Standards-Based Call Control
Tripwire Whitepaper: Seven Practical Steps to Mitigate Virtualization Security Risks
Internet.com eBook: The Pros and Cons of Outsourcing
Go Parallel Article: Scalable Parallelism with Intel(R) Threading Building Blocks
Internet.com eBook: Best Practices for Developing a Web Site
IBM CXO Whitepaper: The 2008 Global CEO Study "The Enterprise of the Future"
Avaya Article: Call Control XML in Action - A CCXML Auto Attendant
Go Parallel Article: James Reinders on the Intel Parallel Studio Beta Program
IBM CXO Whitepaper: Unlocking the DNA of the Adaptable Workforce--The Global Human Capital Study 2008
Adobe Acrobat Connect Pro: Web Conferencing and eLearning Whitepapers
Go Parallel Article: Getting Started with TBB on Windows
HP eBook: Storage Networking , Part 1
MORE WHITEPAPERS, EBOOKS, AND ARTICLES
Webcasts
Go Parallel Video: Intel(R) Threading Building Blocks: A New Method for Threading in C++
HP Video: Is Your Data Center Ready for a Real World Disaster?
Microsoft Partner Portal Video: Microsoft Gold Certified Partners Build Successful Practices
HP On Demand Webcast: Virtualization in Action
Go Parallel Video: Performance and Threading Tools for Game Developers
Rackspace Hosting Center: Customer Videos
Intel vPro Developer Virtual Bootcamp
HP Disaster-Proof Solutions eSeminar
HP On Demand Webcast: Discover the Benefits of Virtualization
MORE WEBCASTS, PODCASTS, AND VIDEOS
Downloads and eKits
Microsoft Download: Silverlight 2 Software Development Kit Beta 2
30-Day Trial: SPAMfighter Exchange Module
Red Gate Download: SQL Toolbelt
Iron Speed Designer Application Generator
Microsoft Download: Silverlight 2 Beta 2 Runtime
MORE DOWNLOADS, EKITS, AND FREE TRIALS
Tutorials and Demos
IBM IT Innovation Article: Green Servers Provide a Competitive Advantage
Microsoft Article: Expression Web 2 for PHP Developers--Simplify Your PHP Applications
Featured Algorithm: Intel Threading Building Blocks - parallel_reduce
MORE TUTORIALS, DEMOS AND STEP-BY-STEP GUIDES