Typography

ISOD Logo

Typography

In the world of design, unfortunately a little math is sometimes a necessity. That's bad news for me, as math has never been a strong suit for me. I do however access the ability to find "center" by eyeballing a layout and can glance at a graphic and tell roughly how many pixels it is.

Oh, wait. Did you want that in Points or Picas? Or Inches?? Oh my. That's where the trouble starts. To be a strong designer you must also be able to translate your work into the measurements of your medium. Back in college laying out yearbook spreads in PageMaker (is that even still around?) we did everything in Picas.

Each interior layout consisted of sharp margins between photos and blocks of text all 1 pica. Exactly. No wiggle room. Soon after, I could hit exactly a 'pica' without even pulling down a ruler guide. Remarkable? Not really. What is remarkable is the ability of a designer to then talk intelligently as they switch mediums. Insert Web design. Picas? No way.

 

If you're new to typesetting it can be very overwhelming. But it doesn't have to be. I've recently been asked by several student designers to elaborate a bit more on Typesetting procedures and best practices.

Overview:

  • All books should be typeset and gathered using InDesign’s “Book” feature. (No books that contain “chapters” (including Slims and Minis) should be set up as a single flowing document).
  • All books should follow a standard “style” labeling schema for both Paragraph and Character styles as detailed below.
  • All elements within a document SHOULD be utilizing paragraph styles.
  • Master pages should be utilized as much as possible.

Let's face it. Being successful as a designer often means we must be everything to everybody. Need business cards? No problem. Need an event banner? Got it right here. And thus is the life of design. To me, that's the best part. I love learning new techniques, new ideas and new technologies that increase my 'value' as a designer. We've already talked a little about ebooks and the new opportunities emerging for designers in this area.

But, I realized that we can't talk intelligently about ebook design until we really get the basics of book typesetting down. Today we are going to cover frequently asked typesetting questions. Feel free to leave comments below with your own questions about the trade and we will address those as well. What program should I use to typeset a book? To create a professional book typeset you will need to use a page flow software.

 

The Outline view of my first successful attempt with the Mesh Tool in Illustrator CS4. As I'm learning and playing with the mesh tool in Illustrator, I've stumbled upon a few tips/tricks that I wish I had Day16_Lillyrealized when I started.

1. Work WITH the Grid. When you first create your simple shape and begin to use the mesh tool to establish your grid lines, be sure to work WITH the grid. Don't fight it and Don't try to work against it. Now, as I was learning a friend kept saying this to me, "Work with the Grid" "Work with the Grid". Unfortunately, what they didnt know was because the initial shape I had selected (a maple leaf) had such a unique outer shape, the grid was automatically SUPER complex and confusing. In order to work WITH the grid, be sure to start out with a SIMPLE shape as you're beginning. 

2. Avoid images with lots of details. While you're learning and playing with this tool, be sure to avoid images that contain lots of super details and a wide range of colors. Initially the first flower I attempted was a Tulip. Well, if you're familiar with Tulips, you know that they have multiple petals and can range in several colors within one flower. That didn't work out so well for me. As I get better, I'm sure I'll be able to move into more detailed images, but be careful what you start out with so that you can get a clear grasp on the function of the tool.

3. Soft blends vs. Hard lines. Another significant tip that my friend pointed out as I began learning this illustration technique was to watch the handle bars on my blending points within the mesh grid. (If you're working with this tool you'll understand what I mean).

In order to get a hard blend line, the handle bars should overlap for crisp edges. However, if you're wanting the colors to softly blend into each other, then you will need to simply pull the handle bars back and keep them shorter and separate from each other. I'm sure as I get more experienced and learn more about the tool myself, I will have more tips and techniques. If you are profecient with the Mesh Tool I'd love to hear your feedback! For now, I hope you enjoy today's bookmark:

My first really successful use of the Mesh Tool to create an illustration. Enjoy! You can download your bookmark here.

 

[caption id="attachment_173" align="alignleft" width="150" caption="Beginner\'s Corner"]Beginner's Corner[/caption]

We've already discussed when we started this series on typography that typography may very well be one of the most important elements in any design. How do you know if your typography is strong enough? It should answer the following criteria:

  • Lends to the design, not taking away from it.
  • Easy to read and comprehend.
  • Makes an impact and draws attention as needed.

You may be thinking, that SOUNDS easy but it can't possibly be. How do you actually accomplish ALL those things in a single design?

Typography is funny that way. To ensure that it's ADDING to your design, ask yourself the following questions:

  • Does it really EXPRESS what I want it to say?
  • Can it be read easily from a distance?
  • If I've used "Fancy" fonts, am I sure they are at least 16pt? Large enough to read?

Now that we've determined what your text should accomplish, let's take a step back and discuss some other types of fonts. We've briefly mentioned that any "fancy" fonts would need to be large enough to read, so what does that entail? What are these "fancy" fonts I'm referring to?

To me, "fancy" fonts refer to anything that is not either simply Serif or Sans Serif.

DaFont.com, one of my favorite sites for typography inspiration, has several categories of these type faces, ranging from Grunge, Comic Book to Scripts and Calligraphy. Let's look at a few of these (the fonts I'm showcasing here are avialable on Dafont.com!)

[caption id="attachment_171" align="aligncenter" width="600" caption="Western Fonts"]Western Fonts[/caption]

One important thing to note when you're looking at free fonts, watch the licensing laws they were released under. You will find that information on DaFont on the right side of the screen. Some are only free for personal use, others are simply free.

[caption id="attachment_172" align="aligncenter" width="600" caption="Script Fonts"]Script Fonts[/caption]

We're gonna end here for today in an effort to avoid overloading you with information. We will pick up this topic and continue!

Stunning Typography

Recently a design student was perplexed when I requested that she "spice" up her typography. She let me know that one of her instructors did not allow her to add anything to the typography.

She had learned that typography effects were the first sign of an amateur. While I can definitely confirm that I've seen some typography tricks that were so poorly applied or so hideous that they were indeed the marks of an amateur designer.

However, in an effort to avoid throwing the baby out with the wash, I think it's important that young designers are taught the ins and outs of typography effects without the bias of "simplistic style" so that they can appease the client with the greatest amount of design prowess available.

The next few posts we'll be looking at keys to creating this stunning typography and carefully exploring the effects and techniques available.Typography

As a designer, chances are you find yourself relying on the staples when it comes to font families: Futura, Helvetica, Gill Sans and Times New Roman for instance. Sometimes these familiar typefaces are a necessity. So how can you "freshen" a design that is based around a boring, common font?

Fresh Fonts

Recently in an article by Stephen Coles in HOW Magazine, the solution was delivered. Coles shared typefaces that could replace and revitalize "common fonts".

 

I'm gonna take it a step further and provide you links to these fresh fonts so you can download them yourselves and use them the next time you are tempted to reach into your designer's kit for an overused font family.

 

Coles said that typefaces are the "clothes that words wear".  I love that analogy. The truth of the matter is that no matter what words you have on the page, the way you "clothe" them can make or break the design.

 

Enough ado, lets look at these Font alternatives:

Alternatives for Futura:

>Super Grotesk

>Proxima Nova

 

Alternatives for Franklin, News and Trade Gothics:

>Spiegel

>Benton Sans

>Bulldog

 

Alternatives for Gill Sans:

>FF Milo

>Agenda

 

Alternatives for Times New Roman:

>Le Monde

>Arnhem

 

As designers there are 2 fonts requests that strike fear in our hearts. The first, "I found this font, Papyrus, can you use that in my logo?" The second, "I want it to look like this: . . . " And then the client holds out their flyer with a LARGE Comic Sans headline. How do we salve our creative consciences and simultaneously please the client!

 

Alternatives for Papyrus:

>Mariposa Sans

>Oxida

>Palatino Sans Informal

>Florentine Set

> ITC Cancione

 

Alternatives for Comic Sans:

>MVB Grenadine

>Tafelkreide

>Digital Delivery

>MVB Calliope

 

 

 

 

Beginner's CornerThe typeface and fonts you use in a design are often the most important decision you will make as a designer. In a previous post, we've already discussed the basic differences between Serif and Sans Serif fonts, in this article lets look at the 4 basic rules of selecting the perfect typography for your piece.

 

Rule 1: The Family Comes First. For continuity in a design, attempt to rely on a single font family. To avoid being backed into a corner, choose a family that has a variety of weights and faces.

WALKWAY FONT


Rule 2:
Use Diversity. While working within the family is the first place to start with any design, adding a distinctive typeface can create additional visual hierarchy and interest. Be cautious however, when adding additional fonts limit the selection. Very rarely would you ever want any Remember that Counterpoint and Contrast are stronger than harmony. The least risky, out of family contrast is combining a serif and sans serif font.

Rule 3: Combine similiar proportions. The reason you can't easily mix Helvetica and Times together is the difference in letter proportions. These fonts combined look awkward, not coherent. On the other side, a combination of Arial and Times would work well, because the letter proportions are similar. Be aware of the x-height of the letter's you are combining.

 

Can you tell which one is Arial/Times or Helvetica/Times?

HEADLINES

The top sample is the correctly proportioned combination of Arial and Times, the bottom example is the unproprtionate combination of Helvetica and Times.

 


Rule 4:
Limit combinations. Don't use a font if you don't have too. There is a fine line between diversity and font clutter.  Each typeface should provide a definite and specific purpose within the piece you are designing, if it doesn't it's chaos that's not necessary and should be replaced with a previously used font.

 

 

While I firmly believe every rule is made to be broken, I also believe you must have a firm grasp of the rules before you can break them!  Enjoy your type design!

kern-what?
Text kerning refers the space between the letters. Now, this is not to be confused with tracking, which is the space between the words. Or leading: the space between lines (known as line-height in Web circles). Good typography utilizes both. The more white space in your layout the more reader-friendly your text will be.

By adding kerning to display text you can create a lighter, modern feel to your design. Similarly, by tightening the kerning you can create a denser feel to the layout, making it heavy and bulky on the page.

Kerning Example

Adjusting the tracking can alleviate bad breaks in the copy caused by justified text. Slightly adjusting the tracking in a line is not noticeable, however for a light and airy effect try adding a little extra trackingto a paragraph for an easy-reading experience.

 

Tracking Example

Last but not least, leading (pronounced ledding) is the space between the lines. As with everything else, the more space you have between lines the easier it is for the reader to separate the lines of text as they read. A good rule of thumb is to have at least a 4 pt increase in size (i.e. 12 pt font, 16 pt leading). Obviously, this guideline is based on a perfect world. Often you have to adjust your text to fit within the space determined by the size of the piece you’re working on. Just remember, using a little more space and making the piece readable will benefit everyone in the long run.

Leading Example

These terms, ideas and suggestions are just the tip of the iceberg that is Typography. Pay close attention to the text around you and you too will start to notice typography in action!

Advertise Here

iTunes, App Store, iBookstore, and Mac App Store

Check Out Our Ventures

Paige1Media

Collipsis Web Solutions

Hootpress

Paige1Publishing

Like Us on Facebook!

Advertise Here

Simple Print

$7.99 .COM domains

VerticalResponse free trial

PeachPit (Pearson Education)

Register.com $2.50 Domain Names

McAfee, Inc

LinkShare_120x600SkyscprV1

Latest Comments