FontShop Blog

Now that we’ve got the scale of text type talked about, however successfully, (I think I’ll end up completely revisiting that subject later, when I’ve got a better approach worked out) we can move on to the relationships created by scale.

Visual hierarchy – whether used in a magazine, book or other long text, or on a single page or slip of paper, or a sign or system of signs, or in the presentation of a single piece of data in relation to a larger data set – serves to draw a clear relationship between the one thing, and the whole thing. Hierarchy obviously exists beyond the visual. There are levels, real, imagined, and imposed, in and upon any medium. The organizing principles are essentially the same at whatever scale. And we should take into account things like hierarchy in non-visual media, but this is already beginning to get deep, and that’s probably a full discussion to have some other time. I’ll put it on my list, and keep the rest pretty light and practical.

Using type to create hierarchy is more than setting headers and subheads at different type sizes; but can incorporate several principles of design, such as scale, composition or arrangement, pattern, and pacing, contrast (above all), and probably more if you care to go looking for examples. Even if all the type on a page is the same size, such as in a resume, we can still draw conclusions about the related nature and relative importance of each piece just by looking at what it’s grouped with, whether it’s set near the top of the page or the bottom, whether it aligns the same or differently from elements around it, and how much negative space it requires above or beneath it, or to one side. The following are a few bits of advice, which we’ll get into with more depth next week.

Separate the content from its navigation.

Just as a policeman is capable of policing in large part because of what he wears, the navigational elements of a document should set themselves apart from the content in order to be in its service. This can be made to work simply by setting the navigational type in a complementary voice (using a different typeface or contrasting style within the same face), or by using any number of techniques to break up and separate the two.

Understand the complexity of the piece you’re working on, and get rid of as much of it as you can.

If you’ve got seven main levels of hierarchy, but only really use four of them regularly, then condense, adapt, rearrange, erase, etc. (to the extent you can) to get it down to four. When I’ve had to do this in the past, the client has been generally happy that I take interest in the content’s accessibility and readability, not just its appearance.

Make sure the hierarchical steps are well-defined.

A header with a lower-level header set just below it should appear as such. The audience should not be left to wonder why these two appear so similar to one another, nor should they wonder if there’s room for a step in between. Find a way to differentiate, so that each step down can occupy and own its place in the hierarchy.

Switch up your approach.

If you’re laying out a numbered-item proposal, or some very sequential piece of technical writing, such as product documentation, you’ll soon find that additional left indent accompanying each level of hierarchy will lead to some ungainly narrow columns, high page counts, and odd margins. Create systems that reset themselves periodically, using all the ways you can think of to diversify the content within each level.

That’s all for now. Using Type looks more closely into visual hierarchy on Thursday. A special thanks to Octavio Pardo’s Sutturah, featured here in a small way (outside its use in the title graphic). Its period character used at different sizes illustrates the points above.

We’re designers, you and I. And when family or friends come to us with their awful resumes, we strip them down to their essentials, fit them to the allotted space, give them some decent margins and properly tension the page. They get the interview; they get the job. Why? Maybe it’s because they had the added confidence of a professionally composed resume. Or maybe their new employer just thought something felt right. Maybe their resume worked.

So what’s the best font for resumes?

When I’m asked this question by designers, my response is usually, “The best font for a resume that does what?” “Oh,” they say, “Well what I’ve got’s not working. I need one that looks better and represents who I am.” “And who are you?”

This often leads to a discussion about what the field and position is, who the applicant is, and of what whom needs convincing. Why so many questions? Can’t I just name a font? I could, but as it turns out, this is precisely the sort of question I get from people who are in no position to receive an answer. Imagine me entering a hardware store and asking where the best nuts for bicycles are kept. “A nut for what size bolt, sir?” the clerk responds. “Uh, one on my bike. I’m not sure.” The clerk tries to be helpful, “Do you know if it’s metric or customary? How about the thread?” Me: “Ooh. I could try something flashy; got anything chrome plated?” One would think that because I ride my bike everyday, I might take more interest in these little details. In my example however, the reverse is true. I don’t even own a set of wrenches—I’ve never picked one up in my life. I don’t know the difference between a crescent wrench and an allen wrench. Luckily for me, bicycle shops exist.

To the professionals now reading this who do not consider themselves designers (we get mostly designers here), hello. I presume you come with the same question. Let’s stop for a moment and answer it. The best font for resumes is Palatino. You can get it here but check your word processor’s font menu first. It’s likely already waiting for you. Moving on.

You see, fonts don’t fix your resume’s inability to accomplish its basic tasks. That’s the job of design. A designer can with a single text face create many successful compositions, pursuing varied and nuanced qualities or styles just by the way the type is arranged. It’s at this point, after a designer has developed a sense for and command of his or her type, that he or she is in a position to benefit from having the “best” font for the job. And the questions these designers ask me are much more descriptive. “Could you suggest a good warm sans with an American feel, but that doesn’t look too dated?” Yes. I can, in fact.

Hey non-designers, still with us? Forget that Palatino thing. That was just—well—when people phrase the question that way, “What’s the best font for …” they’re usually out for a simple and inexpensive answer. If I suggested that the best font for their resume would cost them $125, they’d probably rephrase the question in a hurry, “I meant the best one out of the options already on my computer.” This is generally what I read the initial question to mean. If however, you’re still willing to put money on this, let me suggest the best place to spend it: hire a designer. Your designer will be able to see the problems you can’t, and has the tools and experience to create for you what you need. Okay, but what if you’ve got no budget for design? It’s rare, but it happens. I would then look to my circle of friends to ask if there’s someone they know who could spare an hour.

Opening it back up to a general audience, let’s return to the question of who you are, because I think here’s where we’ll find the best clues on how to design this resume and which typefaces will work with the composition. Think descriptive thoughts, and write down descriptive words. Professionally speaking, who are you, and who do you want to become, and what kind of work will get you there? If that doesn’t give you enough to work with, consider your influences. Describe the music you listen to, the writing style of an author whose books you read, the city or country you live in, the way your parents or siblings talk, or walk, the sound of the musical instrument you play. Finding some descriptors that work? Now use type in an understated way that fits the description. Different faces will perform differently in this role, so I suggest using something fairly versatile starting out. Robert Slimbach’s Minion is a popular one. I’d also recommend Thomas Gabriel’s Premiéra which I’ve come to know well. As your ability to create and control context becomes more refined, you’ll be able to identify and incorporate the characteristics of different typefaces into your compositions.

A few last bits of advice: Work with the text in a single size. Use placement and typographic features such as italic or bold, as well as advanced features like small caps, to create a clear hierarchy. The colors used should offer sufficient contrast as well. I recommend black on white. And here are a number of other considerations from last week’s piece on the same subject. Good luck. This feels more like a homework assignment than a how-to, but maybe that’s best. Typography is a discipline that’s learned by some study, but mainly by practice. Using Type continues here Thursday.

Tabs and nested style settings in InDesign aren’t hidden away anywhere, but the ins and outs of their use can still be tricky. As a brief addendum to Using Styles Properly and last week’s how to on figures, I thought I’d demonstrate a couple of techniques for automating the application of styles, which happen to sometimes require a good understanding of tabs. The above example uses a character style, a couple of paragraph styles, and is set in FF Milo and FF DIN Round.

First, when working with any kind of information that requires a tabular layout, make sure you can see exactly what’s there, and what isn’t. This means turning on invisible characters. Type > Show/Hide Hidden Characters. Now we can see our tabs, represented as guillemets, spaces, shown as vertically centered periods, as well as various break characters, etc.. As covered in Using Figures, the decimal points of the numbers above should align vertically. This is done by using a decimal tab as opposed to the left-, center-, or right-aligning tabs shown at the top left of the tab panel. Upon closer inspection, the decimal tab additionally works with “any specified character” in the “Align On:” field of the same panel. Think for a moment of a case where you might want to align to an arbitrarily specified character.

I admit I didn’t think of anything all that useful beyond the obvious, but I’ll keep thinking. End of detour.

Since the columns of figures I’m working with are all of equal width, I can specify the first interval, and then repeat the tab position automatically. Another way of wielding tabs with precision is by placing guides on your document, or of course, by performing arithmetic. Tip: if you want to move a tab by a half inch, type “+ .5″ at the end of the contents of the “X” field and hit enter. After setting this line as a paragraph style by simply keeping my cursor blinking on the line and clicking New Paragraph Style, I was able to apply this style to all the lines. With the top line, the exception, I adjusted the tab over the center of the first column, changed it to a center-aligning tab, set the next at the same interval, and repeated the tab just like in the image above.

All lined up. Now on to that character style I apply to the ‘month’ label along the left edge.

By the way, I don’t show you this so you can repeat it, I do it so you can become familiar with the possibilities and come up with even better ways of using styles and saving time producing your own work. The first thing I did to create the style was change the font to FF Milo. Then I took the size down slightly, painted it white, raised it off its baseline some, and applied the all caps feature, available through the Character panel. (By the way, this isn’t the same as Text > Change Case > UPPERCASE. If you’re a CSS hacker, this is akin to text-transform: uppercase.) Then I gave it its magenta background, which is in fact a thick underline. I also put a space on either side of each month label. Then, highlighting the characters I had just changed, I hit “New Character Style” in the Character Styles Palette.

In order to apply the magenta and white character style I had just created to the rest of the lines in the table, I opened up the paragraph style I had called ‘entry’ and went to its Drop Caps and Nested Styles page.

Because I used a preceding tab on each line, I set the first nested style to [None], then the character style ‘month’. The style applies itself automatically up until that second tab, just where I want it. Now if I have pages to format similarly, I just apply the paragraph style and I’m done.

I kept this example relatively simple, but by all means, go nuts. Nest twelve character styles across four lines and three forced line breaks, systematically cycle through all the weights of a typeface, and put a bar chart in the center column.

Thanks for reading. Any questions? Feel free to ask in the comments. Using Type continues here Thursday.

This piece is to serve as a quick note on figures: What they are, and when and how to use them. My Belgian counterpart, Yves Peters, has already written a much deeper and more comprehensive look into figures, two in fact, that I hold up as a reference. I’ll try to keep my own comment on the subject as short as possible in order to justify its existence.

Figures are to numbers what letters are to words. Just as lowercase letters range above and below the x-height and baseline of a typeface, ranging figures – or text, lowercase, or old-style figures (these are synonymous terms) – have ascenders and descenders. This formal quality of the figures gives them the ability to blend in with a body of text with minimal disruption, leading to better color on the page and arguably a better experience for the reader.

Lining figures, often the default, are full cap height. These work best with all-caps settings.

Tabular figures are for setting information in rows and columns. The word tabular refers to the figures’ spacing. They’re all the same width. When it’s desirable for figures to align vertically, say, in a list of telephone numbers or an actuarial table, the figures’ common width allows this. Tabular figures can be either lining or old-style. At the time of this publishing, March 14, 2013, the blog’s body copy is set in FF Milo Serif Web, which defaults to tabular lining figures, as do all Web FontFonts. Figures that aren’t spaced to a common width are generally spaced proportionally.

There are more. Often, a face that includes small caps will include one or more sets of figures sized to fit specifically with its small caps. Super- and subscripts, also called scientific superiors and inferiors are also common, usually either lining or ranging, rarely both. The same is true of fractionals, or numerators and denominators used by OpenType to create arbitrary fractions. As a rule, numerators set slightly lower than superscripts, denominators slightly higher than subscripts. Some faces, such as Nick Shinn’s Scotch Modern, highlighted yesterday in Great Pairs, have an additional set of numerators and denominators for setting what are called nut fractions, the kind you likely wrote when first studying fractions. When appropriate, special punctuation, mathematical operators, currency symbols, etc. are included in a font to work with these additional sets of figures.

I could add here that not everything fits neatly into the above classifications. Uncommon figure sets such as Bell’s or Miller’s three-quarter figures stand between cap-height and x-height. Note how Miller’s range slightly. Also note how occasionally lining figures range slightly, such as in MVB Verdigris. Yves documents more uncommon figure conventions in his piece.

Lastly, there’s no guarantee the set of figures you need exists in the typeface you need to use. Prior to OpenType, meaning just about all fonts produced before the mid-1990s, designers had to license additional fonts should they need the added flexibility of multiple figure sets. This is why on FontShop and elsewhere you’ll occasionally see products marked LF or OsF. These fonts differ only in the figure style included, whether lining or old-style figures.

Next week we’ll talk less and get our hands greasy setting all these. Using Type continues here Thursday.

Justified text can be an important stylistic choice, a functional part of your layout, and potentially a time-saver within your overall workflow. Often it doesn’t make sense to justify, but when it does, these general guidelines will help you get the process working for you. This will be mostly theoretical, with a more practice-based piece with InDesign justify settings to follow.

Why should I justify my text?

Justified text is the alignment of the body text to both sides of its containing column or text frame. This is done most commonly by adjusting the word spacing of each line to push or pull the line’s contents to fit its container. Justifying text eliminates the need to tidy ragged edges, but introduces its own problems as well. Up until near the turn of the 20th century, setting body text flush left was very uncommon. Typesetters justified everything. So there’s one good reason right off – if your brief calls for something to look dated to, say, 1930 or before, justify your body. When possible, reading the text you’re setting is my best advice to knowing how it should be presented. Below is set in Frank Hinman Pierpont’s (after Robert Granjon’s) Plantin.

Give yourself adequate room.

Narrow justified columns are more trouble than they’re worth. They’re prone to rivers of whitespace, and odder-than-normal breaks in hyphenated words. Below, Nicole Dotin’s Elena in a narrow column with default justification to the left, and with better but still less than ideal justification on the right. (It’s less than ideal because it’s so over-hyphenated.) Sometimes that’s the trade-off one must make, but I say avoid it when possible.

Hyphenate, copyfit.

Be careful with this one though, since too much hyphenation is an easy pitfall. Also, make sure you’re hyphenating from a dictionary of the same language. I’ll go into more depth on this next week as well. In addition to knowing the language you typeset so you can double check its hyphenation, since the first printed books, typographers and some writers have also altered the content to fit the layout. Copyfitting may sound dangerous, and it certainly can be, so take care if rewording a client’s phrasing and seek approval of any alterations if you’ve not been expressly authorized to make them.

Lastly, know your limits and the limits of the technology. E-readers and webpages utterly fail at present to render well-justified text.

Continue to How to Justify Type.

First, thanks Art Blanc for requesting that I add this brief bit as an extension to Using Styles Properly. Designing with professional webfonts, you’ve generally got two options. Host your own, or go with someone like Typekit or Webtype that handles the hosting and serving of font files as needed. I’ll focus on the first case, but this is still pretty applicable to the second, as it will point out why problems like faux bold and faux italic occur, and how to fix them.

If you use a single font family of four fonts, don’t specify four separate font-families. This is the most common mishandling of the @font-face rule I see, and the main reason for faux bold’s inescapable presence on the web. Instead, specify the same font-family with each font, and use font-weight and font-style to differentiate them, like this simplified example with FF Unit Web Pro:

What if I want to use weights within the family that are neither ‘normal’ nor ‘bold,’ like, say, Thin? Use numbers. 100 is the lightest. 900 is the boldest. Units increment by 100. Specifying a font-weight value of ‘normal’ is the same as 400. Bold is 700. Here’s the spec.

And actually, let’s take a detour here and discuss faux bold. When setting up @font-face, the default value for font-weight is normal, or 400. When using a header in your markup, h1, h2, or whatever, the header’s default font-weight is bold, or 700. So if you specify a separate font-family for headers without specifying its font-weight, and then turn around and use it like I use FF Meta Headline Web Pro below, you’re headed for trouble.  Why? Even though the font is called MetaHeadlineWebPro-Bold, since the font-weight isn’t specified, CSS thinks it’s ‘normal.’ Then when the h1 comes asking if there are any ‘bold’ fonts in the family, CSS says, “No, but I’ve got this normal one here I could bold up for you real quick.” Faux bolding is applied.

The common quick fix is to specify font-weight: normal; in the h1, avoiding the above described confusion. And sometimes with webfont services, this is what you have to do. But the better way of handling it, is to specify font-weight: bold; in the @font-face CSS. Next time when the h1 comes looking for bold, CSS says, “We have it.”

Now, why’s this better? Because you don’t always know who’s going to come looking for bold, or italic. You might fool h1 into looking for ‘normal,’ but what about h6, or h7, or strong, or b? If you set up your @font-face right, you don’t have to go preempting each of these eventualities. Elements like em or strong find the font they’re looking for, without you having to tell them where to look.

In sum, apply style rules as generally as possible, or if you can, implicitly. That’s all for now. Another Using Type comes on Thursday. In parting, here’s the beautiful Aften Screen, with its totally already-thought-out CSS bundled with the download.

(Update: Hey Alan Stearns! I just read your Say No to Faux Bold and discovered that I must be an unwitting plagiarist. Though I didn’t reference your material at the time of writing this post, it seems like somewhere in the middle there, had I done so, and copied you idea for idea, the words wouldn’t have come out too different. I could claim that I arrived at this independently – actually I will claim that – but still, what’s the use? The two are so close. Anyway, sorry for what must certainly have looked like me ripping you off.)

Readers: though Alan and I come to the same conclusions, he goes into more depth afterward.