Before February’s over I thought we might as well publish January’s Staff Picks. Here’s the complete list, with selected pieces below.
Last week we discussed a few basics of setting up and applying styles properly, now let’s do it. All instructions below apply specifically to InDesign, and generally to any technology that makes macrotypography possible through styles.
In the previous piece on the theory behind setting up styles, I end with the question, “What’s the rule, and what’s the exception?” Let’s start there. If you’re designing a novel or textbook, your audience will spend most of its time in the text. That means the text should be your top priority, and everything else should exist to serve the reader while in her role as a consumer and digester of, referrer to, and participant in the text. When making styles, start with the body text as a new paragraph style.
It’s here where we specify the font family, size, etc.. Since I had already aligned the text frame to the baseline grid before creating the Body style above, now any paragraph that has this, or dependent styles, applied to it will also align to the baseline grid. Wait. How did I create the style? I left my cursor blinking in the middle of the paragraph, and hit the ‘Create new style’ button at the bottom of the Paragraph Styles panel, opened the just-created style, typed Body, and hit enter.
The next and subsequent styles you create will be based on this style. Note the ‘Based On’ in the image below. In the Style Settings below it, you’ll see that another style I just created, Body initial, is the same as Body, only without the indent. This I’ll use just after a chapter heading, atop a new section, or after a break in the text.
A little typographic system is forming, all based on the most common style, Body. Note especially how I applied the italic as part of the paragraph style Quote. I selected the paragraph, hit Shift+Command+I, (that’s Shift+Control+I in Windows), and created a new paragraph. I didn’t specify the italic weight in the Basic Character Formats dialog. This means that if I change the font family in Body later, there’s no need to also come and specify the new font family’s italic here. But—a caveat. This method supposes that the font manufacturer set up their style names properly within a single font family. So check first. If you follow my method of italicization above and nothing happens, you’ll know, and have to go the old route of manually specifying. This is also true if specifying fonts across different optical sizes. Even if it’s a bit of a hassle to specify it though, assuming I make more styles based on these, it will end up saving time and effort if a change needs to be made. And that’s the gist of paragraph styles.
So what are character styles for? Character styles are exceptions to paragraph styles on a per-character basis. Need all keywords in a paragraph to be blue? That’s what character styles are built for. And as you make more use of things like nested styles, character styles can be a huge time-saver. Thanks to MVB Verdigris for setting this paragraph by the way. Let’s change it to Coranto 2 from yesterday’s Great Pair just to see what happens.
Above: All I did was change Body’s font family to Coranto 2, and all the other styles automatically changed. Even that italic in the Quote.
Paragraph styles work on the paragraph level, meaning from one hard return to the next. (Soft returns, Shift+Return, bump text to the next line inside a paragraph.) You can set a paragraph style without highlighting anything, just with the cursor inside the boundaries of the paragraph. Character styles require that you highlight the part of the text to which you wish to apply the style. (If you have both a paragraph and character style applied to a paragraph, the character style will take precedence because it’s more specifically applied.) CSS-defined styles are applied at the element level, targeted with whatever selector(s) you specify.
Say you’ve got your styles set up in a small sample of the document you’ll be working on, and now all that’s left is to go through the thing and apply the styles. Particularly if, like me, you’re averse to clicking around with a mouse when it’s unnecessary, I suggest you try Quick Apply. Just leave your cursor in the middle of the paragraph, hit Command+Return and type the name of a paragraph style you’ve created. A little dialog will come up with suggestions. Arrow to it, hit enter, violà. Same with character styles and certain OpenType features (type ‘small caps’ for instance), just make sure you’ve got them highlighted. Enjoy.
And that’s all. My hope is that this introduction to interdependent or cascading styles will help you to think in terms of systems when working with type, and save you from hours of going back and fixing things that robots are capable of figuring out on their own. Using Type continues here Thursday.
Oh! I was thinking of doing a brief demonstration on setting up @font-face styles properly, but I’m not sure if there’s much demand for that here. If so, let me know and I’ll do it. It just seems like it’s something nearly everyone gets wrong. My evidence? The widespread presence of faux bolded heads and subheads on the internet.
Moving on now to a thoroughly contemporary pair, let’s look at Göran Söderström’s cheery sans, Siri, and Gerard Unger’s sharp and smart Coranto 2.
Though Coranto is designed specifically for newsprint, the cleanness and deliberateness of its gestures transfer well to both screen and more careful print processes. Together, the two hold each other up and project a youthful edginess throughout.
Siri’s playfulness comes from its highly finished tone and color, balanced with seemingly arbitrary terminal angles and overall bright Nordic nature. Looking to use Siri on the web? Then it’s Siri Core Web you’re looking for.
Another Great Pair lands here on Wednesday.
First let me start by saying that particularly if you only work with short texts, having a solid understanding of how styles cascade is pretty optional. That’s true of both print and web. Yes, even if you’re writing your own CSS it’s still common to not quite have a grasp of what the term cascade means. So that’s the job I’ve given myself in this piece—to explain something that’s fundamental to working with long texts, simple and straightforward, but largely misunderstood. I’ll not get into any of the technical specifics just yet, but start with the theory.
I also realize I’m using the words Cascading and Print somewhat provocatively in the title, since most don’t associate the two. I do it not to confuse, but to get you, the reader thinking about what CSS-defined styles and InDesign’s Character and Paragraph Styles have in common, specifically, how they cascade one into another.
When I start some typographically-heavy piece of design, I generally begin by taking appropriately representative content and determining the scale and measure of the body copy in relation to the overall document hierarchy, the same for other text elements, layout features and grid dimensions, etc.. This is the play stage, and I think it’s here, as well as during testing and production, that understanding and creating interdependent styles properly can save lots of time.
The first paragraph style you set up should be the most common case, body copy. It’s here you specify the font family, size, text alignment (flush left, justified, etc.), first line indent value, and so forth. The second style you create might be a version of the above, but without the first line indent, for a crisp start at the top of a chapter or subhead. This you’ll base on the first style, meaning it inherits (or implicitly gets applied to it) all the stuff you specified in the first style. Next, you might create a block quote style based on one of the above styles, with space before and after, indents on either or both sides, italic applied, etc.. When testing, should you need to adjust the size slightly, or change to a different font family, you change it in one place, and it updates everywhere the dependent styles are applied. That’s what cascade means—the general style rules apply down through every specific instance.
The rest of the theory behind setting up complex typographic systems really comes down to the above question. From here the task is to plan how you’ll specify as little as possible in as few places as possible, so that implementing a minor change to the design is a manageably quick process. Thursday’s post on creating and applying and generally using cascading styles will be a much more practice-based discussion on macrotypography. Catch you then.
Maybe the clearest lesson to take from this particular pairing is that generously spaced, wide sanses tend to dominate the composition, typographically speaking. Providing a closer look at this interaction are our actors, the even-colored and very readable FF Clifford by Akira Kobayashi, and the softened, cartographically inspired Trio Grotesk by Florian Schick.
As with any of these, a good place to start is to line up a few words and see what’s working, and what each face is good for.
Below, the different optical sizes of FF Clifford are shown in relation to one another: Eighteen, Nine, and Six. And if you’re wondering, all samples are set on a 6 pt baseline grid.
New Great Pairs land here on the blog every Wednesday.
Let’s dive in. If you missed the theoretical introduction on baseline grids, you may want to review it first. It’s a quick read. In this section I’ll give a few pointers on getting the interval right, some specifics on how to set up an InDesign document, and I’ll likely keep it pretty vague discussing baseline grids on screen media.
Adhering to an appropriately adjusted baseline grid irons out small mistakes and makes the large ones you really should know about much more evident. Here’s a text frame with some bobbles in the vertical spacing, and the same text frame aligned to the document’s baseline grid. Note how when the leading or line spacing is slightly under the set increment of our grid, the line of copy is still forced to the next spot down. Near the bottom of the text frame, the leading is greater than the baseline grid’s increment, so again, the line is kicked down to the next indicated spot for a baseline on the baseline grid. If you’re wondering how to make it align, here’s how: Select the text frame, then ‘Align to baseline grid’ at the bottom right corner of the Paragraph panel.
To turn the grid on and off, either use View > Grids & Guides > Show/Hide Baseline Grid, or I’d suggest using a keyboard shortcut. You can assign your own if the default doesn’t make sense to you. While you’re at it, assign a similar shortcut to access the baseline grid settings. The dialog you’re looking for is at Edit > Preferences > Grids (Windows) or InDesign > Preferences > Grids (Mac OS).
Tip: Open this dialog without any documents open, put in some values. Close. It’s now your default baseline grid setting.
Finally, a few general design concerns: Baseline grids should relate to the overall composition of the piece you produce. If it’s a print piece especially, find a measure and grid increment that relates well to the physical size of the medium. This may be, but isn’t necessarily a dimension derived from the larger document. Don’t be too dogmatic about it though, use your eyes and adjust as needed.
InDesign is quite capable of rendering baseline grids set to increment in fractional units. There’s nothing special about the 6 pt setting above. If 5.718 pt works better, use that.
Letting your body text land on every other or every third grid increment is advisable. When testing your grid, make sure to account for cases such as multi-line bulleted list items.
That’s all for now. Using Type continues here Thursday. Our supporting typeface is Thomas Gabriel’s Premiéra. I’ll add more to this bit on baseline grids if there’s demand for it. Is this helpful? Let me know.
Moving now to an Iberian match-up, we visit the pairing of Dino dos Santos’s Glosa and Eduardo Manso’s Relato Sans.
Our serif face is the contemporary, rationalized Glosa. Glosa offers a good set of optical sizes to choose from. Its Text weights perform well in editorial settings at normal text sizes. The refined Display weights create a striking high-contrast option for large settings. And the in-between Headline fills its headspace with an appropriate increase in x-height and slight bump in ascender height.
Together with the warm, yet somewhat reserved Relato Sans, each does its part to maintain a crisp look. Certain characteristics such as the rationalized axis, and small details, such as the counter shape in the lowercase e tie the designs together well. There is a seriffed counterpart to Relato Sans, in case you’re interested in something a bit closer in pedigree.
Of course mentioning this may be a deal breaker, but I happen to really appreciate the stiff, angular structure of Relato Sans’s Triplex-like italic. At small sizes, the angularity nearly disappears.
Let’s call today’s Using Type the first real discussion in the series on the theory and practice of typography. While I could start anywhere, I’ve decided to begin somewhere in the middle of practical use (grids) rather than structure the series like an introductory typography class. Like most disciplines, in typography there’s a lot of theory and terminology that requires its own understanding and practice before discussion on the subject does any good. I could go the route of starting from the beginning, but prefer to assume some design-specific foreknowledge, and let any who need a hand ask for it.
In addition to hoping I’ve neither chosen to speak over the heads of, nor down to my audience, I might clarify also that while the principles discussed are true both in print and on screen, I favor and will give more examples related to print. When web comes up, it will mostly fit into the practice portion.
So let’s get started. When typographers refer to document grids, they’re generally talking about the kind of grid they most often interact with, baseline grids. Enabling a baseline grid forces a block of text’s vertical spacing into alignment with the document’s fixed vertical increment. This keeps text from being nudged just a little above or below where it should be. While baseline grids can be seen as an abstract concept replicable in any number of media, I’ll talk about them mainly in the scope of print, and use terms compatible with Adobe InDesign, a print-focused layout app that supports adherence to a baseline grid.
First, a little theory, next week, some practice and tips. Like the document you’re creating, grids exist to serve the reader, and the designer. How one spaces the lines of type affects the color and unification of the body text, as well as the pacing of the document, and the perceived quality of the production. Grids should therefore be prepared to assert some authority regarding what goes where. Well-designed grids work as part of the greater structure of the document, allow flexibility of composition, and remain in the typographer’s service.
What some typographers do, out of preference or convention, or because they’re after a specific aesthetic, is work within a coarse grid where each line lines up with any adjacent line of text. Ten point text on a twelve point grid. Hierarchy is mostly determined by scale (type size). In certain cases this works great. In others, all the inflexibility shows. Example set in Akira Kobayashi’s FF Clifford, Tim Ahrens’s JAF Bernina Sans.
This is the one I tend more toward when setting long documents. Rather than a consistent single drumbeat as the reader’s eye works down the page, the line spacing differs between body and other text elements, but carries an overall harmony about its composition. Here the grid increment is set to a third of the body’s line spacing (or leading). Body below set in Nicole Dotin’s Elena.
There are lots of different kinds of effects one can achieve with baseline grids, but these two are the most common. We’ll pick this discussion back up on Thursday.
Striking what I see as a youthful balance is this pairing of Artur Schmal’s Parry and Angus R. Shamal’s ARS Maquette. Parry follows a traditional 18th-century text construction, but encourages rather than restrains certain of its elements from wobbling off axis, resulting in a sensitive and playful face.
ARS Maquette is an almost geometric grotesque, providing just what Parry needs to support this kind of a relationship. I would encourage the typographer to explore Parry’s display capabilities, at both the very light and heavy ends of its weight spectrum. And of course, Parry has its own grotesque should you decide to go for a more British flavor, or allow the serif face to play the more distinguished role.
First, some light housekeeping: This is the final scheduled post in the Type Trends series. I’m sad to see it go, but glad for what’s taking its spot. Type Trends won’t go away forever; It’s liable to show up here and there, especially by popular demand. The major trends I feel are covered for now. (The pieces at the bottom of my list that didn’t materialize into posts included type designed and marketed with a very specific use in mind, and type that plays with extreme contrast.) If you were holding out with a better idea I’d love to hear it.
The new series is called Using Type, and it’s a return to the basics. How to use grids and figures and hyphenation and titles and so forth will be the topic at hand, and what I hope to accomplish with it is the creation of a space where all of us can learn something, and contribute something. The new content is presently in production and will drop here Thursdays. Here’s a taste.
Whether for their forthrightness, ephemeral nature, or some connotation held of speed or strength, stencil faces have plenty to offer the creative typographer. When using stencil faces, select something with an adequate bridge, or gap between positive strokes. The leap of the eye to connect the unjoined parts, and the implied rules of the structure of the stencil is what makes the face fun to look at. Try incorporating a physical process, as that’s what stencils are for. Line bridges up with a the document grid. Experiment with graphic elements of a similar width as one of bridges or islands.
One face I’ve admired for its versatility quite a while now is Mark van Bronkhorst’s MVB Verdigris. It’s a Renaissance Roman that demonstrates a deep understanding of setting long texts. When in the hands of a good typographer it serves them well, and when worked by a novice, it’s forgiving and takes no umbrage. In case you’re wondering, it’s pronounced Vare-di-gree, similar in rhythm to pedigree.
Taking the display role is Christian Robertson’s Apertura, a contemporary modernist sans. Apertura’s easy to spot with its definitive single-story a. Together, the two faces create a bit of tension, which the typographer can harness to emphasize a classical-over-modernist quality, or just the opposite, or some well-sung harmony in between.
Apertura comes in a range of weights across two widths, and if you must, a double-story a drops in as an alternate via OpenType Stylistic Set. Verdigris’s strength is text between 8 and 12 point, though the characters don’t completely fall apart at larger sizes. If you’re looking for a display cut of Verdigris, it does exist, though MVB Fonts holds it exclusively. It’s called Verdigris Big.
Above, Apertura serves well delivering text of modest length. Below, the italic cut is faithful to the spirit of Pierre Haultin’s italic from which it’s based. Note how the blobbiness of the strokes, visible up close, disappears at size.
Stencils aren’t new. They’ve been around nearly as long as crates and people with not quite enough time to mark them. But what I’m seeing happen with stencils, to my delight, is that the genre is coming into its own. Marking the progress is the rise of stencil faces released as collections, and the development of stencil families independent of any non-stencil counterparts.
The above example, part of the FF Backstage collection demonstrates stencils at work in their native habitat. Stephan Müller’s FF Container, and Cornel Windlin’s FF Water Tower.
Fred Smeijers’s Puncho, part of the Orly Stencil, Puncho, Standing Type pack. I love to see the robust bridges taking a more definitive role in breaking the letterforms and causing the eye to connect what’s left undone.
Encountering Nikola Djurek’s Typonine Stencil was for me, and many others I can only assume, an awakening at what stencil type was capable of conveying; shown here with Thomas Thiemich’s Fakt as part of the Great Pairs series. Its fine details seem antithetical to the normal purposes of the stencil genre. Also note how substantial the bridges are that hold the islands in place.
Also a monospace, Pedro Leal’s User Stencil comes in both positive, and reversed Cameo weights.
To finish out, here are a couple we don’t carry; Paul Barnes’s Dala Floda, above, and Nikola Djurek’s Plan Grotesque Stencil below.
That’s it for this week; just something to whet the appetite for more stencils in use, here on Thursday.
Let’s take a quick look into the relationship between François Rappo’s New Fournier and Cyrus Highsmith’s Scout. Scout takes its influence from lots of sources. More particularly, its letterforms tend to favor the English grotesque, while its fit and detail feel equal parts American gothic and contemporary sans.
Pierre Fournier’s work preceded and greatly influenced the designers of Romantic types such as Bodoni. An exact attention to detail renders the face both circumspect and human, seen most plainly here in the italic. This particular Fournier happens to include several carefully drawn optical sizes for setting headlines and display pieces as seen in the Large Headline weight below.
Together, each plays it straight as much as it has to, while allowing the other to indulge in a bit of play. Using composition to one’s advantage, this can show up as an occasional wisecrack or a regular piece of the typographic texture.
Goodbye December and 2012. Here are December’s staff picks. Happy new year.
“… the perfect font for a wedding invitation from Zelda and Link …”
“My pick for this month is American Uncial, inspired by Mayene’s Hobbit pinboard.”
The Type Trends series has had a good long run, and it’s not finished yet. Picking a few of my favorites, here are the best so far:
Yep. Just a list. Enjoy. An all new Type Trends will be here Thursday.
