Category Archives: Using Type

Making Do When Accented Characters are Missing

Making-Do-When-Missing-Accented-Characters-1
You flow in your text, and then you notice something odd. Not all the characters made it. In their place, a disruptive, boxy, Not Defined character.
Making-Do-When-Missing-Accented-Characters-2
Yes, it’s a problem you generally get only when the fonts you’re working with contain limited standard (non-Pro) character sets. The best way to deal with it is often always to upgrade to a font with a Pro character set, but, when you’ve got to work with what you have, you make do. In case you didn’t notice the blips in the text above, they’re marked below:Making-Do-When-Missing-Accented-Characters-3
In this example, the accented character that’s missing up top is a lowercase a with macron. If we look in the Glyph palette, there’s a macron waiting there for us, all by itself. We type in the a, then double click the macron to insert it after.
Making-Do-When-Missing-Accented-Characters-4
Put the cursor in between the two, and kern them closer until the macron is in place. Simple. Now do it for all accented characters that are missing. Now replace all instances of the newly fabricated characters with their replacements.
Making-Do-When-Missing-Accented-Characters-5

When is this a bad solution?

Almost always. If, for example, it’s a print piece and you’ve got control of the entire process, and the substitutions are relatively few, go for it. Otherwise, you run the risk of having to make and remake these fixes with every revision’s reflow of the text. And on the web, in a PDF or whatever, indexing engines will choke on your fake characters.

Say it’s for print only, isn’t there a smarter workflow than the above?

Potentially, yes. You could flow all your text in, set it in a system font so that all characters are represented, make that into a paragraph style, and carefully set up some GREP styles that substitute the missing characters with their tightly-tracked replacement characters (which each have character styles applied to them). Yeah, or something like that. It gets kind of dicey applying styles on top of styles. And your spacing is bound to be thrown off slightly on the right side of the substituted character.

When will I most likely need to pull a stunt like this?

Proper nouns, such as author names, are often the sneakiest kinds of information that come bearing requirements for glyphs that even your Pro fonts may not have in stock.

We’ll wrap here. Thanks for reading everyone. What questions am I missing? And thanks also to Century Expanded Std for its lead role in today’s story, as well as a thanks to Peter Verheul’s Versa Sans. Using Type continues here Thursday.

Kerning Defaults: Metrics (or Auto), Not Optical

Just to make it extra clear while we wrap the subject of kerning, I do have a preference on kerning defaults, and you should too.

Picture 3

The main message of last week’s piece on kerning is that you should only kern what you have to. Take advantage of the kerning that comes built into your fonts. Do this by setting your default kern settings to Metrics in InDesign, and Auto in Illustrator. Don’t set your default to zero, and don’t set it to Optical.

But Optical sounds so nice.

It does. It’s alluringly named. Here’s what zero does, and what Optical does: Setting the kerning value to zero ignores the kerns in the font data. Setting it to Optical ignores the kerns in the font data, and essentially makes a spacing exception between every character, meaning that it’s more than the troublesome pairs who need it that get kerned, everything gets kerned by a robot that’s not very good at kerning.

Picture 2

The above is InDesign kerning FF Legato based on—respectively—the font’s metrics set by its designer, the font’s spacing values only (no kerning), and based on an algorithm that discards both spacing and kerning values and comes up with its own. Note how Optical sets WA a little loose, and LT and ER tight?

For display work, you’ll probably be able to spot this stuff and fix it. But what I really worry about is when Optical kerning is applied unknowingly and nobody catches it—in body copy. At text sizes, Optical kerning leaves things kind of tight overall and otherwise just slightly off.

How do I set the kerning default to Metrics?

Picture 1

Open InDesign without any documents open. In the Character palette, set the kerning field to Metrics. All done.

Aren’t we making a lot of assumptions here?

Only a couple. One—that the fonts you use most are good. Two, that when you could potentially benefit from Optical kerning, that you’ll know to switch over from your default.

That’s it. Catch Using Type here Thursdays.

Basic Kerning

When type designers draw type, the amount of space each character (or glyph) takes up is carefully set. This includes not only how wide the character is inside its box, but how wide the box is, or how much space is required on either side of the character. Done well, a typeface’s spacing maintains a consistent rhythm between positive and negative forms and along with the letterforms themselves gives the face its texture and distinct color. Its spacing values are intended to work under general conditions, like with like, (meaning lowercase with lowercase, figures with figures, etc.) and within a given size range. Of course, general conditions often don’t apply.

Kerning-Basics-1

So what’s kerning?

A kern is a spacing exception. Kerning is determining which specific pairs of letters (or glyphs) need adjustment to their spacing, and either tightening or loosening the spacing by adding a negative or positive spacing value, respectively. Generally speaking, all professional fonts have kerning built in. Some designs rely very heavily on kerning, such as script faces or tightly spaced display faces. Some, such as monospaced faces, require no kerning. Most text faces, I’d say, employ kerning only to fix the major problems, such as the large gaps in To, Ta, Vo, Va, etc., and to cause punctuation characters such as dashes and commas to land in the correct spot. See below that when the cursor is placed between the T and o in Valentin Brustaux’s Tiina that the kern value is -64 units. The value is in parentheses because it’s supplied by the font’s Metrics, which should be your default in this field. I mention all this just to reiterate that in most cases, the kerning has been done for you. From there, whether it’s suited to your taste or up to the task you give it is largely a matter of your, the typographer’s, discretion.

Screen Shot 2013-09-05 at 5.55.24 PM

When do graphic designers kern?

Kerning is commonly required when a typeface is being used at a size or scale outside the range for which it was designed and tested. It’s also advisable to check and perform kerning when the tracking or letterspacing of the type you’re working with has been adjusted. Lastly, when you’re stuck with it, you’ll need to kern stuff that wasn’t done properly or at all.

Wait, what’s tracking?

Tracking, or letterspacing is the uniform addition or subtraction of space between all characters in question. In the Character dialog above, it’s the zero value just to the right of the (-64) kerning value. Track type open by highlighting it and using the key command Alt + Right Arrow.

Is it time to kern something yet?

Yes. We’re taking this word ‘WOULD’ set in Mark van Bronkhorst’s Sweet Gothic and kerning it so that it works better large. Note that at the small size it works great, but in the large size immediately following, it begins to fall apart.

Kerning-Basics-3

To remedy this I track it tighter (shown in the second large sample above) but there’s still something wrong with it. See if you come to the same conclusions by first observing with your own eyes and then highlighting to reveal mine in the hidden paragraph below.

Making it tighter created some new problems. The space between W and O needs to tighten up some. Also the LD combination now feels kind of tight, and needs a little extra space.

Kerning-Basics-2

There. The top part of the above image remains the same for reference, but the bottom portion is now kerned consistently with my findings above. The word is still somewhat loosely spaced, but unified throughout.

How did we get from there to here?

There are differing techniques, but the main idea is to look at the composition the word or line creates as a whole. If that’s too much to focus on at once, try looking at three characters at a time. When you find a pair that needs adjusting, just put your cursor between the two characters, and Alt + Left Arrow to kern tighter, Alt + Right Arrow to kern looser. Remember to refresh your eyes occasionally by printing out your work or changing the distance between you and your screen. Sometimes it helps to focus on just the form by decoupling form from its meaning with a shift in orientation. Look at it upside down or backwards for a second opinion. You can, by the way, overdo it. The 1970s were marked by a generation of overwrought ad comps. Not to suggest that that particular approach was wrong, only that it’s now tied to a specific period, and, in retrospect it seems to have sacrificed purpose for style. I’m of the more pragmatic school of thought that function should take precedence, and that kerning, when done right, should remain invisible.

What else do I need to kern?

If you’re using multiple fonts on the same line, chances are good you’ll eventually run into a combination that needs kerning. That goes even for a Roman and italic of the same typeface; there’s still no way to kern between fonts. (Though there are some crazy ways to put multiple typefaces into a single font and kern all those with each other.)

Okay, that’s it. Please add your questions. I’m also taking requests. Using Type continues here Thursday.

CSS font-size Property

Just so you know, we’re not all print all the time here at FontShop. In fact a great majority of my work here has been conveyed solely over the internet. In terms of graphic design, print’s my first love, but I distinctly remember some time in late 2009 that I heard something about webfonts, the canvas element, pseudo-selectors, transitions, and a number of other experimental and not-widely-supported web technologies, and thought, ‘I need to really dig down into this stuff.’ One ambitious autoinitiated web project later (it was something similar to Readability, before I knew it existed, indeed, perhaps before it did exist), and I was happily up to my nose in markup, CSS, JavaScript, and preprocessing, feeling good about the direction of the internet and electronic media in general.

Picture 1

Since then I’ve tried to keep up with at least the aspects that touch web typography, but I’m not a current practicing web designer, or a specialist in web composition. That distinction goes to people like Eric Meyer. I am though, like most typographers, a natural fiddler and figure-outer, and so briefly I’d like to share one tiny but important practice regarding sizing type on the web.

body { font-size: 100%; }

This is it. Start by specifying the font-size as 100%. Assuming that you are capable of controlling all other viewing conditions, this is the equivalent to specifying 12pt, 16px, 1em, the keyword medium, or its associated number value, 3. Actually, after testing it, I would never recommend using those old html number values, but the rest hold up. From here, all other font-size specifications should be in em units, e.g. this: h1 { font-size: 3em; }

So why percent? And why 100%?

First, percent holds up where the others don’t, namely in not interfering with font scaling, user overrides, and not wrecking everything in older browsers. About 100: It behaves predictably, and it’s large enough to comfortably read on just about any screen. (The text you’re reading now is set to 100% or 16px.) A caveat: There’s a strain of thought regarding font-size that says 16px is an unusual reference size, so why not shift the scale so that 1em is the same as 10px, 1.4em the same as 14px, and so on? To do so, divide 10 by 16, and set your body font-size at this percent, 62.5%. Then set subsequent elements in relation to this, in em units. This is easily achievable and works reliably in most browsers, but still gives you problems in the older browsers. So weigh your options, and stick with what you know works in the majority of cases.

Speaking of sticking with what works, you should also consider doing the opposite: abandoning older browsers for newer ones, taking advantage of newer CSS functionality, and letting a service such as Modernizr or Sass deliver more primitive CSS to the old browsers.

Hang on, what kind of new CSS functionality?

One that directly relates to this subject is calc(), which lets you do simple math in your CSS. It’s really handy for specifying fractional units simply, and for mixed-unit calculations. Another is a new unit of measure, rem, which unlike em, functions as a constant, referencing the root em rather than the em specified in the parent element.

So what size is it going to be, really?

We’ve arrived at the saddest part of this piece on sizing. At this point in time there’s no definitive answer. With screen resolutions all over the place, a pixel is not a pixel is not a pixel, and while absolute units such as the point, (1 in = 72 pt) ought to stay absolute, apparently doing so would break old designs, and we’re stuck with them being reduced to the task of stand-in multipliers for relative units. So an inch is 96 reference pixels, a point is 1.333333px, and a physical pixel may be anywhere from 1px to 2px or more in reference pixels.

The good news

Scale-2

If there’s anything I’ve learned about web standards in the past five years, it’s that people who care about this stuff are in a position to set the standards. At TypeCon in Atlanta back in 2009, there was a panel discussion about what form commercial webfonts would ultimately take. It was less than a year after that that all major browsers were planning to support the new format, woff. Standards bodies followed the lead of the browsers. So ultimately we’re the ones driving this.

That’s it for now. Thanks to Pieter van Rosmalen’s Nitti for setting this week’s nameplate. Using Type continues here Thursday.

Widows, Orphans, Keep Options

This will be very brief and to the point.

Using Type

Orphans are stranded bits of copy, a single word occupying its own line, such as the word type, above, at the top of the right column. Widows are longer bits of copy, a few words perhaps, occupying a single line that’s become estranged from its native text column, pushed to the top of the next column, alone.

Left unresolved, the presence of widows and orphans reveals to the reader the inattention of the typographer. They throw off the margins; they call undue attention.

Keep Options

In InDesign you can specify a minimum number of lines allowed to break between columns. To do it, apply a paragraph style to the paragraphs you’re working with and set the number of lines in the Keep Options page of that paragraph style’s dialog.

Keep Options in InDesignNote that the default Keep with Next value, 0, is probably best to keep at 0 until you know what you’re doing with it.

There. The two lines jumped over to clothe, feed, house, and otherwise eliminate the orphaned status of this previously lost word, type. Solved, right? No. What we’ve covered here is really just one aspect of the craft. The art of typography is creating the kind of flexible compositions that absorb the shocks—both of the problems, as well as those created by their solutions.

Picture 7

Look at the hole left behind in the left column created by our keep options. To fill it, we may have to bump something from a previous page, arbitrarily resize the text frame (and perhaps its surrounding text frames), try something funny with the leading or tracking, italicize some foreign words, or otherwise do some good old-fashioned copyfitting. Or, as I often do when setting longer works, most or all of these. A good layout will permit this kind of editing.

Okay. That’s it. Thanks to MVB Verdigris for setting our examples. Using Type continues here Thursday.

All Caps feature, Braces, Brackets, Parentheses

Just a quick review of a feature today, and by association, some notes on punctuation.
All-caps-feature,-braces,-brackets,-parentheses-1
Roman caps have a single descender, generally speaking; That’s Q. And that means that parentheses, or brackets, etc. that are designed for general usage tend to miss their mark when enclosing copy set in all caps. The lack of descenders causes the braces to appear out of touch with what they are attempting to enclose.

All-caps-feature,-braces,-brackets,-parentheses-2

Manually adjusting the height of the brackets in InDesign (as I did above) is one option. There is a better way, and one feature in particular (common to Pro font packages) I’ll highlight here. It’s the All Caps feature.

Screen Shot 2013-08-08 at 5.31.15 PM

When setting type in all caps, just highlight it, hit Shift + Command + K (Mac) or Shift + Control + K (Windows) and if the font supports the feature, the punctuation will spring into place. (Of course, not all fonts do support this feature, nor would all necessarily benefit from having it. Some fonts have punctuation that works fine for lowercase, uppercase, small caps, etc.) Speaking of small caps, enabling that feature may reveal an additional set of contextual punctuation, as well as change the figures to a set more appropriate for an all cap or small cap setting.

All-caps-feature,-braces,-brackets,-parentheses-3

Above is Jordi Embodas’s Bulo, top, and Tim Ahrens’s JAF Bernino Sans, bottom, with All Caps and Small Caps features applied to different segments of each line. Note how Bernino Sans All Caps feature takes the cap height down slightly, handy for setting things like acronymns.

Screen Shot 2013-08-08 at 4.58.00 PM

How does one check if these features are available in a given font? Check the Case-sensitive Forms box while testing some brackety punctuation. (Select the gear icon first.) The above is set in Frode Helland’s delicate Vinter.

On the grammatical usage of parentheses, brackets and braces—this varies by culture and convention, but the general rule to follow for American English usage is that parentheses are a first resort, and curly braces are the last, (each [nesting {inside} the] other) when necessary. (If a sentence is contained completely by parentheses, the period at the end is as well.) In math, the order of which set to resort to is the same, but its nesting order is just the opposite. {[()]}. British math is prettier: [{()}].

That’s it. Using Type continues here Thursday.

GREP and Styles

Just a few last things to touch on regarding GREP in InDesign. Last week’s piece went over the basics.

GREP-1

Apply a style

One of the great features that InDesign’s Find/Change dialog offers is the ability to apply styles to what you find. Speaking of style, if you’re not all that familiar with the difference in usage between paragraph and character styles, I recommend looking back over the piece on understanding styles, and a related exercise.

So, say I want all numbers to be sized down by a half a point. First, highlight one such number, size it down appropriately, and keeping it highlighted, create a new character style called, say, fig.

Next, open the Find/Change dialog (it’s under the Edit menu), make sure you’re on the GREP tab, and in the first field, type in \d. Then, in the Change Format field, select fig, the character style you just made. Hit change all, and you’ve now applied the character style to all digits everywhere in your document. (You can change the scope of your finding/changing in the box below the Change to field.) You can also (obviously) narrow the scope of your search by specifying a paragraph or character style in the Find Format field.

Grep style

That’s great, but it still means I have to remember to go back through these steps at the very end of modifying my document in order to catch any digits that weren’t previously converted.

Not necessarily. With Grep styles, set up the rule, and it will automatically be applied when anything changes. To illustrate, let’s apply a character style that turns on the OpenType fractions feature whenever there are fractions in a document.

This all happens inside a paragraph style’s settings dialog, so let’s make sure we’ve got a paragraph style already set up. Okay, I made one called Entry and applied it to all the rows in a table of fractions and their decimal equivalents.

Screen Shot 2013-08-01 at 4.52.30 PM

Next, I turn on the fraction feature through the OpenType menu in the Character palette. Then I keep that fraction highlighted while I create a new character style called Fraction.

Last, I go into Entry’s style settings, create a new GREP style, and apply Fraction to the following expression:

\d*\/\d*

Just to decode the regular expression above, that’s \d any digit, * occurring zero or more times (applied to the thing immediately before the asterisk), followed by \/ a slash (typed backslash slash), followed by the same thing at the start, zero or more digits, \d*

Screen Shot 2013-08-01 at 5.15.12 PM

Line it all up with some decimal tabs, and that’s it. The examples today are set in Jordi Embodas’s Pona. Using Type continues here Thursday.

GREP-Styles-2

PS. I’ve sat through a number of talks that encourage designers and developers to learn each others’ skills, and inevitably during the question and answer period the designers ask where to start with programming. My answer? Start wherever you’re comfortable, whether that be editing markup, such as HTML, or writing some javascript in an online environment such as CodePen, but somewhere early along the way, learn something about regular expressions. You’ll find that using them trains your mind to think logically, and that when understood, they can save you a lot of effort. By the way: how do you use regular expressions?

Find and Replace, GREP

Find-and-Replace-3

Alright, this isn’t necessarily about using type—more like using text—but hang with me and you’ll find the information is still applicable if not ultimately very handy. Much of the initial work of typesetting is rearranging and stripping the junk out of your text, including removing that pesky second space after each period.

Find and Replace

The way most go about it is to replace two spaces with a single space, and repeat the action until the search reveals no matches. You’ve likely grown comfortable with Find and Replace by now, but if your text editor allows for finding and replacing with regular expressions, (InDesign does) you may be surprised by the added potential this offers you. Combined with InDesign’s additional ability to apply paragraph and character styles, you’ve got a powerful tool at your disposal.

Slightly more advanced

Grep, a popular term for searching, finding and replacing text that fits a given pattern, allows you to do the above example in a single step, among other, much more complicated and ostensibly more useful things. In InDesign, GREP sits beside the Text Find/Change dialog, looking inconspicuously similar. The below example shows how to find a period followed by one or more spaces, and replace that pattern (or expression) with a period and a single space.

Grep two spaces after a period

Above To find the period, precede it with a backslash (the period has its own special meaning in regular expressions; the backslash says, “nope, just looking for a plain old period,”). This is followed by one space, a second space and an asterisk, (meaning one space, followed by zero or more spaces). When this expression is found, we change it to a period followed by a single space. Similarly this method can be used to replace multiple paragraph breaks:

\p\p*

with a single paragraph break:

\p

or any similar simple substitution.

Replace it with the thing I found

Sometimes when I’m finding and replacing, the thing I want to put in the Change to field is based on what I just found. Say I’ve got a list of names, Last comma First, e.g. Tanner, Jerry; that I want to change to First Last, Jerry Tanner. With Grep, just specify that everything preceding the comma is the (first pattern), everything after is the (second pattern), and then change it to (second thing) (first thing).

Picture 1

Above I use a simple expression: One pattern of zero or more characters, followed by a comma, space, and a second pattern of zero or more characters. The period means any character, with certain exceptions. The two patterns are grouped in parentheses, making it possible to recall them later in the Change to field. Dollar sign 1 is the first pattern in the expression, which we put last. The comma space we ignore. And the last pattern we put first with dollar sign 2. Since the period character doesn’t include paragraph breaks, all we have left to do is hit Change All. Before and after below.

Find-and-Replace-2

With this level of knowledge, you’re ready to hack into all kinds of text files, turn hyperlinks into labeled URLs, you name it. Next week I’ll go into a bit more styling, including how to apply styles with this and the paragraph style dialog.

In the meantime, how does one learn more about Grep? Adobe has a good resource page on Grep specific to InDesign. There’s also a great general beginners guide  written by Jan Goyvaerts I recommend. Some potentially unfamiliar terminology such as escape and literal will pop up here and there, so keep a programming reference handy, or Wikipedia. Study up on what Grep can do, and you’ll find there’s almost no bottom to the complexity, but—and I’m warning you—don’t get caught up in it. A working understanding of the basics will immensely improve your ability to find and change text. From there, it’s a long descent into the weirdness of cold hard logic and diminishing marginal returns.

Thanks for reading. Using Type continues here Thursday. Thanks to Nicole Dotin’s Elena and Thomas Gabriel’s Premiéra for the illustrations.

Whitespace and invisible characters

One thing I’ve been meaning to create as part of Using Type is a heightened visibility for the invisible, non-printing, and otherwise under-appreciated formatting characters that happen to not make any marks on the page, but do happen to contribute quite a lot to our reading experience.

Whitespace-5

Whitespace characters

Let’s start with space. A most frequently employed character, space has the largest key on the keyboard. Its width is set by the type designer to optimally divide words on a page. The dead giveaway in a novice-designed typeface: the space is almost always much too wide.

The em space is as wide as the type size is high (an em space in 12 pt Bodoni is 12 pt wide), quite a generous gap should you require it. Letterpress printers traditionally begin each line with an em space, called an em quad. The en space is half an em space in width, and from the em you divide the rest of the fractional space units such as third space, quarter space, etc. The hair space is the narrowest of the spaces, a size down from the thin space, and the two are commonly used hemming in either end of an em dash, or between the initials in a name such as E. B. White’s. Okay, technically there are spaces and similar characters narrower than the hair space, because they’re zero-width non-spacing spaces—very useful in languages that run all together without explicit word spaces (Have I ever even heard of one of these? I know I’ve heard its spoken english equivalent.) but until today these have remained pretty far off my radar.

For setting numbers the figure space can come in handy, its width the same as the zero character. Similarly the punctuation space is set to the width of the period or comma. Anyone know what this one’s traditionally used for?

The non-breaking space, or no-break space does more than push apart words, it also binds the words (or neighboring word-like elements) on either side of it together, so that if one word breaks to the next line, they both do. These are helpful when things like proper nouns or phone numbers flow in a column of text, and you don’t want the entity to be line broken. I mentioned this last week, but you may not have caught it. Applying a no break character style is another way of accomplishing this behavior. Just highlight some text, from the top right menu of the Character palette, select No Break, and then keeping that same text selected, create a new character style. Apply this style to another bit of copy, and now any spaces or hyphens in it will act as non-breaking spaces, or non-breaking hyphens.

Break

Whitespace-1Paragraph break (hard return) is the most familiar of these. Paragraphs in InDesign are delineated by the single press of the return key. (There are no hard returns inside paragraphs.) Unless you’re being lazy on purpose, don’t insert multiple hard returns in a document as a means of adjusting vertical spacing. Just adjust the spacing.

The forced line break (soft return) is a good solution for arbitrarily kicking the remainder of a line down one without breaking the structure of the paragraph. If you have a paragraph style applied, soft returns, typed Shift + Return on the Mac or Shift + Enter on Windows, maintain the style over the multiple broken lines.

Column break also ends a paragraph, sending the text below it to the top of the next column. On the Mac, access this by striking Enter on the number keypad. Similarly, text frame break, page break, and some I wasn’t familiar with exist in InDesign, odd page break, and even page break send the text below it to the top of the next frame or page or whatever as is given in the name of each.

Format & Positioning

Center-aligned tabTabs are fantastic for organizing tabular information. (They’re not very helpful at all on the web, though the web has other means of handling similar requirements.) I’ve written a short piece on the proper use of tabs that I’ll refer you to since they’re pretty versatile.

Whitespace-2The indent to here character hardly gets the attention it deserves. See it above, just preceding the word built; at the top of the indent. I use it all the time in conjunction with the tab character to simplify formatting of short documents down to a few keystrokes. Try it out yourself. Just click in the middle of a text column in InDesign and type Command + Backslash. (Mac) or Control + Backslash (Windows). The technique can be used for ex-dented text, hanging punctuation, or plain old columnar formatting. For longer texts working across multiple paragraphs, I recommend achieving the same effect with first-line indent and paragraph indent paragraph styles, since they don’t require the insertion of special characters.
Whitespace-3
When used inside a paragraph whose alignment settings are specify to Justify all lines, flush space is a gaseous space that expands to take the shape of its container. If you only use one flush space on a line that contains several other normal spaces, the flush space will collapse the normal spaces and word spacing down to size, and occupy all the rest of the available space.

End nested style here is another one I didn’t know about until today’s looking around. It doesn’t force InDesign to stop using a nested style just by virtue of inserting it somewhere in the middle of a paragraph style that makes use of nested styles. It rather serves as a custom marker character that can be referenced by InDesign’s nested styles settings, in the same way you can reference a soft return (forced line break) or tab, or whatever. The difference is that the end nested style here character can fit anywhere, even in the middle of a word without disrupting the flow of things. That’s it. Thanks for reading, and thanks to Dan Reynolds’s Malabar for the illustrations. Using Type is a regular Thursday series.

End of story

Hyphen, En Dash, Em Dash, Minus

Hyphen-1I’m moving along to more lookalike punctuation today, since I’m eager to see what new things I can learn writing on these. On a high level note, let me say that what I’m sharing today is language- and culture-specific and therefore not universally applicable, and subject to change. I should also mention that this is a fuzzy area that tends to test the boundaries and overlaps between typography, language, and grammar.

Hyphen

Hyphen-2You probably know the most common uses of hyphens, the stubby, multipurpose half-dashes. They push apart and tie together suffixes, prefixes, words, and phrases. The often-derided mark, hated for its careless and prevalent misuse, has quite a few proper uses, hyphenation for one. Throughout this piece I’ve attempted to use hyphens in just about every way hyphens are commonly used. Maybe not E-V-E-R-Y S-I-N-G-L-E way, since some are kind of annoying. All the characters described below could potentially, and are frequently represented by hyphens.

When instructed to do so, layout software may insert hyphens, according to a hyphenation dictionary, when a word’s length suggests that it break from one line to the next. Non-breaking hyphens, useful in things like phone numbers or hyphenated proper nouns, ensure that these elements won’t be line-broken by hyphenation algorithms should they too closely approach the edge of the text column. Be particularly wary of hyphenation when it can critically alter the meaning of some unique identifier, such as a URL, e-mail address, etc.. There are other ways of keeping this hyphenation-prone info unbroken, such as by applying a ‘no break’ character style (or on the web, specifying white-space: nowrap; to the element’s style).

Hyphen-3Discretionary hyphens serve as a kind of override to InDesign’s hyphenation system. The easiest way to see how they work is to find a word that’s been hyphenated and insert a discretionary hyphen nearer the beginning of the word. The cursor above (fourth line, near the end) inserts a discretionary hyphen giving the below result. You can do this in InDesign via Type > Insert Special Character > Hyphens and Dashes > Discretionary Hyphen, or keyboard shortcut: Command + Shift + hyphen (Mac), or Ctrl+Shift+hyphen (Windows). These are ‘soft’ hyphens by the way, meaning that unless the word is sufficiently close to the edge, you won’t see any difference in behavior. (With hidden characters visible, you’ll be able to see it.)

Hyphen-4And lastly, you can use two hyphens in place of an em dash—if, say, it’s set in a monospaced font.

En dash

Hyphen-10The en dash is longer and generally not as heavy a stroke as a hyphen and suggests a range between two specified points. We’re open 7–11, Mon–Fri, etc. How you typeset your en dashes, whether flush or with a hair space between its neighbors, is up to you or the applicable style guide you may be required to follow for a given job.

Em dash

Hyphen-9“Let’s just forget about the em dash and leave it to Victorian literature,” or something like that is what I recall being the thrust of Robert Bringhurst’s feelings on the subject. The em dash is the longest of the dashes, used primarily to preserve in time one thought—while momentarily breaking off into a different direction—before returning. Or not. I think Bringhurst’s main quarrel with the mark is that it’s too disruptive, because it’s too long. Some suggest that we just replace it with a suspended en dash – a fine alternative. Another just as good alternative? Provided your em dash is a simple rectangle, you can scale it to whatever length necessary, set up a character style, and apply it to all em dashes in your document.

And a general note to people who use a hyphen with no spaces around it to signify an em dash—you are headed for a misunderstanding. The general layperson workaround is to type two hyphens in succession. I’ve also seen this handwritten far too many times.

Minus

Hyphen-8For typesetting math, use the minus sign as an operator, or for specifying negative numbers. Often, typographers will use an en dash if there’s no minus sign in the character set of a given font, or if they’re too lazy to go looking for it, but not lazy enough to use—well, you know.

That’s it. Thanks to Tobias Frere-Jones’s Griffith Gothic for setting today’s examples. Using Type continues Thursday.

Wedding Typography: Sending the Files off to the Printer

Sending-Files-Off-1

Getting everything to your printer so that he or she can create the invitations begins with checking your output. Last time we talked about saving to, exporting, or printing to PDF (from a number of non-design apps). If you’re a designer, you know this is the norm when working with printers. We’ll now take the PDF you produced, give it a quick review and note a couple of common problems to watch out for.

Sending-Files-Off-2

File size

If your PDF file contains just text on a white background, the resulting file should be relatively small, a few hundred KB maximum. (If it includes, say, a large photo, it should be ~a few MB.) But if it doesn’t have any photos, it should definitely be below a MB in size.

Verify resolution

Sending-Files-Off-3

Open up that PDF and zoom way in. Above, I’ve made a side-by-side comparison to show what it shouldn’t look like, and what it should. On the left, the type is rasterized—turned into pixels at a fixed level of zoom. On the right, the type is made of vector shapes—so now matter how far you zoom in, the contours remain crisp and solid. If you’re getting the problem on the left in your PDF, you’re probably using photo-editing software such as Photoshop to save your PDF. Instead, use either a professional layout program such as InDesign, or a non-design program that’s capable of delivering similar results.

One final check

Sending-Files-Off-4

Just to make sure the fonts were properly embedded into the final PDF, it’s helpful to view it on a computer that doesn’t have those fonts installed. If when you check, the type shows up in a default font, such as Times New Roman instead of the desired ones, it means the fonts you specified didn’t embed properly. What now? It may be easiest to try the process in a different program, or call in a graphic designer who can likely help you resolve the problem with minimal effort.

Nice to have

After sending off the PDF, if at all possible have the printer send you a physical proof before production begins. This used to be the norm but now it’s more rare due to distance between printers and their customers.

Thanks Ramiro Espinoza’s Medusa for illustrating today’s post. Using Type continues here Thursday.

Wedding Typography: Designing in Non-design Programs

Using-Scripts-1

For most of these Wedding Month posts I’ve made the assumption that I’m talking to designers who are well outfitted to create layouts using the latest design software, but I realize that with this subject I’m sure to get a number of readers interested in typography who don’t necessarily know their way around or have access to common design programs such as Adobe Illustrator or InDesign. This one is for you.

Begin with the end in mind

If you’re outsourcing the printing, (instead of printing at home), your printer will need a high-quality file from which to produce the final piece. PDF is generally preferred. Let’s do a quick test. Open up your word processor of choice, write the word ‘test’ and save or export a PDF of the test file. Word/TextEdit/Publisher/Pages all do this, but depending on the operating system and version of your software, you may be required to install an additional piece of software that allows you to create PDF files by ‘printing to PDF.’

Having to come up with some workaround PDF creator is more likely for Windows users, since Mac has had native support for it for the last ten or so years. If you’ve tried to save to, export to, or print to PDF with no luck, search the web for a PDF printer such as CutePDF or BullZip PDF (just to name a couple popular ones). These install like normal software, but when you need to export a PDF, instead of finding it in your export settings, instead you go as you would to print the file to a locally connected printer, and select this service, CutePDF or whatever, instead. A dialog guides you through the process of where the PDF is to be saved. If Adobe Acrobat Pro has ever been installed on your system, you’ll find you already have a PDF printer (called Adobe PDF), and in fact, the ability to save to PDF from nearly all your programs. Adobe Acrobat Reader (the limited, read-only version) is not Adobe Acrobat Pro.

Microsoft Office users since Office 2007 have had the ability to export to PDF (I think). Microsoft’s page on how to do this covers Word, Publisher, and others.

Google Documents can be a nice option, since the ability to produce PDFs is built in. The one major hangup is that you’re limited to Google’s catalog of fonts, which may or may not coincide with what you’ve got installed on your own system. If the one you want to use is installed on your computer, but not in Google’s, you can’t use it. There are however a number of very good typefaces to choose from, like Juan Pablo del Peral’s Alegreya, along with plenty of so-sos.

Using-Scripts-3

Produce it

After you’ve successfully exported a PDF and opened it to make sure it works, you’re ready to start on the real invitation. The great thing about formal invitations is that most of the designing has already been done. Set the dimensions of the cards you’ll print on, follow the guidelines in my previous post on working with scripts, export your PDF, send it off to your printer, and you’re done. Just to reiterate, the guidelines in brief are these: Use a single size. Set the line height to a generous increment. Center all text. Make sure the fine lines in the type are of sufficient weight. Particularly designing in Windows, I recommend following Mayene’s recommendations on choosing script faces with limited character palettes. Or if you decide to go with an engravers face such as Sweet Sans, make sure to choose the simplified non-pro version for access to the small caps.

You’re not alone.

Give us a call or e-mail us if you have any questions about which of our fonts will work in which programs. It’s of course not our line of work to teach you how to use your computer or manage your relationship with a printer, but for anything font-support-related we’re here to help. Special thanks to Cyrus Highsmith’s Novia for setting the samples. Using Type continues here Thursday.

Nontraditional Invitations

Very briefly today, I’d like to draw a big distinction where some may see very little. That is in recognizing that type (specifically printed type) is a relative newcomer to the world of stationery, and therefore alien, nontraditional, unnatural, generally perceived as lowbrow, etc. when used in the medium of wedding announcements. One who was in the market for a set of wedding invitations in, say, 1913, would generally go to a stationer rather than a printer. Stationers are traditionally engravers or calligraphers. Contrast this with job printers, who occupy the lowest wrung of the graphic arts. (Letterpress printing did not carry the cachet it now enjoys.) Therefore, even though the below samples are typeset essentially identically in what I would consider a traditional composition, their use of types that depart from the engraving and calligraphic traditions make them nontraditional. That’s not to say that nontraditional invitations can’t be successful – to the contrary – here are a few that succeed and perhaps even outshine their more traditionally true counterparts.

Nontraditional-Invitations-1

Below, my favorite Caslon, Williams Caslon, sets the standard invitation text. Swashes are activated via OpenType.

Nontraditional-Invitations-2

Nontraditional-Invitations-3

Above, the tasty Avebury fills the traditional role of blackletter in the making of formal announcements. Below for contrast are two typefaces designed to represent the traditional medium. Poetica captures the steady hand of the calligrapher, and Mariage, the templated blackletter taken from samples of hand-engraved stationery.

Nontraditional-Invitations-4

Nontraditional-Invitations-5

I think my parents’ invitation was printed in a metal version of the above, a sensible, no frills blackletter, in gold ink. Using Type picks back up here on Thursday.

Wedding Typography: Working with Scripts

This is a basic overview of working with script faces. To the experienced typographer reading this, I may not cover anything you don’t already know. To the young designer or non-designer, listen up. This is for you.

Using-Scripts-1

Script faces, particularly the highly stylized engraving- and calligraphy-inspired faces common to wedding typography generally flow in a connected fashion. In order for each character to appropriately connect to its neighbor, script faces make use of a number of contrivances, often involving the use of ligatures (two or more characters combined) and alternate characters (the same character, drawn differently to fit different contexts). Below, the top line shows alternate characters for both f and o.

Using-Scripts-2

Above, the bottom line shows how fl fits together too tightly, but instead of solving the problem with alternate characters, a ligature is automatically put in place of the two letters.

Make it so contextual alternates and ligatures work by default

Screen Shot 2013-06-06 at 7.26.05 PM

In InDesign or Illustrator, which I’d say are the current top two design programs for doing professional typesetting, it’s pretty easy to turn these features on by default. Here’s how in InDesign: Open InDesign, without any documents open. From the top right corner menu of the Character panel, make sure there’s a check mark next to Ligatures, and also OpenType > Contextual Alternates, just like in the image above. These are now your defaults.

In Illustrator, follow a similar method except in the OpenType panel. If you can’t find the OpenType panel, select Window > Type > OpenType from the top menu. If contextual alternates and ligatures are checked, you’re all done. Otherwise, make sure some document is open, change the settings, and they should stick. The screenshot below shows Illustrator’s OpenType panel with the proper settings in place.

Screen Shot 2013-06-06 at 7.36.51 PM

Keep in mind that not all script typefaces have contextual alternates or ligatures, but just about all the good ones do. I keep a list of these kinds of scripts on hand to help designers find the ones they’re looking for. The one in the examples is Cyrus Highsmith’s Novia, a face designed originally for Martha Stewart.

In addition to contextual alternates and ligatures, a number of other OpenType options to try may exist in the font you’re using. Discretionary ligatures offer additional ways of connecting two or more characters into one. If the font contains many of these, sometimes their strokes collide and should therefore be used sparingly and with restraint. Stylistic alternates (in InDesign arranged into Stylistic Sets) and Swash alternates are designed to give more options controlling the look of certain characters, sometimes functional, sometimes more as a matter of taste. You’ll find these OpenType settings next to the ones just touched on above. By the way, if you’re wondering what OpenType is, it’s a set of features specific to certain kinds of fonts (OpenType fonts) that allow them to do the things described in this article, and others, such as include small caps, and multiple sets of figures (like oldstyle and superscript numerals) into a single font file.

Back to working with scripts now; just a few pointers.

Give the script adequate linespacing and margins.

Using-Scripts-3

Don’t be afraid of all the space. Embrace the spacial requirements of the script face you’re working in, and tailor your message to the medium. Linespacing or leading should be set loosely. Don’t hit return multiple times between lines. A single return and uniform linespacing will ensure a consistent vertical increment down the page.

Work in a single size

Using-Scripts-4

Make test prints with a range of sizes and pick the best one. Depending on the final method of printing, the type’s hairlines should be no finer than .25 pt or so for engraving, or .33 pt for offset lithography. For letterpress printing, depending on how carefully the plates are made, you’ll likely be fine anywhere inside that range. Put reference strokes on your test print, and use a monochromatic laser printer or something of similar quality for testing. If you’re printing the final pieces at home on an inkjet printer, make sure to run the tests on the same paper as the final piece, and let your eyes be the judge.

Unless

After finding the best size to use, just set everything in that size, unless the typeface comes with graded optical sizes with finer lines for larger settings, which for example Novia does. In that case, take the lighter of the two up in size until the weights of the hairlines more or less match.

Don’t adjust the tracking

Using-Scripts-5

Unless you’ve set the type on a curve or something, adjustments made to its tracking (or letterspacing) will break its connections or disrupt its rhythm. Just don’t do it. Depending on the face however, kerning (setting the space between a specific pair of letters) may be necessary.

Don’t set words or phrases in all caps

Using-Scripts-6

Spell out completely or use alternate abbreviations for states, other than their all-capital two-letter postal codes. Put periods in between and if necessary kern apart caps in acronyms, if not avoid them completely. Scripts are simply not flattering in all caps settings. I can think of one particularly good solution to this.

That’s it. Following these guidelines and trusting your eyes should help you make your announcements, invitations, dance cards, etc. function beautifully, using only lovely, understated typography. This article is part of a weekly series written by me, David Sudweeks, on using type. For June, all editions of Using Type will focus on wedding typography – some higher level concepts, but mostly practical hands-on advice around designing traditional and non-traditional invitations, working in design programs (and non-design programs), and getting the proper files to the printer. The series continues here Thursday.

Common Pitfalls with Apostrophes, Quotes, Foot and Inch Marks, etc.

If you haven’t yet, I’d read last week’s quick discussion on the terminology and proper use of several lookalike punctuation marks. Let’s get going.

Comma,-Apostrophe-1

Apostrophe

Comma,-Apostrophe-4 Comma,-Apostrophe-3

Since there’s no separate key for open or close single quote, the apostrophe key often serves the function of indicating where the appropriate punctuation mark should go, and leaves it to software to either guess what to put in its place, or ignore the mark (leaving the dumb quote unchanged).

apostrophe-turned-upside-down

Unless explicitly specified, word processors will in many cases render your apostrophe as a single open quote. This commonly happens when apostrophes begin a word or line, or as in the example above, appear right after a hyperlink. An often-overlooked case is the abbreviated year, e.g. ’45 for 1945.

How to specify: On the Mac, type Shift+Option+]. In Windows, hold Alt while typing 0146 on the 9-key number pad. In HTML, the entity is ’.

Quotes

Software tends to get these right nearly every time. The one thing that throws it off occasionally is an apostrophe confusion (described above). InDesign gives us the option to not process dumb quotes and leave them as is. By default, they’re enabled under the type preferences setting ‘Use Typographer’s Quotes,’ a misnomer if you ask me, since curly quotes should not belong solely to the typographer. For the web, the HTML entities are ‘ and ’ for left and right single quotes, “ and ” for double. Mac users can type these with Option+] and Shift+Option+] (single), and Option+[ and Shift+Option+[ (double) quotes. In Windows, it’s what you probably expect, more codes to type in while holding Alt. Respectively they are 0145 & 0146, 0147 & 0148.

‘Okina & similar characters

Comma,-Apostrophe-2

Since at present a relative few fonts designed for print support this glottal stop character, I recommend using a left single quote (for print or at display sizes on the web). But if you’re working on the web at text sizes, and have a reliable fallback font that doesn’t distract too much, I’d use the appropriate HTML value: ʻ. One last thing to consider: though the ʻokina may look like a punctuation mark, in the Hawaiian language it’s a letter.

Primes

Comma,-Apostrophe-5

Similar business with primes, the marks used for feet′ and inches″ don’t exist as such in many fonts for print, but do exist in the fonts with extensive character sets for web. Prime and double prime have the following HTML entities: ′ and ″. If they exist in a typeface, they should be mapped to this and subsequent Unicode addresses: U+2032. What to use instead then? I often italicize dumb quotes and kern them in place as a stand-in for primes. No need for that in the sample above, mind you, Aften Screen has you covered.

Comma

Comma,-Apostrophe-6

Just one note on the comma. Type designers go to some trouble to make an italic comma that works with the rest of the italic characters. If you’re emphasizing a single word using italics that’s followed by a comma, italicize the comma (and maybe even the space after the comma) as well. Same goes for any surrounding quotation marks, unless you’re prepared to kern it yourself.

That’s all. Using Type continues here Thursday. Special thanks to Frode Helland’s Aften Screen for the illustrations.

Follow

Get every new post delivered to your Inbox.

Join 61,757 other followers