Category Archives: Using Type

Differentiation and Exclusivity

Just a quick point I’d like to raise, since today’s USA vs Germany match has completely thrown off my schedule.

Ivory+Coast+2014+World+Cup+Home+Kit-a

When a potential investor approaches a business, one of the first concerns addressed is, “What’s proprietary about this business? What’s to stop a competing company from observing and then producing a product or service that’s just as good but at a lower cost?”

In graphic design, creating an image that’s easily authenticated and yet only with great difficulty successfully imitated follows the general principle of contrast. When something is very much unlike its surroundings, it becomes a definitive point of reference. (Its contrast is high.) When its surroundings respond by becoming similar in appearance, though the initial point of reference may not have changed its appearance, its contrast is lowered. Thus the perceived need for constant differentiation, endless updates and rebrands. And to some extent here, perception is reality, though I think you can feel my reluctance to such an approach, when the emphasis is on changing the appearance, rather than the substance. I’ve long seen great typography as one of the ways of solving this problem. And exclusively-licensed type as a particularly effective way of asserting ownership of one’s image.

Photo courtesy of Puma

Here’s one example: Soccer jerseys (my sincere apologies to the rest of the world who recognizes the sport as football) are commonly counterfeited and sold as authentic, misrepresenting their origin. Counterfeiters are foiled by the original manufacturers who commission new, distinctive typefaces and then exclusively license them from their designers. It’s for this reason that with each new wave of uniforms, something about the type catches your eye. Here’s one of Eduardo Manso’s custom typefaces done for Puma, above, on the Ivory Coast World Cup  jersey, and below on Italy’s. Note the curvature of the diagonal strokes, aiding legibility and also creating an easily-recognized distinguishing characteristic.

watermarked_thumbnail-2If you’re wondering how to go about licensing a typeface exclusively, just give us a call. That’s it. Using Type continues here Thursday. Thanks to Tobias Frere-Jones’s Armada for setting the title.

Processes

Picking up from last week’s discussion on substrates, today we talk about processes. Broadly speaking, we’re talking about putting images onto surfaces. Traditionally speaking, (in the context of graphic design studio work) it’s putting ink on paper.

Using-Type---processes

Processes range widely, almost all (the old ones anyway) bearing their own typographic or letter-making traditions. Here’s a quick and incomplete run-down:

  • Offset, or lithographic printing, common commercial standard, seen in books made after 1970 or so, also nearly all maps
  • Digital, which generally means commercial inkjet printing
  • Letterpress, (relief printing) the first commercial printing process; it largely died out in the US in the 1980s and has since seen a resurgence of interest, creating the ’boutique’ printing sector.
  • Engraving, now most commonly seen on paper currency, the highest standard for calling cards / other stationery
  • Screen printing, T-shirts and (these days) only higher-end posters
  • Laser printing, toner (finely ground plastic) melted onto paper, likely your client’s process for day-to-day printing

Some uncommon results are possible with ordinary processes by changing the ink or rasterization method. Fluorescent, metallic, reflective, or glow in the dark inks are examples. Also, spot glosses are now a relatively simple thing to order. If you’re printing on plastic, a UV ink process requires a slightly different setup. There are also a number of special effect processes, including embossing, debossing, die cutting, laser etching / cutting, lenticular printing, holography, and special coatings. Short of seeing these in person, a perusal of one of Sappi’s (a paper company’s) exposition of special effect printing, via PDF is helpful to get an idea of what each is.

Within screen media, there’s also a dimension parallel to special effects printing that makes specific use of the physical properties of pixels, screen polarization, haptic feedback, and other infant technologies. Just as in print, there are simulated 3d effects on screen as well, done a number of ways, most of which requiring special glasses and sensors. Augmented reality interfaces would fit in here somewhere.

Three-dimensional processes

Again, there are innumerable industrial and artisanal processes that can result in letters on a surface, but just to name a few common ones: routing, sandblasting, minting, reproducible sculpture for molding and casting, and of course, 3d printing, and paper folding.

One-off and limited edition processes

Depending on the scale of the project, you may consider a single- or limited-run solution such as sign painting, neon, calligraphy, stone cutting, metal engraving, smithing (for cattle brands), and the mostly noncommercial printmaking processes, monoprint, intaglio, and Ukiyo-e.

Now, why make such a list? It’s important to consider all the possibilities of design from the outset of a project. I hope that by going through some of these it helps to expose new possibilities that just might be a good answer to a the need a project addresses. So for example, why design a paper label for a glass bottle, when the bottle itself can bear all the information just as successfully? Next week, we’ll get into the steps just after the brief’s second half gets firm.

Thanks for reading. Using Type continues here Thursday. Thanks to Nikola Djurek’s Nocturno Display for setting the title.

Substrates

This is a continuation of the previous look at the typographer’s process at the beginning of a project, and we’ll end up talking about paper and other substrates.

Picture 1

A quick note on the creative brief before we proceed

Not only should the creative brief be clear about which objectives the project attempts to satisfy, it should articulate how it intends to do this as explicitly as possible. This second half of the brief is commonly overlooked or postponed in order to keep the process flexible. Make it explicit. Don’t let it just get rolled into the client approval process. My suggestion is to keep the brief updated and referred to regularly by both you and the client as the job progresses. That way, it serves as both a solid base and a structure from which the work can proceed, that adapts as necessary.

In the case of designing a set of concert tour materials, one example of an above adaptation may be to go from designing a single tour poster—to a small poster series done by studio collaborators. In the case of a publication, it may mean to transition from five 16-page daily broadsheets to a weekly-published 64-page tabloid.

Considerations the typographer is making at this point

As the brief solidifies, the job of the designer is to give the textual elements and their medium physical form. Even small projects pose big questions here, because of the seemingly endless possibilities and the constraints each imposes. In print design, getting the body copy working with the publication dimensions, adjusting each as one goes, and exploring substrates and the processes by which the piece is produced and bound is the first step toward putting real evidence behind this second part of the brief. With each serious paper option, run press checks and make a series of paper dummies to hold, heft, flip through, and examine how each feels.

What’s a substrate? Most commonly in print work, it’s paper. Substrate is a broad generic term for the underlying physical layer onto which one puts content. This includes all materials that carry the graphic information you apply to them, even physical pixels. And also in print there are a range of non-paper substrates used, each with its own limitations and peculiar processes for printing on or otherwise marking the sheet.

Paper and paper-like substrates

Paper, either hand-made or machine-made comes in a broad spectrum of weights, finishes, fiber content, colors, coatings, and specialized purposes. This is not to mention that there are fundamental differences in the ways that different classes of paper are produced. All laid, for example has a characteristic set of chain lines visible when held up to light. Most of the paper in use today is wove, which has a more or less uniform texture throughout. I could describe each category listed above in more detail, but I suggest instead a field trip to a paper supplier or well-stocked design studio, or that you order a range of samples for comparison. I do want to briefly focus on two important aspects of paper:

Basis Weight generally helps in determining the suitability of a paper stock to a given usage. It’s the paper’s density that the word ‘weight’ here is trying to describe. In the US, you need to pay close attention to whether it’s a cover weight or a text weight for the number to be remotely useful. It’s given in pounds, with the understanding that, for example, one ream of 40 pound text (40#t), weighs 40 pounds. You may be asking yourself, “Forty? Really? A ream is only 500 sheets. They must be huge sheets of paper.” You’d be right. For text grades, the sheet measured is 25 × 38 inches. Different grades are measured off of different standard sizes (and different quantities for what constitutes a ream). Without physically examining a given stock of paper from a manufacturer, it’s impossible to know what you’re getting. I really envy what the metric system has done elsewhere, with its no-nonsense paper density measured in grams per square meter.

Grain determines in which direction a sheet of paper naturally bends, and most successfully folds. To experience this, pick up any normal sheet of office paper. Put your hands together in front of you with palms facing up and place the paper on top. As you begin to close your palms together, as you would to fold the sheet in half, note the resistance the paper gives to being folded. Now open your hands, turn the sheet 90° and repeat the process. Feel that? One axis bends easily; the other is a bit stiffer. Put the paper back in front of you in the position where it bends easily, and raise your hands to eye level. You’re now looking along the grain. This means that the paper’s fibers lay primarily in the direction you’re now looking. When designing any printed piece with pages that a reader turns, this is the orientation the grain should be in—parallel with the spine. When ordering paper, the direction of the grain is marked either implicitly, 13 × 19, by the second number, or more explicitly, with an underline, 18 × 24. Knowing this stuff is especially important if the design requires folds.

You may be asking yourself at this point, “Didn’t this discussion leave the subject of typography a long way back?” Well, it turns out that the whole of type, the history of the forms themselves, their units of measurement, etc., are responses to the societal, economic, and technical constraints of the time, including for a long portion of its history, the means of printing and ranges of quality in paper. So, the consideration of the suitability of a given type family to a paper stock is one; and two, if the typographer’s expertise is to extend thus far in creating the feel of the book or other publication, should it not also consider how the pages move when turned?

Other substrates

Once you get started, there’s really no end. Wood, glass, metal, concrete, stone, porcelain, fabric, leather, even live animals are subject to branding. Each has its own processes.

We’ll pick up this discussion next week, and I’ll get a into inks and processes. That’s it for now. Using Type continues here Thursday. Thanks to Berton Hasebe’s Alda for setting the title.

The Typographer’s Approach to Typography

On the subject of getting into the head of the typographer, today we’ll walk through some decisions that graphic designers and typographers consider early on in the design process. Frankly, I hope this is useful stuff. Often while tracing the unconscious and intuitively made steps toward a given result, the final piece seems only obvious. Discussing these principles in the abstract and keeping my audience engaged long enough to hear it is the challenge I’ve accepted here.

Typographers-approach-to-typography-1

First, some terms

I know I’ve mentioned this here before, but just for clarity’s sake: Typography is “writing with prefabricated characters.” (Gerrit Noordzij said that.) A type designer is someone who makes type, those prefabricated characters just mentioned. A typographer is someone who specializes in using type. Lastly, though it’s a related field, lettering is not type, and the use of lettering is not typography. Ready to get started? Great.

What is the need?

With client work, a sizeable part of the design process goes into properly forming not the answer, but the question to which the design brief responds. It’s often in the process of conducting proper research that certain strong concepts present themselves. If it’s a publisher seeking a book or book cover design, it’s in the text. If it’s a fashion label refresh, it’s in the cut of the clothes, the demographic data, the histories of its designers. If it’s product packaging, or a music tour, or a cryptocurrency, or a playbill redesign, or a geotagging app, a movie prop, something in the research of the thing, its history, or the people who make it will show up as a distinct piece of the solution. From the beginning of this process, I keep a dedicated book to draw and write down my ideas.

The answer to the brief

Working out what rough forms the project will take given its requirements and constraints, I get to work figuring out what content needs to be created, who best to do it, and what kind of meaning the typography should give to the copy it sets. Special attention is placed on the visual requirements: How do specific marks translate from one medium to the next? How will they perform at large and small sizes? On the store shelves and in the lower third of the morning talk shows? Which typefaces and treatments have the handpicked quality required? Which typefaces will deliver consistent results on screen and in other physical applications? Linguistic requirements: How many languages will this piece be translated into, and is the layout I’ve created flexible enough to function well in the common cases? Adaptable to extreme cases? It’s also during this phase that I consider incorporating substrates and other materials, disciplines, and processes that make sense.

Pause. We’ll hold it here for now. I’ll continue when Using Type picks back up on Thursday. Please let me know if you find this interesting. Thanks to Frank Grießhammer’s FF Quixo for setting the title.

Web Typography: HTML Defaults

Just a quick tip on web typography, since I’m not a practicing HTML man, and I don’t pretend to be.

Screen Shot 2014-05-23 at 3.42.07 PM

Turn kerning and standard ligatures on by default

HTML-Defaults-IMG_2957

When Elliot Jay Stocks came to TYPO San Francisco to talk about the current state of advanced web typography, he ran through a number of changes between two years ago and now in terms of CSS. My main takeaway can be summed up by the above presentation slide, and the following implementation to cover as wide a range of browsers as possible. The current best way to enable kerning and ligatures is to affix these attributes to the page’s body:

text-rendering: optimizeLegibility;
-moz-font-feature-settings: "kern";
-moz-font-feature-settings: "kern=1";
-ms-font-feature-settings: "kern";
-o-font-feature-settings: "kern";
-webkit-font-feature-settings: "kern";
font-feature-settings: "kern";
-webkit-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga" 1;
-moz-font-feature-settings: "liga=1";
-ms-font-feature-settings: "liga" 1;
font-feature-settings: "liga" 1;

The rest of the things that could be considered defaults, such as a paragraph’s line length, or hyphenation, etc., I recommend baking into your design after you’ve considered the conditions under which it may be viewed. While reviewing defaults, it may be a good time to also check to make sure any webfonts used have their styles properly set up.

A note on the value of global resets

I see these becoming less and less relevant. It feels like an over-controlling attitude to take with such a fluid medium, specifying every single element, and then resetting the browser defaults for each to zero, none, etc.. I’m more of the attitude of targeting a specific range of browsers, and then addressing problems as they arise. I’m sure there are reasons why I’m wrong. Please let me have them. Plus, there must be a lot of obvious stuff I’m missing here.

That’s it; and this concludes my series on defaults. Next week, I’ll try to get a better view of typography from inside the typographer’s brain. Using Type continues here Thursday. Thanks to Nick Shinn’s Brown Gothic for setting today’s title.

More InDesign Defaults: Keyboard Shortcuts

First of all, thanks everyone for reading and commenting on last week’s piece on InDesign Defaults. Before moving on, I think I should stress that I bring these things up (setting defaults) mainly so that if you haven’t considered them, you have a place to start. And though I recommend specific approaches because they work for me, if you’ve thought it through and what you’ve got better suits you or your process, do that. Typographer and friend André Mora commented on his method of taking time to experiment with size and leading values before locking things into a grid, rather than enabling alignment to baseline grid by default. Not only do I find this a totally valid approach, it’s also a great one. It’s one I often take. The reason why I prefer working the other way is because it forces me to think in context of a grid system.

InDesign-Defaults-Keyboard-Shortcuts-2

Which I guess could veer us into today’s topic: Shortcuts. Adjusting one’s document-wide baseline grid settings can be cumbersome. Changing the increment by a half a point can mean hunting down the Preferences menu, then finding the appropriate dialog. For me, it makes more sense to just create a keyboard shortcut that takes me straight there. Since the default shortcut for Show/hide baseline grid is (alt/option + ’) which I already instinctively used, it seemed natural to make Open baseline grid settings relate somehow, so I set it to (shift + alt/option + ’).

Why working with standard keyboard defaults makes sense

Every designer selects and hones his or her own tools to some extent. The reasons why I choose to build off of standard keyboard shortcuts is because they’re the ones I learned first (so, out of comfort), and also because it helps keep my skills portable. For example, if I need to slip into someone else’s work environment for some reason, my hands won’t be tied. This also becomes a temporary consideration when an equipment failure requires one to wipe or reinstall a system.

Default InDesign shortcuts I use all the time

Beside the ones common to the OS/most programs, I most often find myself using these below. For Windows, substitute command with control.

Make selected text larger by 2 pt: shift + command + >

Make selected text smaller by 2 pt: shift + command + <

(2 pt is just the default increment by the way, set that in InDesign > Preferences > Units & Increments, Mac, or the same under the Edit menu in Windows.) Holding down alt/option with the above shortcuts changes size by 10 pt increments.

Toggle preview mode: W

Make me a new document, on the double!: alt + command + N

Bring forward / Bring to front: command + ] / shift + command + ]

Send backward / Send to back: command + [ / shift + command + [

Paste in place: alt + shift + command + V

Paste without formatting: shift + command + V

Toggle OpenType case feature: shift + command + K

In pro fonts, the case feature may do more than set the selected text in all caps, for example in MVB Verdigris, it also adjusts the spacing to a looser, all cap spacing. In JAF Bernini Sans, it substitutes in a set of mid-caps drawn just shorter than cap height, but taller than small caps, for use setting acronyms in running text.

Quick Apply: command + return

Screen Shot 2014-05-15 at 9.58.09 PM

This last one is really handy, particularly when applying things that don’t appear on the menus, such as custom styles you create. Also, things that do appear on the menus but are often quite buried, like OpenType features (all small caps or stylistic sets). By the way, if it’s accessible through the menus, you can make a shortcut for it.

I know I’m leaving plenty out for brievity’s sake; There are lots more. Consulting a good chart and familiarizing yourself with the unknowns is best.

Here’s how custom shortcuts are made

Screen Shot 2014-05-15 at 11.39.49 PM

Edit > Keyboard Shortcuts… opens the dialog. From here, pick your commands and assign a key sequence. The dialog will alert you to conflicts should you choose something that’s already taken. You can also save your set. This is handy because InDesign will every so often misplace all custom shortcuts. As I mentioned in the intro, it works best for me to make custom shortcuts that are intuitively similar to standard ones.

Consider adding these to your list of custom shortcuts

Screen Shot 2014-05-15 at 10.34.52 PM

It seems like I’m always using the Type > Change Case commands to capitalize a title or tone down some ALL CAPS. So for me, control + command + U / L / T / S gets me there.

Open baseline grid settings: shift + alt/option + ’

Here’s where I’m really looking for input: What’s missing from my list of suggestions—any shortcuts making your life better?

Mac-specific tip: This means Alt/Option.

InDesign-Defaults-Keyboard-Shortcuts-3

Sometimes checking the menu because I’ve forgotten the shortcut doesn’t seem to clear up anything at all. Anyway, the above broken pair of salad tongs ⌥ refers to your alt/option key. The outlined up arrow ⇧ is shift, the chevron or up arrow resembling a caret or circumflex ^ is control, and the cloverleaf, clearly marked on the keyboard, is command.

Okay, that’s it. Thanks for reading and please leave your suggestions and ask your questions in the comments section below. This series, Using Type continues Thursday. Thanks to  Charles Bigelow & Kris Holmes’s Lucida Grande for setting the opening title, and quite a few of my menus.

 

InDesign Defaults

When Matthew Butterick mentioned this series as a good online source for reading about typography, he also mentioned its general bias towards InDesign in the examples I give. That’s true. And while I deal with and have dealt with plenty of other tools, software and otherwise, for editing, writing, drawing, setting and composing what will ultimately become design that’s typographic in nature, InDesign, particularly the few-generations-old InDesign, is the one I regularly turn to when working with digital type.

Screen Shot 2014-05-08 at 10.13.05 PM

I have to a limited extent touched on the most popular typographic medium, hypertext, and its conveyance, your browser, but it’s still unnecessarily complicated to talk about a simple concept in a simple way, say, kerning, or small caps, when web standards aren’t there yet, and there’s no good way of ensuring that the results I’m getting are the ones you’ll get. Other stuff like columnar layout and text flow, H&J, baseline grids, and the ability to detect the size of final output, are altogether missing from browsers or in their infancy. All that, and the fact that a fixed medium  lends itself well to making a single set of arbitrary and finite adjustments here and there is one of the things that has always drawn me to print work, and for this specific purpose (demonstrating the principles of typography), caused me to remain with a tool made for print production. (That said, I do plan to focus more on typography in the new medium as part of Using Type, but I’ve had a good long run so far sticking to the basics in the old.)

Internal note

As a kind of wrap to what I’ve written in the series thus far I thought, ‘This writing isn’t really giving much of a glimpse into the typographer’s brain; more like the brain stem.’ These principles I’ve covered aren’t what typographers talk about, just as musicians rarely discuss fingerings, or emergency room doctors their stitching technique. These become built-in, and felt, and what happens beyond that point in the creative process becomes much harder to describe. That’s where I want to go though. At least get to something concrete that articulates a principle better than, ‘You’ve just got to feel it.’ There’s wisdom in following one’s instincts, but if the reader doesn’t see the reasoning that leads to the platform from which the typographer instinctively leaps—to the next decision, little good it does. Those benefited are almost exclusively the readers who already understand the concept, those who also ‘just feel it.’

Anyway, forget all this. I’ll get to it and either strike gold or retreat. Today, and over the next couple of weeks, I want to talk more about what happens inside that typographer’s brain stem. And this is shop talk, the painter reviewing his list of brushes and ladders, the photographer his lenses. Kind of as a last final rundown, I want to go specifically over the conscious decisions made working with InDesign before the first project file opens.

General note on setting defaults

When in InDesign, or any of the major CS or CC Adobe apps, the way to set a program-wide default is by setting something while no documents are open. To make document-wide defaults, (and I’m actually not sure this works everywhere) you specify something while nothing in the document is selected. There are other defaults, such as New Document and Print menu defaults, which are set within those menus using a Save Preset dialog.

The defaults

With no documents open, consider what to keep from what’s already chosen for you by default. In the Character palette, set the font family and size if you have one in mind. Here I set mine to Jordi Embodas’s Pona 9 pt and leave the leading set to auto. That’s what the parentheses mean.

Screen Shot 2014-05-08 at 8.58.25 PM

Now, this next part is important. Set the kerning value to Metrics. This, not optical, should be your default. See above.

Screen Shot 2014-05-08 at 9.21.00 PM

Also, through the top rightmost button on the Character palette, which looks like a tiny down arrow next to three horizontal lines, enable Ligatures and Contextual alternates. This last one allows for example complex connected scripts to work as intended.

Screen Shot 2014-05-08 at 9.10.04 PM

On to Paragraph. Select the Align to baseline grid option at the lower right. I also recommend hyphenation being on by default. Change if you disagree, or if the language you primarily work in doesn’t have a very good hyphenation dictionary or whatever.

Screen Shot 2014-05-08 at 9.36.11 PM

The place you set up the baseline grid is under (on the Mac) InDesign > Preferences > Grids, or the same under the Edit menu in Windows. Here I set my increment to 6 pt, and Start at the top, 0 in.

And of course I use points and inches because I’m an American, but if you’d prefer millimeters and centimeters, the same can be set one dialog up from Grids in Units and Increments.

Screen Shot 2014-05-08 at 9.47.47 PM

Unless you work primarily with Pro fonts, the following is ill-advised: Go to Advanced Type and set the Small Cap height to 25%. And while you’re at it, you may consider altering the superscript and subscript values. What will this do? Instead of InDesign surreptitiously inserting fake small caps, this setting will make all fake small caps terribly noticeable. You can then go and replace them with properly drawn and proportioned real small caps. The same goes with these settings for super- and subscripts.

Screen Shot 2014-05-08 at 10.07.44 PM

Screen Shot 2014-05-08 at 9.59.37 PM Screen Shot 2014-05-08 at 10.02.38 PM

Lastly, hyphenation and justification. Follow these settings, referring to my post on the subject to know when to deviate, for example, when exporting a PDF to be read primarily on-screen you should never scale glyphs. These are set from the top rightmost corner of the Paragraph palette. After looking at it, I think I’ll have to revisit my decisions on the hyphenation of certain words or words that lie in precarious places.

That’s it for now. What am I leaving out? Next week we’ll continue on the subject of defaults. Thanks again goes to Jordi Embodas’s Pona (my new default!) for setting the title.

Defaults in Design

Starting the series back up on the subject of defaults, I spent some time thinking about how the limits imposed on the work we do ultimately influence our work’s form.

Using-Type-title---IMG_3024

Though we’re the designers, and we make the stuff look the way it does, a flip-through sampling of the pages of any advertising or design annual from the last fifty years will reveal its decade of origin—not by looking at the cover, or even the content, but just by examining the processes used. I say limits meaning both those we prescribe and the external constraints imposed by the job or environment. Sibylle Hagmann gave a great talk at TYPO San Francisco on advertising design in the GDR (Germany behind the Iron Curtain) where she pointed out that it was the great shortage of material related to typesetting and design production that led to the development of manual processes and a diversity of interesting and highly refined illustration and lettering styles.

IMG_7027-530x353Sibylle Hagmann speaking on Typography and Culture; Photo by Amber Gregory

 

Seeing how an entire subgenre of design grew out of a set of constraints further opened my eyes to the idea that the look and function of our work is largely a matter of the defaults we accept. And that learning to recognize the previously unconscious decisions we make both frees us and constrains us to use and invent new processes and to be aware of the effects of our choosing.

To introduce a more practical side to this discussion, I thought it would be interesting to look specifically at the defaults I accept, so, over the course of the next few weeks I’ll walk through some InDesign, Illustrator, and HTML/CSS defaults I find handy, as well as touch on some manual processes I go through when designing for screen and print.

That’s all. Thanks to Kent Lew’s Whitman Display for setting the title. Catch the first iteration on defaults here next Thursday. This is Using Type.

Fine Print: Fonts for Small Sizes

Type designed specifically for use at small sizes attempts to solve the problem of too much to say in too little space. When conserving resources (ink, paper, etc.) comes at the cost of legibility, it’s best to plan your type palette around faces made to perform below conventional text sizes. How will you know which faces hold up small? Here are a few principles to consider:

Picture 1

Choose something generally robust.

Picture 3

The x-height should be relatively large. Counterforms need to be accentuated. Spacing should be pretty generous. And careful with fine lines—they tend to disappear. Notice above how ITC Bodoni Six differs from a larger optical size Bodoni Seventy Two. This brings up another point. Sometimes a font’s name includes a reference to its optical size, such as a number, or the terms agate, pearl, or micro. Any others come to mind?

Size-specific optical corrections

Picture 2

As if reproduction concerns weren’t enough on their own (managing inevitabilities such as ink spread and so forth), at small sizes your eyes tend to further distort the letterforms. For example, when strokes intersect, (especially at acute angles) the negative space closes up near the intersection. This is remedied by forcing white up into the crotches and joins by way of light wells or ink traps, as you can see above in Matthew Carter’s Bell Centennial. Other phenomena, such as the flattening and squaring off of curves are counteracted by enlarging the gestures of each form. These are easy to compare in faces that have a range of optical sizes. Without, it just takes testing and practice recognizing what works and why. To get you started in the right direction, here’s a FontList of type that works at small sizes curated by a friend and fellow typographer, Nick Sherman.

Picture 4

Take these principles into consideration and you’ll find they apply not only to print, but also to screen media that’s meant to be viewed from a distance. You may also find, as many have, that the unusual texture of faces designed for small print, such as  Joshua Darden’s Freight Micro above, can be quite appealing at larger sizes. That’s it. Using Type continues here Thursday. Thanks to Nick Shinn’s Scotch Modern for setting the opening title.

Two Spaces After a Period—The Definitive Guide

When you’re typing, you may out of habit put in an extra space at the end of a sentence; That’s two spaces between the closing punctuation of one sentence and the beginning of the next. Or it may not be out of habit, but rather, on principle. Let’s talk about that principle.

Two-Spaces-2

Before common use of the space, early Latin writing ran in a continuous script, a stream of letters, line-breaking often in the middle of (what we call) a word. With the addition of spaces, and later, punctuation, words as we now know them developed, and along with them, sentences, grammar. As to the amount of space between sentences, that would vary by hand and circumstance until moveable type.

Screen Shot 2013-11-14 at 6.17.33 PMNicolas Jenson, Venice, 1475.

And after. You see, spaces come in a variety of standard sizes. The earliest works printed from moveable type were all set in justified columns, meaning that the width of each word space expanded or contracted slightly from the normal word space to fit different numbers of characters per line as needed. In these early samples, the amount of space between sentences ranged from quite wide, to slightly narrower than the space between words. The most obvious reason for using a narrower space here is to maintain an even typographic color, since the period traps quite a lot of negative space on its own. By the late 18th century, conventions favored more generous sentence spacing. My take from all this early letterpress stuff—counting the number of spaces after a period is as pointless in samples of early printing as it is in handwritten manuscripts. This holds up until of course, typewriters.

Two-Spaces-1Published by Anson D. F. Randolph, New York, 1864. The text is a Caslon.

With typewriters, we get three things—unjustified type, fixed-width typefaces, and typists. The first two pertain to our discussion because we can now count precisely the number of spaces after the period. The third, because our usual scheme of submitting something to be published just got another layer. The typewritten page became both an interim format and a final format for papers and books. Scholarly papers, for instance, were submitted as typewritten manuscripts which then did the rounds between editors, and on to typographers, and ultimately, typesetters. In contrast, for some publications, the typewritten page (or a copy of it) was the final. Whether two spaces after a period arose as a standard under the first typing instructors’ imitation of the printed page, or the practice began independently of what came before, is unclear. Ultimately however the question of how to compose the input should be settled by its output.

The common convention for published works today is a single space between sentences.

If you’re submitting your writing to be published, save the typographer the trouble of finding and removing all those additional spaces by not keying them in in the first place. If you’re producing final output on your own (writing for a blog, etc.) the same rule applies.

Unless

Keep putting two spaces in if:

  • You’re typing on a manual typewriter, or your final output will emulate the look of that of one.
  • If you’re specifically pursuing a naïve style.
  • If your style guide requires it.

This last one you should be careful to do begrudgingly, like I do when occasionally required to capitalize the word ‘Internet.’ Which arcane style guide requires two spaces after a period, you ask? APA Style does. MLA, Chicago, and AP have all questioned the usefulness of that second space and decided it’s best to go without.

And that’s it. Thanks for reading. Thanks also goes to Evert Bloemsma’s FF Legato for setting this week’s nameplate. Using Type continues here Thursday.

Doing Responsive Typography

Responsive typography makes it possible to serve typographic compositions that adapt to fit their various environments, resizing, reflowing as necessary to best serve the reader, whether they’re viewing the content on a phone, a cathode ray tube, a large display, in print, or something in between. With this piece, we’ll take apart a simple example of responsive typography I made, and see how it works. Adapting other aspects of typography beyond size, measure, etc. is certainly open to further exploration, but I’m keeping this first one simple.

Responsive typography is just typography.

All normal principles apply. The new principles involved deal mainly with being mindful of in-between states—the areas just outside your control. Ready? Let’s go.

Doing-Responsive-Typography-1

Here’s the demo I made.

I started by setting up a development environment on my computer (an Apache web server), and tested on real devices as I went. I wrote the markup and styling (HTML and CSS) in a text editor (BBEdit). And I did a lot of fiddling with the styles in the browser (using Firebug, an add-on to Firefox).

I built out the structure of a two-column layout with the idea that as the width of the page contracts, the right column is hidden. (I could have just as easily turned the right column into a footnote or something.) I styled the page following my own CSS advice: specify as little as possible. In the HTML header, I added this important meta tag:

<meta name="viewport" content="width=device-width"/>

This prevents smaller-screened devices from displaying a scaled-down desktop version of the page. It keeps the text from getting too small. Don’t underestimate the importance of this step.

Set the body font-size to 100%.

Type that’s sized smaller or larger from here should be specified in em units. Since em units change depending on the font-size specified in a given element, you may want at times to refer to the original em you specified. You can. They’re called root ems, or rem units. In the right column, I give the line-height in rem so that I’m able to maintain the same baseline rhythm as the normal body copy. (Since the body’s line-height is in rems, I could have just as easily set the right sidebar’s line-height to inherit.)

Just as an aside, reorienting from portrait to landscape has become commonly understood as a simple way to make the text a bit larger. Some (those with poorer eyesight) are in fact counting on this. So just because you can maintain a consistent text size across different orientations doesn’t mean you necessarily should.

Screen Shot 2013-11-07 at 7.55.06 PM

Give yourself margins.

One common problem with typography on the web generally is a lack of margins. Setting margins to auto works fine until the window or viewport causes that auto value to go down to zero. So in this example, I put an additional 2em body margin outside the content wrapper’s auto margins.

Breakpoints

It’s precisely at this spot where the auto margins hit zero that I place my first breakpoint. More like a transition/squish-point, really. All that changes when the viewport goes down to 52 ems is that the content wrapper goes from a specified 45 ems in width, to taking up 100% width of its parent element, the body. In CSS, that looks like this, just below everything else in the file:

@media only screen and (max-width:52em) {
 #wrapper {
    width: 100%;
 }
}

Screen Shot 2013-11-07 at 7.56.15 PM

As the two columns shrink in size, their text reflows as needed until the right sidebar column gets too narrow. At this point, for simplicity’s sake, I just take it out, and let the main column take up the full width.

@media only screen and (max-width:45em) {  
  #sidebar {
     display: none;
  } 
} Screen Shot 2013-11-07 at 7.57.38 PM And it's that simple.

What’s left to improve here? Well, for starters, I think I could show more variety in terms of type size and webfont specification. Maybe the right sidebar could go up a touch in weight. I could get those baselines to reconcile.  I could demonstrate how to target different screen resolutions differently. Seems like the measure on the iPhone is a bit narrow. And I could definitely do something more interesting with the layout at larger sizes. Maybe add a nav area to show how to scale and selectively show/hide links. There’s really a lot I’ve got left to explore.

I’ll return to this series on responsive design from time to time with demos of stuff I find interesting.

Using Type continues here each Thursday. Thanks to Nicole Dotin’s Elena for setting the nameplate, and of course Michael Abbink’s FF Milo Serif Web for the live demo text.

Understanding Responsive Typography

Forget what I said last time. Opening my mind to all the ways I can think up for how responsive type can work has generated a great delay in me actually coming up with a coherent message on how it’s done. The fact is — even if we limit the scope of our interest to technologies that are currently accessible and mainstream — we still live well under our privilege when it comes to what’s possible with responsive typography. So rather than a show and tell, where I say ‘here’s how it’s done,’ I’m instead focusing on pushing the boundaries of what’s considered responsive design just a little, and giving a few pointers along the way.

Using-Hierarchy-1

What responsive design means now

To most in the field, responsive design means controlling the presentation of a webpage through some carefully written CSS that checks the minimum width of the viewport and rearranges the layout, reflowing the copy and bumping the size of the text up or down accordingly. Often the design transforms along a small set of three or four base layouts, separated by discrete breakpoints.

What responsive design can become

Oliver Reichenstein touched on this in a talk he gave at TYPO San Francisco. He was discussing how for his app, Ai Writer, Nitti Light worked perfectly; but after Apple introduced its higher resolution Retina display, the type was all wrong. Something had changed. It was lighter, but it had also subtly lost its character in the new environment. This problem is something that can be helped by responsive typography. And this is a good starting point, but really only one avenue to explore among the many I alone see. Here’s how I break it down: There are conditions that can be measured, and there are responses that the design can make. And there’s a step in between that deals with how capable and trustworthy the data that measures the conditions is, and how reliably an appropriate response can be formulated and made.

Conditions that may elicit one or more appropriate responses

Size of output, intended purpose of the design, number of persons viewing the content, one Nick Sherman pointed out that I mentioned last week: distance from eyes to the reading surface, are all huge factors in how best to show content. Also, things like facial expressions, or the part of the screen on which the the viewer’s eyes are focused may be particularly useful. If projected, the position, color, texture, and motion of the object(s) onto which the content is projected could open interesting possibilities. Back closer to the here and now, things like region, location, position in space, current speed/momentum, ambient light (value and color temperature) and proximity to other devices are additional conditions to consider.

Ways the typography may respond

The obvious ones are things like font size, length of measure, line height, margins, etc.. Others within present reach are the font’s weight, color, style or family. And just outside of easy reach are movement, perspective, and direct manipulation of a font’s masters, (meaning that the type would respond fluidly across changes in weight, width, or any other arbitrarily defined axis, such as serious to playful, futurist to humanist, Persian to Arabic).

Just to conclude these thoughts for now, I know we’ve taken a hard road to get where we are with webfonts actually working as well as they do, but I wonder if it isn’t time to move on. I hope we don’t get too comfortable with type and typography in its present form.

Using Type will pick this back up on Thursday. Thanks Telefon from Monokrom for setting the title.

Responsive Typography

Responsive typography extends naturally from the idea of responsive design, a term first appropriated to the field of graphic design by Ethan Marcotte, which he took from his observations in a different field, responsive architecture. The main idea is simple: a single webpage being displayed on multiple devices, each with a different-sized viewport, must adapt to function in its different environments. The previous answer to the question was to maintain a separate mobile friendly site, possibly further distinguishing it with a .mobi domain. (I can’t think of anyone offhand who presently does this.)

Picture 1

The current method uses CSS media queries to get a sense for how large a screen the site visitor is seeing. If it’s large, the code styles the page to show everything you’d expect browsing the web with a desktop computer. If it’s small, the styling changes the body text to take up the full column and sizes it to be readable on the small screen. It likely also pares back the user interface to its essential or most useful elements given the context.

Picture 2

Such a set of media queries only takes into account the size (and perhaps tangentially, the resolution or orientation) of the screen, but as new thought on the subject is pointing out, there are a number of other factors to which screen media can and indeed ought to respond. Nick Sherman gave one example, the distance from the reader’s face to the reading surface, in a talk last week at ATypI. The proof of concept was done by Marko Dugonjić. Also, the way a layout or composition responds to its environment or viewing conditions is something still completely underexplored.

We’ll pick up this discussion next week, and I’ll get a into the practice of how responsive typography is done. That’s it for now. Using Type continues here Thursday. Thanks to Alda for setting the title.

Making Your First Font—A Little Guidance

Last time on Using Type, I opened the subject of designing your own fonts. Whether or not you pursue type design, as a hobby or professionally, starting the process of creating a typeface on your own can offer insight into how type works, how to use it well, (and certainly) how much trouble type designers go to to make truly great type. In bringing up the subject last time, I left most of the particulars up to you, but if you’d like a little more direction than that, here it is. By the way, this is just how I approach type design, there is no singular ‘right’ way to go about it.

Fonts-Making-Your-Own---Guidance-2

Mess around a lot first.

Get your ideas in front of you on paper. Your hands will provide special abilities as well as impose specific constraints that the computer won’t. Keep it analog during the exploratory phase. There’s no need to seek out special materials. Whatever you’ve got will do. When you’ve got a concept you feel like pursuing, tighten up your work a bit, and move on to the computer (unless of course you’re producing purely analog type).

Fonts-Making-Your-Own---Guidance

If your design is modular in nature, (something to produce in FontStruct or some pixel-based font editor), get right to it. You’ll likely be able to see and test your work right in front of you and probably don’t need my help getting going. Otherwise, there are a number of considerations left to touch on.

Is this type or lettering?

What’s the difference, you ask? Designing type is making a cohesive set of interchangeable letterforms (or characters) that work in every possible combination. (Or at least all the most probable ones.) In lettering, the forms only have to work in a single, specified order. Because the constraints on lettering are less rigid, lettering can do things that type—generally speaking—can’t, such as stray from its baseline or fill some arbitrary shape or dimension. You should experiment with lettering too, but this piece is about designing type.

Start small; Test as you go.

Fonts-making-your-own-3

Start with whatever will be used most. If you’re creating a text face, I’d recommend you begin with and spend most of your time on the lowercase. If it’s an all-caps display face, start there. The first thing I do is choose a word or short phrase that includes a good representative sample of the characters, and also one that demonstrates well the overall feel of the face, and get started creating just those characters. Make sure the concept is working well with these before moving on. Begin with your control characters: in the case of a Roman uppercase, that’s H and O. (Lowercase is similarly n and o.)

Picture 1

This is where I recommend you slow down and take your time. Getting the spacing of the straight-sided and round characters solidified gives you the standard by which you space and fit the rest of the characters as you draw them. Remember to export new font files often, print out test files and check your prints.

Keep your alphabets separated.

The capitals, lowercase, and figures (numbers) are all separate things. When drawing the characters in your typeface, fit and space caps with caps, lowercase with lowercase, figures with figures. Then kern like with like, and then kern caps to lowercase, etc.. My own philosophy on kerning: treat it as a last resort. Many spacing problems can be resolved with proper fitting and spacing.

Seek professional help.

Attend workshops, read books, participate in forums such as Typophile’s and TypeDrawers’. Send your favorite type designer a letter. They love letters.

That’s it for today. Using Type continues here Thursday. Special thanks to Gnosis by Gábor Kóthay for labeling the series up top.

Fonts: Making Your Own

We get requests from time to time by young designers wondering where one begins when they want to design their own font. I could suggest that they leave this to the professionals, but that would be a missed opportunity, since it was specifically because I picked up a pencil and drew the type around me that I developed a sense for how different typefaces do what they do, and how type genres relate to one another. So inasmuch as learning to talk about type anatomy and dabbling in type design offers insight into using type well, I’m including this in our series on using type.

Comma,-Apostrophe-1There are plenty of different approaches to type design. Some designers do very tight drawings on paper, others sketch just enough to get the main ideas worked out. Some, from this point (myself included) skip the step of digitizing hand work and compose directly on screen in a font editor. Some draw only on screen (I discourage a beginner from following this method, by the way). Figuring out what your shapes should look like, knowing which to begin with, drawing them, fitting them, testing and adjusting them to work properly in whatever context is required for target output is largely what type design is. And by necessity, the process varies with the requirements of each design.

IMG_1476To the graphic designers interested in type design who are now reading this: If you want to design type as a hobby, or for a one-off project, great! (And if you want to take it further, great!) It’s never been easier to start drawing type. I would recommend beginning with something simple you can complete in a few days’ or weeks’ time, just to get the hang of the entire process. Certain constraints and genres of type naturally lend themselves well to a quick project, such as a pixel-based design, or a constructivist face. I recommend FontStruct for someone who just wants to jump in and start making something: Arrange “bricks” on a modular grid, fill out your character set, and download your font.

Picture 1For designs that don’t work on a modular grid, you’ll need a font editor that allows you to draw and space your own vector shapes. These include Glyphs app, RoboFont Editor, Fontlab, Fontographer, and the open source editor FontForge, among others.

Picture 2An alternative to drawing your own vector shapes is to autotrace work you’ve scanned using a relatively inexpensive program called ScanFont. (There are others.) Depending on the level of quality you’re pursuing, the nature of the design, and your means of reproduction, this might be precisely the solution you’re looking for.

Follow this advice and chances are your first typeface will be a great learning experience (and honestly, I wouldn’t expect much more from it beyond that.) Good luck, remember to move on, and let us know how it goes!

Also, reach out to members of the type community, online and in person. They’re generally very helpful since every one of them has been where you are now. Once you’ve completed your first face, process stories like Tal Leming’s reflection of his new sans, Balto, will be even more meaningful to you.

Using Type continues here Thursday.

Follow

Get every new post delivered to your Inbox.

Join 61,747 other followers