Typographic Pet Peeve #3: Inch Marks and Foot Marks and Apostrophes and Quotes (Oh My!)

Today's post (compared to post #1 and post #2 in this series) will be short and to the point. It has to do with the differences between (and the correct usage of) inch marks, foot marks, quote marks and apostrophes.

So here are the basics...
Quote marks and apostrophes are curved. Inch marks and foot marks are not.



Again, AS ALWAYS!, it comes down to the fact that the computer thinks it's smarter than you, and "smart" quotes are only as smart as the person typing.

If you leave smart quotes "on" in your software, then every time you type a measurement, it looks like this...



If you leave smart quotes "off" in your software, then every time you type a quote or apostrophy, it looks like this...



Now, I'll be the first to admit that when it comes to online things (e.g., this blog), I use the default marks (" and ') instead of the more proper marks ( “, ” and ’), because hand-adjusting the html code with the proper ascii codes is a pain in the ass. But I think people are generally forgiving of this. However, when it comes to layout, I do not tread lightly when it comes to the differences between the marks. In fact, on one proofing review of the Creature Compendium (print copies of which are now on sale for 20% off at Lulu.com), I did nothing more than check the foot marks, inch marks, quotes and apostrophes for proper formatting (yes... one entire round of proofing just to check those marks).

BE IT KNOWN THAT NOT ALL FONTS INCLUDE PROPER QUOTE MARKS AND APOSTROPHES! In these instances (usually for the title type of a book), I will try to find the visually-closest font that includes them, and just change the typesetting for those individual characters in the title type. And if I can't find anything usable, I create the type element as a standalone image (e.g., in Adobe Illustrator), then use the comma from the typeface and move it, copy it and rotate it as necessary to make the type work. That may sound like a lot of effort, but it's these little things that make the difference between "average" and "superior" graphic design (and prove how much/how little the designer cares).

So that's it. And before you start asking "How do I turn smart quotes off and on?"... here are some resources for you.

---

Key combo for proper (curly) quotes on mac (assuming smart quotes are off):

• for left/open quote: Option-[
• for right/close quote: Option-Shift-[
• for left/open single quote: Option-]
• for apostrophe/right single/close quote: Option-Shift-]

There is no key command for foot and inch marks on Mac. You will need to make sure smart quotes are off to type these.

---

Turning smart quotes off/on in Adobe InDesign >>

Turning smart quotes off/on in Adobe InDesign (Scroll down to "Use Smart Punctuation")

If you want to know how to turn smart quotes off and on in Photoshop, you won't get any help from me. Photoshop shouldn't be used for type. (Sorry. That's one of those places where I won't back down on my design snobbery.)

---

Changing quotation mark format in Microsoft Office Products >>

---

Typographic Pet Peeve #2: Default (and/or Bad) Letterspacing/Kerning

In the first of this series of "Typographic Pet Peeves," I addressed the issues associated with leaving leading (pron. "ledding") on automatic, particularly when using connected type elements of different sizes. Today's post is concerned with the spacing among and between letters (BTW, those are 2 different things as you'll see below), particularly as related to "bad" typefaces (something I addressed way back in a post titled "Some good examples of bad type."

---

For the sake of today's discussion, we're going to need to make sure everybody is familiar with two different type terms, and the difference between them: 1) letterspacing and 2)kerning.

Letter-spacing (a.k.a. tracking) refers to the amount of space between a group of letters to affect the overall density and texture in a line or block of text.

Kerning, on the other hand, applies specifically to the spacing adjustment of two particular characters to correct for visually uneven spacing (i.e., a "kerning pair").

For my visual examples today, I'll be using another mockup for a non-existent retro-clone, using the title type ("Simple Fantasy") and attacking a series of issues (and insights) one-by-one. Unfortunately, a lot of the factors we'll be discussing today are not controllable in programs like MS Word (which I should remind everyone is a word processing program, NOT a layout program, regardless of what Microsoft tries to sell you). However, all the main Adobe Products (Illustrator, InDesign and Photoshop) do give you the control necessary (though Photoshop is clunky for this, since it is also NOT a layout program).

Formatting type in Illustrator: https://helpx.adobe.com/illustrator/using/formatting-type.html
Formatting type in InDesign: https://helpx.adobe.com/indesign/using/formatting-text.html

---

At first glance, there's nothing really glaringly bad about this title type... and that's the pitfall! Like Peeve Post #1, the issues are going to come down to the fact that the computer does a lot of things automatically for you, and takes the responsibility for how good, bad, or average, your type looks. As this post progresses, and you see all the things you CAN control, you'll see how we can take a header with "average" visual presence and "strengthen" it.

So let's review the basics of this title type:

---

Typeface: Goudy Text MT
Point Size: 64 pt.
Kerning: Metrics (usu. the default)
Tracking: 0 (zero)

---

Now that we've got the "control group" set up, let's move to our first topic...

---

KERNING

I have always been a huge proponent of the idea that the FIRST thing you should change in the type dialog box (for headlines OR body copy) is the kerning setting. There are a couple of exceptions:

a) connecting script fonts (if you change the setting to "optical" for these kinds of fonts, the script lines won't "connect" properly; I plan an entire Type Pet Peeve post on this topic alone)

b) types that are intentionally meant to be monospaced, and the use requires them to be such (e.g., when character count per line is important, like in writing screenplays)

In this example (#2), the kerning setting is set to "optical" (it is set to "metric" in #1). You may not see much difference because it's subtle. But it IS there. Look at the spacing around the "l" in "Simple"; you'll see how it's a little narrower in #2 than #1. Optical spacing tends to "even out" the spacing between each of the kerning pairs (every 2-letter set in the headline is a kerning pair... "Si", "im", "mp" et al.)

Now that we've taken a look at that, let's move on to kerning's cousin...

---

LETTER-SPACING

Again, letter-spacing is the overall amount of space "among" a group of letters. In this example (#3), I've decreased the tracking (letter-spacing) to "-30." I'm a fan of tight letter-spacing. To me, it tends to make the type feel more cohesive (i.e., more "intentional" than "accidental").

One thing that adjusting the letter-spacing tends to magnify though (especially as it is "tightened"), is that the blank spaces in many display/ornate faces is just TOO DAMN BIG!

Which brings us to something I find myself having to do on almost every single title I ever typeset for an RPG publication...

---

ADJUST THE BLANK SPACES!

It might surprise you to find out that in this example (#4), I've altogether taken out the blank space between "Simple" and "Fantasy." Theoretically, the title is typed as S-i-m-p-l-e-F-a-n-t-a-s-y. I did, however, have to select the "e" (alone) and change the letter-spacing to "0" (from "-30").

Depending on the typeface and program you're using, there are a number of alternate ways to adjust this issue, including:

a) change the point size of the blank space to make it smaller than the rest of the type (e.g., 10 pt. blank space with 80 pt. type)

b) change the horizontal scaling of the blank space to make it narrow (e.g., 10% instead of 100%)

And so we move on to...

---

INDIVIDUAL ADJUSTMENTS

In example #2 above, I changed the "type" of kerning I was using (optical over metric), but kerning is actually the space relationship between 2 individual letters. As I get close to finalizing a piece of copy like this, I always try to review the spacing and see where it could be evened out even more. Look back to #4 for a moment. Though I liked the overall tracking in that, the word "Simple" felt a little too tight, and I'm not happy with the uneven spacing around the "s" in "Fantasy."

In this example (#5), I opened up the letter-spacing (tracking) on "Simple" from "-30" to "-20", then in the word "Fantasy" I adjusted the kerning between the "a" and "s" (made it tighter) and the "s" and "y" (made it looser).

Overall, I liked where this type specimen ended up compared to where I started (#1). Compare them for a moment before we move on to my final tweak...

---

GIVE THE TITLE MORE PRESENCE

Now that I've taken out all that spacing that the title didn't need (but the computer gobbled automatically), I have a bit of extra space which allows me to make my type bigger and give it more presence. So I went from 64 pt. to 70 pt. And it does make a difference. My title now has more visual presence and impact... things I couldn't have given it except for the fact that I took it back from the computer that tried to eat it.

---

So here are #1 and #6, side-by-side for comparison.
I have now put this knowledge and power in your hands.
What are you going to do with it!?

Typographic Pet Peeve #1: Automatic Leading on Titling with Type Elements of Multiple Sizes

I'm starting a new series on the blog, in the hopes that revealing pet peeves as a practiced graphic designer will find fertile ground with OSR self-publishers who are doing their own layout and hoping to improve their skills.

Ultimately, as this (hopefully) series unfolds, you will find that most of my typographic pet peeves all come down to a single root problem... the computer doesn't care what your layout looks like! That's root of today's problem, and one that I see proliferating to an unbearable degree as more and more would-be designers take up the tools of the trade.

---

Today, I look at the use of automatic leading on titling with type elements of multiple sizes. This goes for both cover titling, as well as interior/section/chapter titling. For today's discussion, I'm using the following two examples (mockups of a non-existent retro-clone).



Please note, that on the sample to the left (the obviously inferiorly typeset version), I did NOT intentionally make the type spacing look bad. I did nothing more than choose a typeface, and set the type size for each element: 1) the name of the book, and 2) the author's by-line. I should back up for a second. While I did say "obviously inferiorly typeset version," it is quite possible that it's taking some of you a few moments to actually see the difference between the two versions, so I'll point it out... look at the spacing between "Swords &" and "Citadels," then compare the spacing between "Citadels" and the by-line.

I'm going to introduce the non-designers among you to a term few non-designers know... "chunking." This is a catchy way of saying that like typographic elements should be treated as a single visual element. For example, the title "Swords & Citadels" is on two lines, but in the left example "Swords &" and "Citadels" are treated as 2 separate chunks, where on the right they're treated as 1 graphic chunk. I'll even go so for to say on the left example, that "Citadels" and the by-line (because of the automatic leading) are accidentally chunked.

Here's the issue: When a designer leaves the leading set for "Automatic," the computer is making decisions for you based purely on mathematics, and not on aesthetics! Yes, I did bold and italicize and underline that, and then make it orange — because it's THAT important to remember.

Here's the solution (and it's VERY simple): NEVER LEAVE THE LEADING ON AUTOMATIC!!! Even in MS Word, there are ways to specifically set the leading in points (instead of variations on line-height).

In both examples, I used Adobe Illustrator and the typeface Trattatello, with the title set in 60 pt. and the by-line set in 36 pt.

In the left example, the automatic leading for type set at 60 pt. defaults to "(72 pt)" and the leading for the type set at 30 pt. defaults to "(30 pt)." I use the parenths to make a point... in Adobe products, any default leading shows up in parentheses to help remind you that the leading is set for automatic. See that! Even Adobe warns you you've left the leading on automatic! So back to those numbers for a second... based on the defaults, the space between line 2 of the title and the by-line is HALF of the space between the 1st and 2nd line of the title.

In the right example, I did nothing more than change the leading for the whole thing (all 3 lines) to 60 points... that's it! The size of the two type elements (title and byline) does the chunking all by itself. But you can change each line individually; adjust this recipe as you see fit.

So that's it. That's the basics of what happens because the computer thinks it's smarter than you, and because a lot of designers allow it to be. Be forewarned, when the computer starts making these kind of chunking adjustments on it's own, I fear we'll be nearing the point where computers overtake humanity!

Put the computer in its place! Manage your leading like the human you are!

Small/Self-Publishing Panel Audio - NTRPGCon 2015

I had chance to host a Small/Self-Publishing Panel at the most recent NTRPGCon. Even for an 8 a.m. session, we had a great audience turnout, which proves to me that plenty of folks out there in RPG-land are interested in putting out their own material, and more importantly, learning lessons from those that have come before.

I do want to thank all of the panelists again. I know many of them passed up drinking on Friday night in order to be there for the early start time on Saturday morning, and I just wanted to express again how greatly appreciated their presence was. This panel could not have happened without their valuable input and insight.

Panelists:
Richard LeBlanc - Save Vs. Dragon (blog) / New Big Dragon Games Unlimited (moderator)
Eric Hoffman - Stormlord Publishing
Trey Causey - From the Sorcerer's Scroll (blog) / Hydra Collective
Chris Kutalik - Hill Cantons (blog) / Hydra Collective
Jeff Talanian North Wind Adventures
Zach Glazar - Lesser Gnome Games
Robert Parker - Hydra Collective
Matt Finch – Mythmere Games

Directly following the audio player is a breakdown of the entire panel discussion with time notes so you can skip around to listen (or re-listen) to the parts you'd like.
Click here if you'd prefer to download the entire MP4 file (68M).

Introductions
00:00:00 Introduction to Panel (Richard LeBlanc)
00:01:22 Eric Hoffman introduction
00:02:03 Trey Causey introduction
00:02:40 Chris Kutalik introduction
00:03.58 Jeff Talanian introduction
00:06:18 Zach Glazar introduction
00:07:18 Richard LeBlanc introduction
00:08:45 Robert Parker introduction
00:09:15 Why publish? (Zach Glazar)
00:10:55 Matt Finch introduction

Kickstarter Discussion
00:15:05 Kickstarter Introduction
00:15:55 Kickstarter Advice (Robert Parker)
00:17:50 Kickstarter Experience (Trey Causey)
00:18:54 Why Kickstarter (Eric Hoffman)
00:20:30 Kickstarter Skepticism, Preparation and Lessons (Chris Kutalik)
00:23:47 Kickstarter Complexity—Research, Preparation and Backer Transparency (Zach Glazar)
00:26:10 Kickstarter Transparency with Backers, Kickstarter Fees, Shipping Costs (Jeff Talanian)
00:29:51 Kickstarter Shipping Costs (Zach Glazar)
00:30:46 Kickstarter Preparation & Kickstarter Backer Response (Matt Finch)

Getting Started as a Self/Small Publisher
00:32:40 Starting Small as a Self/Small Publisher (Richard LeBlanc)
00:34:27 Starting Small, Taking Next Steps, Getting Help (Eric Hoffman)
00:36:12 Getting Help (Richard LeBlanc)

Sales & Marketing
00:36:37 Question from Audience (Jim): Sales Ceilings
00:37:10 Sales Ceilings (Eric Hoffman)
00:37:57 Sales Ceilings, Sales Curves, Sales Strategies (Trey Causey)
00:39:22 Long Tail Marketing, Value of Bloggers/Google+, Marketing a Product, Value of Outside Input (Richard LeBlanc)
00:43:30 Product Development & Sharing that the Community (Jeff Talanian)
00:45:27 Importance of Word-of-Mouth Marketing vs. Sales Ceiling (Matt Finch)
00:48:30 Building an Audience/Customer Base, Value of Reviews (Richard LeBlanc)

Print Resources
00:50:05 Question from Audience: Print Resources
00:50:14 Print Resources, Lulu Issues (Richard LeBlanc)
00:51:30 Matt Finch Leaves
00:52:25 Print Resources, Lulu Issues, cont. (Richard LeBlanc)
00:53:26 Working with Box Suppliers (Zach Glazar, Jeff Talanian, Eric Hoffman)
00:57:04 Under/Over on Vendor Orders vs. On-demand Vendors (Richard LeBlanc)

Product Bootlegging/DMCA Take Down Notices/Legal Issues
00:57:26 PDF Bootlegging, Filing DMCA Take Down Notices (Richard LeBlanc, Jeff Talanian, Robert Parker, Trey Causey)
00:57:56 Bootlegging Experience, Cost of Product vs. "Free" Bootlegs (Jeff Talanian)
01:00:03 Unintentional Promotional Consequences of Bootleg PDFs (Robert Parker)
01:00:34 Cost of Product vs. "Free" Bootlegs, DMCA Take Down Process (Richard LeBlanc)
01:03:15 Unlicensed Use of Artwork from Product (Trey Causey)
01:04:02 Bootleg Anecdote (Jeff Talanian)
01:04:22 Secondary Problems with Friends Sharing Products (Richard LeBlanc)

Production Issues: Expenses (Art/Printing), Layout/Typography
01:05:00 Opening the Floor for Questions (Richard LeBlanc)
01:05:41 Question from Floor: Expenses (Justin)
01:05:54 Expenses Answers (Trey Causey, Eric Hoffman)
01:06:30 Importance of Good Production Values/Layout & Typography(Jeff Talanian)
01:07:34 Subtleties of Layout/Typesetting (Richard LeBlanc)
01:12:10 10,000 hours of Experience (Zach Glazar, Richard LeBlanc)
01:12:40 Value of YouTube Tutorials (Jeff Talanian, Richard LeBlanc)
01:31:32 Value of Purchasing Fonts (Trey Causey, RIchard LeBlanc)

Seeking Outside Assistance (Value/Cost)
01:14:53 Question from Floor: Value of Outside Assistance
01:15:26 Value of Proofreading (Zach Glazar)
01:17:03 Copy Editing/Line Editing (Chris Kutalik)
01:18:38 Editing (Trey Causey)
01:19:06 Value of Exterior Input (Richard LeBlanc)
01:21:01 Kickstarter Backer Input (Zach Glazar)
01:22:18 Value of Exterior Input, cont. (Richard LeBlanc)
01:2328 Robert Parker Offers His Assistance
01:23:47 The Black Shirt Conspiracy

Flexibility of Digital and POD Formats
01:24:07 Comment From Floor: Digital Format Flexibility/Speed of Updates (Justin)
01:24:33 Updating Petty Gods/Flexibility of Digital and POD Formats (Richard LeBlanc)

Wrap-Up
01:25:42 Wrap-up (Richard LeBlanc)

Production Tip #1: RGB vs. Grayscale Images

I've decide as I continue to work my way through the Expanded Petty Gods productions I will start to post some production advice for all those self-publishers out there.

Today's advice specifically relates to the use of RGB vs. Grayscale images. More specifically, in instances where the book will be eventually released as both a B&W interior print version, as well as a PDF copy.

So, to begin, here's today's piece of advice...

If you're going to have a B&W interior (including grayscale images), and you know your product will be release in a PDF version, then make sure your source photos are in Grayscale..

Technically, this is quite easy to accomplish. In Photoshop, you simply change the color mode from RGB to Grayscale by going IMAGE > MODE > GRAYSCALE (see image at left). Also, most scanner programs have a grayscale mode. PLEASE NOTE: In most cases, it's best to retouch/image adjust in RGB before converting to grayscale.


Now let's answer the question, "Why grayscale?" There are two answers to this...

First, it actually makes for a more visually consistent (i.e., "professional looking") PDF. Check out the Digiskleros example from the Original Petty Gods PDF vs. the Expanded Petty Gods layout. In the first example, from OPG, notice the sort of "greenish" tone in the image? Now look at the 2nd example from EPG. Notice the consistency and richness of the black tones. Now, look a the 3rd image, where I take the greenish version from OPG and show it in the EPG layout.


Original Petty Gods with RGB Abondiance.


Expanded Petty Gods with grayscale Abondiance.


Expanded Petty Gods with RGB Abondiance "pasted in."

That alone should be enough reason to do it. But there's a second and equally-compelling reason. And it all comes down to file size limitations and restrictions. All of the OneBookShelf companies (including RPGNow, where most of us distribute our PDFs) have very established guidelines for production, but the following two, when taken at face value, are VERY misleading...

– All Images are RGB color
– All Images are 150 dpi/ppi

The reason they want images as RGB is because they are assuming the images themselves are in color, and if saved as CMYK, they would be tremendously larger. You'd think they would only be 25% larger, but a CMYK file size can often be more than 300% larger than it's RGB counterpart (it all has to do with file compression algorithms; or so the petty god of desktop production has told me).

Because grayscale images have less digital information in them, they tend to be smaller than their RGB counterparts. This means a couple of things for you... 1) it's okay to make your images grayscale, even though OneShelf says they need to be RGB, and 2) when your program compresses your file to make the smallest PDF it can, it will actually retain more "in between" information for your image (color images, especially JPGs, "squeeze" out a lot of the details of an image), meaning it will look a lot better on screen and when it prints from your desktop! Oh, and if you want that image to hold more detail, then always go with with TIFF over JPG.

Now, all this being said, for any artists sending me Petty Gods art, please just keep sending me the file types you would normally send!!! I'm doing any sort of adjustments and conversions on my end, to maintain as much production quality as possible! So, if you've sent me RGB JPGs in the past, then just keep doing the same, and I'll worry about all the stuff I noted above!

Coming soon... I discuss the power of the "Levels" control in Photoshop.

A Couple of Docs: Guides to Better Typography

While listening to Doug Cole's Gaming Ballistic interview with Tim Shorts of Gothridge Manor (because I tend to put these on in the background while I work, rather then actually watching), there was mention of the Formatting Guides for GURPS Fourth Edition. There was a specific reference to a guideline where authors/publishers are told to find/replace all double-spaces with single-spaces (especially after periods). Some people may see this as a very minute detail that is unimportant. But would it surprise you to find out that this has been a standard in graphic design and advertising firms since the invention of desktop publishing? Or that this is one of the first things I teach my students in my Art Direction class? Hell, even Stan Richards of the Richards Group (the largest privately-owned advertising agency in the country) says it's one of the first things they teach newly-hired writers and art directors (go to 18:48 at the video on the link).

So what's the big deal about double-spaces after periods? Well, simply put... it's a matter of finesse. Most typefaces are designed with proportionate spacing in mind, and there's actually a little extra space after the period in most typefaces by default. Double-spacing after periods is a leftover from the typewriter (and the nature of monospacing). And finesse is the difference between an "average" layout, and an "elegant" layout. Like using a "space-after-paragraph" rather than blindly double-spacing between them (hell, even Microsoft Word actually let's you adjust spacing between paragraphs).

Today, I'm sharing two documents that are part of my initial typography lecture. Really, I'm just sharing them because I think there's a lot of stuff in here that people just don't know to do, but would if they did.

The first is a Guide to Better Typography, which details things like number of typefaces, spacing after periods, using grids, etc. These are more about suggestions for improvements.
Click here to download the Guide to Better Typography from MediaFire.

The second is my 10 Commandments of Type for Students, which really dogmatic and is not so much a list of suggestions as it is a list of Do's and Don't's. And treats things like using the typeface Papyrus what it really is... BLASPHEMOUS AND SINFUL!
Click here to download the 10 Commandments of Type for Students from MediaFire.

Please understand, while both documents appear dogmatic (particularly the second one), there's nothing to say there shouldn't be exceptions to each rule or suggestion. Nothing above is concrete; they're just ways of making you give more thought to something that most people are doing blindly. For hundreds of years, typography was in the hands of masters who apprenticed and studied to master their craft. These are just a couple of documents to help you on the path to design/layout mastery.