FontShop Blog

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.