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.

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.

 

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.

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!

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.

 

 

These softwares will give you optimum results and do in fact take a lot of the 'grunt-work' out of typesetting. The top three typesetting softwares are:

1. Adobe InDesign
2. Quark Express
3. Microsoft Publisher

If you are looking to do this long-term I personally recommend Adobe InDesign. having worked with all three InDesign is by far the most powerful and most widely accepted software there is. The basis of my course here on typesetting will be focused around using InDesign. Can I use Microsoft Word to typeset a book? Technically, yes you could.

Would I recommend it? No true designer has ever recommended designing in Word. :) Be aware that Word will not have the features and functionality that professional typesetting software has.

What are the parts of a typeset page? Your basic typeset page will include at least three elements:

1. A running header
2. Body copy
3. A page number

Optional elements will include:

1. A. Subheadings
2. B. Images Unsure what some of these items are?

Check out my 'typesetters' glossary. Got more questions? Comment them here or email me at [email protected]

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 realized 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.

 

Fonts are the foundation of a good design. Depending on the budget of the project you may need one that's free or perhaps you can afford "the perfect" font for your piece. Either way, here are some great free and "perfect" fonts.

Top 10 Font Resources:

1. DaFont Great categories and searches.
2. Urban Fonts Select from free and for purchase fonts.
3. 1001 Fonts Excellent selections of categories and styles.
4. Font Diner Great retro fonts!
5. Veer.com Excellent original typefaces.
6. 1001FreeFonts Free. What more do you want?
7. I Love Typography Blog resource with great information on type and fonts.
8. Typography.com Original and breathtaking fonts.
9. Abstract Fonts Cool collections uploaded by users.
10. My Fonts News and font updates.

 

 

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.

File Name Standards:

• Before you can utilize the “book” feature in InDesign you must first have a set of documents to work with. Ideas for naming these book Documents would include the following file names:
  • FrontMatter.indd (Include Title pages, Copyright, Table of Contents)
  • Acknowledgement.indd
  • Introduction.indd
  • Preface.indd
  • Foreword.indd
  • Chapter1.indd
  • Chapter2.indd . . . and so forth until the end of the book
  • Appendix1.indd . . . and so forth as needed
  • AboutTheAuthor.indd
  • Ads.indd
  Creating A Template To create the appropriate “design” of the book. You will want to start designing with Chapter 1.
  • Create a new document (apple + n)
  • Set document page count (just guess at this point)
  • Set document margins (remember to allow thumb room and interior gutter)
  • Set document bleeds
  [caption id="attachment_757" align="aligncenter" width="300" caption="Screenshots from CS4 but the process is the same"]

  

  [/caption] Number and Section Options: Number and Section Options are found under the “Pages” panel flyout menu: [caption id="attachment_758" align="aligncenter" width="272" caption="Numbering and Section Options"][/caption] For each document set the “Number and Section Options” to “automatic page numbering”. Front matter will be set to “Roman Numerals” styles, but all others will be set to “Arabic Numerals”.  When this is set up, the page numbers will automatically update throughout the entire book as pages are added or subtracted to a single document.

   

  

  Tip! Use this document to set up your master pages, paragraph styles and character styles. When finished save it as a “template” for the rest of the book. Using Styles: To maintain consistency, I often use a specific naming scheme to be used when creating my paragraph styles. Paragraph Styles Naming Standards: Chapter Number Chapter Title Chapter Opening Body Copy Scriptures Pullouts Opening Your Paragraph Styles: Window  > Type and Tables  > Paragraph Styles

   

  

  From the Paragraph Styles panel click the flyout and select “New Paragraph Style” or from the bottom of the panel window click the “New Style” icon. Creating the Style: When creating a new style there are really only 4 of the Paragraph Styles option panels you need to deal with: 1.    “General” you will name your new style (one of the names above) and be sure to set your “Based On Style” to “No Paragraph Style”. Why? If your style is “Based” on another style and the other style changes it will alter this one as well. That is something you do NOT want to happen.

   

  

  2.    “Basic Character Formats” you select your typeface, weight, size and leading height.

   

  

  3.    “Indents and Spacing” choose your alignment (normally left justify for body copy) and extra spacing. i.e. First line indent for body copy, space after and before for subheads or scripture text, etc.

   

  

  4.    “Hyphenation” Set your hyphenation options as seen below:

   

  

  Now your new style is complete. Tip! To apply a paragraph style to an entire paragraph it’s not necessary to highlight the entire paragraph, you can simply click within the paragraph and select your style to alter the entire thing. Also try clicking with the formatting eyedropper tool for a quick fix. When to Use a Character Style? Character styles should be used anytime an “override” needs to take place for a paragraph style. For instance a bold word, a bold number, etc. Opening Your Character Styles: Window  > Type and Tables > Character Styles From the Character Styles panel click the flyout and select “New Character Style” or from the bottom of the panel window click the “New Style” icon. Creating a character style is the same process as a paragraph style but with more selective options. And applying them requires that you click within the WORD or highlight the character that you would like to change. Master Pages: Your master pages will need to include: •    Page Numbers •    Running Heads •    Chapter Opening Art •    Any other graphic elements that are consistent chapter to chapter Adding Your Content: As long as you have created your margins and columns within your InDesign document, you can flow all the text in for your first chapter automatically. To do this, choose File > Place and then select the document you’d like to flow in. Your cursor will change showing you that there is content to place. You can flow this content in with several different options. The quickest and most efficient way is to “auto-flow” the text throughout the document. Using this option will automatically place the text for you, allowing you to go back in and fine tune the layout and add your paragraph styles as needed.

   

  

  Creating the “Book”: Once your main document is set up you will want to use the template you saved to create each subsequent chapter. To create the “book file: File > New > Book

1.    Name the book as needed. This creates a new “book” panel in your workspace.

 

2.    Click the “+” to add documents to your book.

3.    Load all your documents into your book panel.

4.    Your page numbers will auto adjust and you can now edit each document by simply double clicking it to open make your changes and then save the documents.
5.    When you’re finished with the book file, you can save and close the book panel, export the entire book to digital additions (more on that later) or package the book for printing!

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.

Now, you must deal in pixels. Forget everything you know and learn a whole new set of measurements and their relative sizes. Then comes typography. Much like the United States highway system, we must again learn another set of measurements: the Point. Typefaces are set in points for print applications and have recently been made available to web designers through CMS editors in that familiar point size. I don't even have time to touch on the "em" unit of measurement for Web design or the option of still using pixels for your web typography needs. First, let's jump back to print. Back and forth, back and forth.

It's a never ending cycle of changing the way you think. But here it is: the dreaded inch. It is afterall the STANDARD unit of measurement right? We all learned inches in kindergarten or preschool. But now, how can we possibly compare the inch to this design world of picas and points and pixels? I had the privilege of finding the Graphic Designer's Production Handbook by Norman Sanders, this morning at a Used Book Sale. The book, originally published in 1927 explores the ends and outs of "old school" design.

Trust me, you never see the word Pixel in there. But it does talk about the comparisons between Picas and Inches and explores the Points of typography.

The book explains the significance of the correllation between the units of type this way:

12 points = 1 pica
1 point = .013837 inches
72 points (6 picas) = .996264 inches (not 1 inch)
It explains that the actual difference between 72 points or 6 picas to 1 inch is actually 1/268 . Crazy huh?
Now, let's throw the pixel and computer graphics into the midst:
16 pixels  = 1 picas
1 pixel = .75 points
So a 12 point font equivalent is 16 pixels
1 pixel = .010416667 inches, therefore 96 pixels = 1 inch
Keep in mind, whereas in traditional print design we are taught that anything 16 points or larger is a display font, when it comes to the web, 16 pixels is simply "normal" sized text.
Changes the way you look at things, eh?

[caption id="attachment_173" align="alignleft" width="150" caption="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"][/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"][/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!

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.

The 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.

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?

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!

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?

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