Some Finer Points of Type. Some Finer Points of Type

Some Finer Points of Type. Some Finer Points of Type.

(Or, how to use dashes, figures, hanging quotes, and other typographic details) Let’s begin with some basics. Never put two spaces after a period.

(No matter what they told you in high school.) Never put two spaces after a period.

The Bliss Madonna, a glazed terracotta known in one The Bliss Madonna, a glazed terracotta known in one other example (see below), is a quintessential Luca other example (see below), is a quintessential Luca della Robbia work. Seen in half-length, the Virgin della Robbia work. Seen in half-length, the Virgin occupies a niche defined by gold-painted ribs against occupies a niche defined by gold-painted ribs against a turquoise ground. The frame is embellished with a turquoise ground. The frame is embellished with a floral design, and its upper corners are emblazoned a floral design, and its upper corners are emblazoned with the Bartorelli and Baldi coats of arms, likely with the Bartorelli and Baldi coats of arms, likely denoting a marriage between those Florentine denoting a marriage between those Florentine families.1 Turquoise is signally rare as a ground color families.1 Turquoise is signally rare as a ground color but encountered in other Della Robbia floral reliefs. but encountered in other Della Robbia floral reliefs. As if shying from an onlooker, the Christ Child As if shying from an onlooker, the Christ Child stands on the edge of the niche and leans in toward stands on the edge of the niche and leans in toward his mother, embracing her neck, while she supports his mother, embracing her neck, while she supports him with one hand on a foot and the other on his hip. him with one hand on a foot and the other on his hip. Their heads touch, but their blue gray eyes look out Their heads touch, but their blue gray eyes look out at the viewer. The Virgin’s thick mantle and robe and at the viewer. The Virgin’s thick mantle and robe and Never put two spaces after a period.

Use them if you must to avoid bad word spaces. Pay attention to the hyphenation and justification options in InDesign.

Use them.

A good rag is short, long, short, long, etc., in an evenly uneven and organic manner. Imagine that you have before you a flagon of wine. You may choose your own favorite Like so: vintage for this imaginary demonstration, so that it be a deep shimmering crimson in color. You have two goblets before you. One is of solid gold, wrought in the most exquisite patterns. The other is of crystal-clear glass, thin as a bubble, and as transparent. Pour and drink; and according to your choice of goblet, I shall know whether or not you are a connoisseur of wine. For if you have no feelings about wine one way or the other, you will want the sensation of drinking the stuff out of a vessel that may have cost thousands of pounds; but if you are a member of that vanishing tribe, the amateurs of fine vintages, you will choose the crystal, because everything about it is calculated to reveal rather than hide the beautiful thing which it was meant to contain… You will find that almost all the virtues of the perfect wine-glass have a parallel in typography. Type well used is invisible as type, just as the perfect talking voice is the unnoticed vehicle for the transmission of words, ideas… Printing demands a humility of mind, for the lack of which many of the fine arts are even now floundering in self-conscious and maudlin experiments. There is nothing simple or dull in achieving the transparent page. Vulgar ostentation is twice as easy as discipline. When you realize that ugly typography never effaces itself; you will be able to capture beauty as the wise men capture happiness by aiming at something else. The ‘stunt typographer’ learns the fickleness of rich men who hate to read. Not for them are long breaths held over serif and kern, they will not appreciate your splitting of hair-spaces. Nobody (save the other craftsmen) will appreciate half your skill. But you may spend endless years of happy experiment in devising that crystalline goblet which is worthy to hold the vintage of the human mind.

—Beatrice Warde, Lecture to the British Typographers Guild, October 1930 Some details… caps, small caps, and figures

these are small caps which fit nicely with lowercase letters. these are old style figures: 123456. To use small caps properly you must be working with a typeface that includes small caps as part of its family. Adobe Pro Open Fonts almost all include a small cap & old style figure set. abc DE1256 abcy xheight 1256 small caps full caps and lining figures old style or text figures Use old style figures 123 and small caps in running text so as not to make too jarring or bold an interruption to the overall color and texture of a page.

Like this: Because of its ascenders and descenders, the number 1683 looks better than 1683 when set in the midst of a paragraph. And 500 bce should probably also be set in small caps and old style figs. It’s more elegant than 500 BCE. Don’t you think? If you have to mention an acronym, such as YMCA or USSR in the middle of a page, the use of small caps is more harmonious and less abrupt, for example: “He stayed at the ymca when he went on a trip to the ussr in 1989.” This is less disruptive to the page. ps: Also note that the period goes inside the quotation mark. some fonts don’t include true small caps Many sans serifs don’t have small caps. When you use the “small cap” styling option in InDesign for a font without true small caps, you can create some not-so-pleasing visual irregularities:

Helvetica, for example doesn’t have true small caps. When you use the “fake” small caps InDesign allows, the weights don’t look quite right. You need to be very conscious of these details.

mple doe some fonts don’t include old style figures Many sans serifs also don’t have old style figures. As a result, numbers must be set as lining figures and often look too large compared to the text. You may want to reduce the size of the lining figures by 0.25 or 0.5 points.

January 1950 January 1950 these are “FULL” or “LINING” caps and these are lining figures: 0123456789 They align nicely with LINING CAPS 1975 Check your Open Type options in InDesign’s Character panel to see if you have old style figures and small caps available.

CHARACTER > SHOW OPTIONS > OPENTYPE letter space (tracking)

Please note, when using all caps or small caps, you should always add a little bit of letter space (tracking) around each letter since the forms of caps are very rectilinear and can look squeezed, requiring a bit of breathing room. This is especially true in serif faces. serif faces tracked 0 serif faces tracked 100 SERIF FACES tracked 0 SERIF FACES tracked 100 an example:

THIS IS RATHER TIGHT

THIS IS A BIT BETTER another example:

gotham light smallcaps without and with letterspacing

BODONI CAPS without and with TRACKING Please be extra careful when letterspacing lower case letters as it makes type harder to read AND BY THE WAY, YOU PRETTY MUCH WANT TO AVOID SETTING A LOT OF TYPE IN ALL CAPS. IT LOOKS RATHER LIKE HOW SCREAMING SOUNDS AND IS BUSY AND OFFENDS THE EYE. QUAM VER SECTE VELESSIT IPISSEQUISL UTPAT LUPTAT, VULLA FACCUMSAN HENISCI NCILIQUIS EX EROSTRUD MAGNA CON VER ALIT AD ER SENT LOR AD DEL IRILIT AT. IT WIS AUT DO ET IRIT WIS NUM DELIT NUM DOLUM NULLAM DO CONSED MAGNI ATUM IN ESTR MAGNISL ULLUPTATIO DOLOREM DOLORE LUPTATI ONSECTE TE COM drop caps and redundant caps

There Is An Old-Fashioned Tradition of using full caps and small caps together occasionally, often to designate the beginning of a paragraph. This is a stylistic choice reminiscent of early ornamental initial caps. Nowadays, it can look clunky and redundant so please use this style with the greatest discretion.

ikewise, drop caps can (rarely) be an elegant choice, Lbut as above, they are not really necessary. Be careful how you use them and avoid this sort of inelegant solution which creates awkward spacing. em and en spaces

This is an M (em) space. It is an empty square equal to the point size of the type. (In metal type it would be a slug of lead.) So here it would be 14 × 14 points. However, a 14 point letter is never actually 14 points in any dimension. The point size includes the empty buffer space above and below the letterform.

An en space is half an em. An en space is perfect when you want a slightly bigger space than a word space to express division, like, say in an address on a business card or letterhead: p r o v i d e n c e r i 02906 Space can often be used instead of punctuation.

EM SPACE = COMMAND + SHIFT + M EN SPACE = COMMAND + SHIFT + N Many of these measurements such as em and en space derive from the size of the face of a piece of lead type.

the entire body of this 14 point capital W would be 14 points tall em and en dashes

This is an em dash— We use it to indicate a pause—in speech.

EM DASH = OPTION + SHIFT + - (HYPHEN) An em dash often looks better—with a “thin space” or “hair space” on either side. An em dash often looks better — with a “hair space” on either side. Or — with a “thin space” on either side. See the difference? This can be done in two ways:

1. InDesign has an option to “insert thin space” or “insert hair space” TYPE > INSERT WHITE SPACE > THIN SPACE OR HAIR SPACE 2. Or you can simply adjust the kerning value on either side. Sometimes an em dash — feels too long and interrupts the overall tone of the line too much. It might look better if it were shorter, closer to an en dash, like this: – but no, that looks too narrow. It might be confused with a hyphen. How about this – ? Yes, that’s better – an en dash scaled 150% horizontally. note: This is one of the very few times that horizontal scaling is ok.

An en dash is typically used between dates and numbers, like this: Gertrude Stein, 1874–1946 or to indicate a range as in an index: pp 123–187

EN DASH = OPTION + - (HYPHEN) kerning

Kerning refers to the action of adjusting space between a pair of letters, particularly necessary when setting a headline or other display type.

Certain letter pairs require more consideration.

Washington In Turmoil After Yesterday’s Hurricane

Washington In Turmoil After Yesterday’s Hurricane with kerning adjusted Te Wo V. without kerning adjusted Te Wo V. ligatures

Always use ligatures (when available) especially when setting type in old-style serif faces. This is mostly automatic, but check the ligatures option in the character panel. ffi fl fi ffl

Here are some ligatures from Emigre’s Mrs Eaves: a b c d e f g h i j k m n o p q r s t u v w x y z

GO TO CHARACTER PANEL > OPTIONS > CHECK “LIGATURES” hanging quotes

“This is called a hanging quote because it hangs in the margin leaving the straight flush left edge '' '' nice and smooth. These marks are referred to as typographer’s quotes, or smart quotes. Do not use "dumb quotes" or 〞prime marks〞 by mistake. “ ” TO GET PROPER QUOTATION MARKS, GO TO INDESIGN > PREFERENCES > TYPE > CHECK “TYPOGRAPHERS QUOTES.”

TO HANG QUOTES, GO TO TYPE > STORY > CHECK “OPTICAL MARGIN ALIGNMENT.” and of course

Knowing when (and when not) to use quotation marks is essential. Refer to the Chicago Manual of Style, in print or online.

www.chicagomanualofstyle.org spec’ing type, or “specifying type”

8 / 14 (8 on 14) refers to 8 point type with 6 points of additional leading (8 + 6 = 14). This is from metal type where inter-line spacing usually came in 1, 2, or 6 pt “leads.” The type you are reading right now is: 16 / 24 Caslon Roman u/lc (upper/lowercase). word spacing

Something to avoid: large Something to avoid: large word spaces. For word spaces. For example, example, here — you could drive a truck here — you could drive a truck through these word spaces. When setting through these word spaces. your hyphenation tables, adjust the setting When setting your hyphena- to avoid hyphens when setting ragged right tion tables, adjust the text; and try to minimize hyphens in justified setting to avoid hyphens t e x t . ( B u t d o n ’ t s a c r i fi c e g o o d w o r d s p a c i n g ) . when setting ragged right Don’t hyphenate a word shorter than six text; and try to minimize letters, and don’t have fewer than three hyphens in justified text. (But letters preceding or following a hyphen. don’t sacrifice good word spacing). Don’t hyphenate The above is better: still justified, but a word shorter than six a smaller point size. This allows more letters, and don’t have fewer words per line. But now the leading is than three letters preceding too loose. or following a hyphen. Something to avoid: large word spaces. Something to avoid: large word spaces. For example, here — you could drive a truck For example, here — you could drive a truck through these word spaces. When setting through these word spaces. When setting your hyphenation tables, adjust the setting to your hyphenation tables, adjust the setting to avoid hyphens when setting ragged right avoid hyphens when setting ragged right text; and try to minimize hyphens in justified text; and try to minimize hyphens in justified text. (But don’t sacrifice good word spacing). text. (But don’t sacrifice good word spacing). Don’t hyphenate a word shorter than six Don’t hyphenate a word shorter than six letters, and don’t have fewer than three letters letters, and don’t have fewer than three letters preceding or following a hyphen. preceding or following a hyphen.

Note the pleasing rag:

evenly uneven, lines alternate

long, short, long, short. hyphenation + justification

75%, 95% and 105% are good values to begin with when adjusting your minimum, desired, and maximum word space within the justification table in InDesign’s paragraph panel, however this might change based on the type you are using.

When setting your hyphenation tables, adjust the setting to avoid hyphens when setting ragged right text; and try to minimize hyphens in justified text. (But don’t sacrifice good word spacing). Don’t hyphenate a word shorter than six letters, and don’t have fewer than three letters (ideally four) preceding or following a hyphen. single-line vs. paragraph composer

Experiment with this setting to see what gives the better result. Often Single-line is best for setting f/l rr text, and Paragraph Composer is better for justified type. When settingWhen a paragraph setting of type type you flush want left to be sure to check your hyphenation and justificationragged values right, and set it themis ideal to an not appro t-o have priate setting.to hyphenate This will affect at all.the wayYou words can are allowed to hyphenate, the rag of your paragraphs,turn and off the h densityyphenation of the text. in the para-

When settinggraph a palettparagraphe in of InDesign. type you This want to be sure to check your hyphen- depends ultimately on the length ation and justification values and set them to(measure) an appropriate of setting.the line This and will the affect the way words are allowed to hyphenate,size the ofrag yofour your type paragraphs,. Occasionally and big the density of the text. words must be hyphenated to When setting a paragraph of type you want to be sure to check your hyphenationavoid and justification large wvaluesord and setspac them toes an that will appropriate setting. This will affect the way words are allowed to hyphenate, theinevitably rag of your paragraphs, oc cur.and the density of the text. When setting a paragraph of type you want to be sure to check your hyphenation and justification values and set them to an appropriate setting. This will affect the way words are allowed to hyphenate, the rag of your paragraphs, and the density of the text. When setting a paragraph of type you want to be sure to check your hyphenation and justification values and set them to an appropriate setting. This will affect the way words are allowed to hyphenate, the rag of your paragraphs, and the density of text. WWhenhen setting setting a paragraph type offlush type you left want Garamond 12/14 x 17 picas to be sure to check your hyphenation and Justification: 50/80/100 justificationragged right, values it andis ideal set them not to toan haapprove- Hyphenation on to priate hyphenate setting. This awillt all. affect You the can way words are allowed to hyphenate, the rag of your turnparagraphs, off h andyphenation the density of in the the text. para-

Whengraph setting palett a eparagraph in InDesign. of type Tyouhis Garamond 12/14 x 17 picas want to be sure to check your hyphen- depends ultimately on the length Justification: 100/200/250 ation and justification values and set (measure)them to an appropriate of the line setting. and This the will affect the way words are allowed to hyphenate,size of theyour rag type of your. Oc paragraphs,casionally and big the density of the text. words must be hyphenated to When setting a paragraph of type you want to be sure to check Garamond 8/11 x 17 picas avoid large word spaces that will your hyphenation and justification values and set them to an Justification: 75/95/105 appropriate setting. This will affect the way words are allowed to hyphenate,inevitably the rag of youroc cur.paragraphs, and the density of the Hyphenation off text. When setting a paragraph of type you want to be sure to check your hyphenation and justification values and set them to an appropriate setting. This will affect the way words are allowed to hyphenate, the rag of your paragraphs, and the density of the text. When setting a paragraph of type you want to be sure to check your hyphenation and justification values and set them to an appropriate setting. This will affect the way words are allowed to hyphenate, the rag of your paragraphs, and the density of text. When setting type flush left ragged When setting type flush left ragged right, it is ideal not to have to hyphenate right, it is ideal not to have to hyphen- at all. You can turn off hyphenation in atet a all. You can turn off hyphenation the paragraph palette in InDesign. This in the paragraph palette in InDesign. depends ultimately on the measure This depends ultimately on the measure

(length) of the line and the size of (length) of the line and the size of your your type. Occasionally big words must type. Occasionally big words must be be hyphenated in order to avoid large hyphenated to avoid large word spaces word spaces that will inevitably occur. that will inevitably occur.

Gotham 11/24 FL/RR Gotham 11/24 JUSTIFIED w/ hyphens

Justification: 50/80/100 Justification: 75/95/105 When setting type flush left ragged When setting type flush left ragged right, it is ideal not to have to hyphenate right, it is ideal not to have to hyphen- at all. You can turn off hyphenation in atet a all. You can turn off hyphenation the paragraph palette in InDesign. This in the paragraph palette in InDesign. depends ultimately on the measure This depends ultimately on the measure

Gotham 11/24 FL/RR Gotham 11/24 JUSTIFIED w/ hyphens

Justification: 50/80/100 Justification: 75/95/105

www.typophile.com/node/36691 indentation

You do not need to indent a new paragraph if it begins at the top of a page or column and is preceeded by a line space. As here. Also, do not use tabs or spaces for indenting. Use the “first line indent” option in the control bar in InDesign. H HOTEL TYPE ONLY WORKS IN PARIS OR BAUHAUSTHE O T E L

T Y vertical type P E

Think about the relationship of each O N letter to the next, and the manner in L which the baseline organizes letters. Y Stacking type like a hotel sign is W O usually a path toward illegibility. R K If you must have vertical type, turn S it on its side thereby changing the I orientation of the baseline. N P A R I S be careful when using bold weights of old-style serif faces

It is usually considered a better practice to find an appropriatebold weight sans serif to accompany an old-style serif.

Most old-style faces, such as Bembo, Garamond, and Caslon, were originally designed in a single weight, without accompanying bold faces. Pair your old-style roman with a bold sans serif or a bold slab serif (such as Clarendon or Serifa). Or use a contemporary family with a wide range of weights, such as Whitman or Scala. things to avoid

Shading. Drop Shadows. Gradients. Outlines. And never alter type by stretching or horizontal scaling — never and almost never use negative tracking. never

things to remember

Pay attention to x-heights, stroke weights, and structure when combining typefaces. Pay attention to the negative shapes above and below lines of type to determine leading values, spacing, harmony, and coherence. Avoid minor contrast. Be confident and deliberate about any and all contrasting elements. Pay attention to word space, leading, and letterspacing — especially as they pertain to legibility. Avoid hyphens when setting rag-right typography. Justify type only when the ratio of point size to measure (line length) is enough to allow for good (tight and even) word spacing. Use old style figures within text when you can. Use true small caps. Letterspace words in all caps or all small caps. Love your type. thanks

The Elements of Typographic Style by Robert Bringhurst Finer Points in the Spacing and Arrangement of Type by Geoffrey Dowding Detail in Typography by Jost Hochuli

thinkingwithtype.com typophile.com typographica.org fontshop.com/education webtypography.net chicagomanualofstyle.org