Author Archives: Josh

Cranky Design: The Font Primer, Titling Edition

Posted by: Josh

Cranky Design is a series of posts in which we try to make the world a little more stylish by looking at the details of design, whether it be webby, printy, or otherwise.

Hello there, internet friends. You like… fonts? Me too. Spend much time nerding out with them? No? Probably for the best. I’m a little obsessed myself. I’m sure my wife finds it charming that I’m constantly pointing out fonts in the wild. That’s charming, right?

So you like the fonts, but you don’t know much about them, and you’re a little curious, but not that curious. Perfect. I’ll tell you a couple things, maybe you learn something, okay. You’ll know more than your friends, and you like to feel superior to your friends, right? That’s what friends are for. This’’ll be great!

Don’t Call it a Font

If you REALLY like to lord it over your friends, this first lesson is perfect: Don’t call it a font. Call it a typeface. Whaaat? That’s right. The proper term for what we generally call “font” is actually “typeface.”

See, back in the dark ages of physical typesetting, a typeface referred to a family of type that had a consistent design and style. A font was a specific member and size of that family. So, for example, one typeface is “Times”. This includes the roman, italic, and bold styles and all of their various sizes. A font is one specific slice of that typeface, such as Times, italic, 14 points. See the difference? Now it will always bother you when people call a typeface a font. Welcome to type nerdery! You’re probably already sorry you came. Don’t worry, that’s natural.

Display & Title Typefaces

Wow, there are literally books fulla information on type that you don’t wanna know, so let’s just break a big hunk off the top and call it a day. What about display titles? You see these all over the place, online, in print, and in the real world. You probably need to use them yourself from time to time on your blog, on that report, even on that passive aggressive note you stuck on the fridge this morning.

So what makes a good display typeface? Well the fast and dirty answer is: use a condensed sans-serif font, loosen up the tracking (spacing between letters), and make it caps. Done. Lunch time. Here’s an example:

Display Title Example

Just to make this example a little more relevant to everyday folk, I’ve chosen some very common typefaces that usually ship standard with modern OSes. On the left, you’ve got your classic Microsoft Word typeface, Times New (roman), a staple of any Windows PC. On the right is the lovely Gill Sans MT (condensed), also a typeface that can be found in the Windows OS.

So as you can see, the left side looks like your sixth-grader whipped up a school report he cut-and-pasted out of Wikipedia (solid work, son). Meanwhile, the right side looks like it could be legit. And the only difference is typography! I swear. So what’s really different?

Well, on the left, we’re using a serif typeface. Serifs are the extra little doodads that poke out of your letters. When a font is referred to as “roman” it means it has serifs. Most folks believe the origin of serifs come from the brush strokes used to create the letters (dating back to Greek architectural titling). It is commonly believed that serif typefaces are easier to read for long periods of time, such as with textbooks and novels. This is why a lot of typographers use serif typefaces for the bulk of text in printed books (but not all!). I set it in title case, meaning the first letters are capitalized and the rest are lowercase. Tracking (space between letters) is normal (“factory default” for the typeface).

On the right we’ve got a sans serif font (sans = “without”) that is condensed. Sans serif fonts don’t have serifs, which make them sparer and more modern looking (when a typeface is called “gothic” or “grotesk” it means it is sans serif). Condensed means that the set-widths are narrower than its non-Condensed brethren — essentially, it is a lean and tall font. If I were a font, I’d be Condensed. Condensed is obviously useful for squeezing in lots of text in small spaces (much in the same way that I can squeeze in between the washer and the dryer when necessary), but you’ll also find that Condensed faces are a staple for display and titling. There’s just something very professional and stylish about a good Condensed font. I’ve set this in all caps, which is what you want to do with a Condensed face, and I’ve widened the tracking, which means I’ve spaced the letters further away from each other. Looser letter spacing helps with legibility when using all caps and narrow faces. Because tracking is not a common adjustment lay folk make, I’ll show you how. To adjust letter spacing in Word (if you’re unfortunate enough to be dealing with typography in that program, my apologies):

Word - Changing Tracking 1

Highlight your text. Go up to your Font menu and click the tiny arrow in the lower right hand corner. You’ll get a dialog box that pops up, and click on the 2nd tab called “Character Spacing”.

Word - Changing Tracking 2

Drop down the “Spacing” box and choose “Expanded”. Then, to the right of that box, you’ll see another box called “By:”. Increase the point value of “By:” to space your letters further apart. You should see a live preview at the bottom of the dialog pop-up.

Now in Photoshop (also not the best place to work with typography, but common, and certainly better than Word!) click your Character icon (its the little A in your right-hand menus) or, if you can’t find the icon, go up to the menu, click on Window, and choose Character. You’ll see some more icons, none of them very intuitive, but look for the “A V” with the arrow underneath. That’s your tracking.

Photoshop - Changing Tracking

Bigger numbers mean more space between letters, zero is “normal”, and negative numbers mean closer together. Make sure your text layer or the actual text is selected before changing your tracking, or nothing will happen (I do this all the time).

What’s the Difference?

So what’s up? Why does the title on the right look so much more professional than the one on the left? They’re just letters, right? Well, if you’re REALLY interested in the answer, you might be a closet typography nerd. Ha! Get yourself some books. But the practical answer is, professional designers do it this way. Serif typefaces set in title case or sentence case with normal tracking (our left side example) are typically used for blocks of text at smaller sizes. This is what the text in your paperback copy of The Girl with the Dragon Tattoo looks like. But the cover title looks more like our example on the right. Now obviously, this isn’t the only way to set your display titles. But it is a common method used by the pros, and it is a quick and easy way to class up your own projects!

Condensed Font Suggestions

Loving the stretchy tallness of the Condensed font? Want some of your own? Here are a few of my favorites:

To Momma, on a Mother’s Day in 2011

Posted by: Josh

To my baby’s momma, on Mother’s Day, an ode to your motherfulness.

Thank you for being the fantastical momma that you are. You are the engine that makes our family GO, even when you have to drag us behind you like broken-down trailers. You are our fearless leader, and we will follow you wherever you think we should go, unless we are feeling very tired and then maybe we’ll just sit on the couch for a little while. But you will be there too, and I will have your baby get your booties because your feet are probably cold. Also, ice cream? Because even if your feet are cold, ice cream is a good idea.

So today is your day, to do mommy things, or to more likely not, depending on you how feel. Maybe Mother’s Day really means No Mothers Day, because the mommas can all disappear from mothering, and we should all remember how nice it was to have a momma to momma us, and we will write poems, make brunches, draw cards to convince them to come back for another year. And in the meantime, you can just be a Person, who may or may not continue to momma this family, depending on the quality and quantity of our toadying and the majesty of our tribute, and you can just chill, and watch some Weeds or 30 Rock or something, or maybe just banish your subjects from sight because those guys are like ALWAYS here doing stuff and it gets old. So old.

But hopefully we can show you that sticking around for another year really is a terrific idea, or that at least you’ll break-even, because look at all the hilarious stuff we can do!, and you wouldn’t need to find any packing boxes. And also I made you this food! Yum!

Now, we put our heads together and made a list of your finest qualities, all of which we’ve witnessed in person, so the people can believe that they are bona fide, but I left it with your daughter and now suddenly as if by magic it is disappeared and while I don’t believe her story that the shadows on the sun took it and then gave it to the bubbles bubbles bubbles with the spider and now its in the tree on her wall (with the pink owl) and we can’t get it anymore, I haven’t pressed her. But because I am all grown up and have lived with you for like a long time now, I can still remember most of them, some being 1. you are the sweetest 2. the most positive 3. the most reasonable 4. most smartest and 5. most loving momma in our family. So thanks for that. “Daddy, say ‘Good Job!’” she says to me. To say to you.

Good Job!

Happy Mother’s Day!

And we love you.

Josh’s 30 days till 30

Posted by: Josh

Whilst reading Maggie’s post about 30 things she wants to do before she turns 30, I noticed that I was in fact not much more than 30 DAYS away from being thirty. And that I had not done anything on my own list of things to do by the time I’m thirty.

As such, I’ve made some quick revisions to my list to bring me a little more in line with my goals (note: original list written at age 16).

  1. Learn to play guitar Acquire brother-in-law who plays guitar
  2. Write a book Marry someone who plans to write a book
  3. Write a movie script Spend 15 years thinking about writing a movie script
  4. Get into UCLA film school Often buy snacks from the vending machine outside UCLA film school
  5. Write a comic book Become estranged from friend I heard wrote a comic book
  6. Work in television Work at Starbucks making coffee for assholes who work in television
  7. Befriend awesome intelligent artistic people at college Graduate college a year early cause “I’m so sick of this shit”
  8. Get rich Get paid enough to really appreciate the idea of getting rich
  9. Leave SCV, become a recluse, spend all time engaged in artistic endeavors Settle down in SCV, get married, spend 45 mins. a week engaged in artistic endeavors
  10. Live in Spain Make flight arrangements for someone who frequently visits Spain
  11. Learn to speak Spanish Have child who watches a lot of Dora the Explorer

And there you go. Through the power of creative editing, I win at life. Top that, wife!

Page 2 of 111234510...Last »