What Comes First? the Copy, or the Typeface?

We have a sort of chicken and egg dilemma today: What comes first? The copy, or the typeface? There is a fine line between designing with or without the words.

Typography and design can alter what you think about when you read words. Think back to the process. Do you pick a typeface first or wait for the copy? (Without giving too much away, the secret is collaboration. If you don’t work together, you’ll only end up with a blank canvas.) Here are a few different scenarios and suggestions.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

The Dilemma

typography

A project deadline is looming. You and the copywriter are working independently. But if you don’t get started on the design, there’s no way you’ll make the deadline.

So you start drawing. The design brief was pretty good so you have a decent idea as to the feel of the project, branding requirements and color palette. But when it comes to the typography, you are on your own.

It’s likely that this dilemma will be the source of some major stress at some point. You can either get the design – and type options – started and well under way and force the copy into them or end up rethinking all the type when the copy comes in. Neither are very good options. So what do you do?

Headlines

typography

The biggest and boldest copy in the design needs to fit the tone and mood of the project. It also needs to be readable.

Sadly, as the designer, this often means that you really need the words first. Will the headline be 10 characters or 100? That simple factor alone can make a huge difference in the style of typeface – wide or condensed – and if the headline is a single line or rows of stacked text.

Is the headline used as a major part of the display? If so, this makes it even more important to have the copy ahead of making a final decision on the typography. How will the letters work together? Do they stack well based on x-heights, ascenders and descenders?

And finally do the letterforms actually look good with the words that will be used? (Sometimes certain typefaces and specific letters just don’t work together and this can really come into play with larger type.)

Smaller Bits

typography

Aside from the headline will be plenty of smaller bits of copy throughout the design. Elements such as navigation labels, callouts, button text and contain or footer information are included in most project types.

You can almost fill in all the text in the early stage of the design and it is likely that it won’t change that much. (A few digits of a phone number or name of the point of contact might change, but nothing too drastic.)

So go ahead and select a typeface for this information. The important factor here is to have an idea of where you are going with the overall typography when you make this selection so that they lettering pairs well with other type throughout the page outline. By using a “neutral” typeface here, you can increase the chances of it working once other typefaces are matched.

Body Copy

typography

The amount and style of body copy in your project will dictate how early in the process a typeface can be picked.

For blog or content-heavy projects, go ahead and make a selection early. As with smaller copy bits, choose a neutral typeface that is highly readable. (You might even use the same typeface here at different sizes.) Focus on creating a framework for large text blocks that digestible and easy for readers. (Use placeholder text in the design to give you a feel for the look. Unlike with larger text elements, you can use lorem ipsum to your advantage here.) Determine how to accent type within large blocks with elements such as bolding or color.

For projects where there is a more limited amount of main body text, such as promotional websites, it is best to hold off on picking a body typeface until you know what other typefaces are going to be a part of the project, and until you know what the copy is. While this can be frustrating at times, when there is limited body copy, treat it like headlines.

Icon Fonts

This is an easy one. If you are using icon fonts, go for it right away.

The nice thing about these “fonts” is that they are not lettering at all and are design divots that can be used throughout the project. Make a choice that fits the mood and tone of the design and move forward. One small piece of advice: Simpler is usually better when it comes to icon fonts.

Typography and Design Tips

typography

Now that you are thinking about the different text elements and when they copy might arrive, there might be an element of panic sneaking in again when it comes to that deadline. But there are a few more things you can do to help keep the project moving – and hopefully settle on a type palette.

  • Befriend the copywriter: Get to know the person writing the copy and ask for a little help. Find out what he or she is thinking.
  • Become an editor: A good editor can shape and mold words from the copywriting team in other ways that help fit the message to the design.
  • Count the type and use similar counts: Design with type counts in mind. By knowing how much space a specific typeface will take, use a letter count to get started. (You likely know whether the team tends to be terse or verbose; use a best guess to get started.) Then if you make a change to the font, go for a similar count and everything will still fit.
  • Design with styles to make swaps easier: Make sure all copy blocks are designed using styles so if you need to switch a typeface you don’t have to do it letter by letter. This takes a little more time to start but will be a lifesaver if (when) changes need to be made.
  • Ask for a preview: Get a rough draft of the text. Just remember that it is rough and will change.
  • Write your own copy: If you know enough about the project, write the copy yourself.
  • Pick a shape and slant – round or oval: Settle on the style of lettering early so you can match fonts more easily. You’ll likely want to determine wither typefaces will be more round or oval and which direction letters will slant (if at all). You can also make choices about how tall letters are with a few options of similar x-heights and whether you are working in upper- and lowercase letters or caps or something a little funkier.
  • Stick with typefaces from other branding: When in doubt, use the brands standard typography palette.
  • Rough out everything in Helvetica: This “universal” font gets that reputation for a reason. Rough out everything in a single typeface that’s pretty average and swaps won’t be as tough.
  • Go with what you like and sell it: Design the whole thing and sell it if you can. This depends on your level of comfort and involvement with the project and team. (Do it poorly and you risk people not wanting to work with you again; do it well and you are a star.)

Conclusion

And we circle back to the original question: What comes first? The copy, or the typeface?

Unfortunately, there is no magic solution. Hopefully, we’ve been able to walk through some ideas to make the process a little easier and tips to help you better meet deadlines. But working with copy and type on a team can be tough. The key is making sure everyone works together toward a common goal. (And having a few go-to fonts in your toolkit doesn’t hurt either.)

Stock photos courtesy of Death to the Stock Photo.