Tag: text

Test your kerning skills!

For the past 2 1/2 years, people have been streaming in to the 2 tracking/kerning/leading posts I put together.  In case you missed them, here’s Part 1, and here’s Part 2.  I’ve actually been kind of surprised how common of a topic it is for people to search on.  With that being the case, I thought a lot of these same kerning enthusiasts would find this game/test website pretty interesting.

It’s an interactive test to see how well you can kern your lettering.  I got 77% – can you hopefully beat my pretty sad score?  Try it.

And for an even harder design-based game, try their letter-shaping test.

Tags: , ,

New Moon text effect

Of course we couldn’t link to the 2012 text effect last time without also linking to the New Moon text effect tutorial from the same people at PhotoshopWorld.com.    It has some good tips for giving text a hot core, with a cooler edge, and some path-stroking techniques for getting a brush stroke to fade out on the ends.



2012 Text Effect

I came across this tutorial for creating the 2012 text effect from the huge effects film that came out last week.  I always like analyzing text treatments on various things to think about how I could recreate the same style in Photoshop.  There are a few interesting things along those lines in here, maybe the least interesting part being the actual 2012 text part.  A few highlights are:

  • Modifying letters in a font that is close to, but not quite the exact shape you want, using paths.  This can be really useful, as many fonts on posters, products, logos, etc. are slightly customized from any typical fonts you can find.
  • Applying texture from another image to your font.
  • Zooming out your viewport to see the full image (using Ctrl-0).




Text Leading/Kerning (part 2)


So with Kerning and Tracking, we were talking about horizontal spacing between letters.  Now we’ll talk about Leading (pronounced “Ledding”, not “Leeding”), which is the vertical space between lines of text.  It’s a little more straightforward, but still an important text designing concept that people might not worry about much.

leading text

Notice in the above image that the Auto setting puts the lines fairly far apart.  It’s pretty similar to what you would see in a novel, but not so much what you would see on a magazine cover, probably.  Another reason it looks like they’re far apart is that most of those all-caps letters don’t drop below the baseline of the font (“J” being the exception there), so that space isn’t getting filled with tails of letters (such as “g”, “p”, “y”, etc.).

The main reason I usually spend time on the Leading is to make sure lines that go together (in a title, little blurb or short paragraph) feel cohesive.  Your brain combines them as one thought even before it reads the words to see if they make sense together.

A good example of using Leading to group chunks of text together is in this magazine cover announcement, where the various article titles and information might have gotten jumbled together too much with just the default line spacing.

Now truthfully, for things like titles and those magazine article titles, where it’s just 1-3 lines of text, much of the time I’ll just use separate layers of text and place them where I want independently of each other, using the Move tool.  But whether you’re using the Leading control on the text layer, or doing separate pieces of text, the concept of the amount of space between lines is still the important thing.

Well, if you’re still with me after those two posts of text designing, thanks for staying.  Much much more could be said about these and other aspects of text design, but hopefully these posts can at least start you thinking differently about putting text on a page, so it will be more aesthetically pleasing.

Do you have other types of examples where you’ve used Leading successfully?  Share them in the comments!

Tags: , ,

Text Leading/Kerning (part 1)

This has potential to be a very boring subject.  But really Kerning and Leading are 2 of the biggest tools for making normal text look really nice.  In this post we’ll discuss Kerning, and its partner Tracking, and in a following post we’ll discuss Leading.  There are lots of sites that cover all the technicalities and details of these tools, if you want to get more in depth, but I just want to discuss some of the basic design principles behind them, especially for people that may never have heard of the terms before.

In programs like MS Word, you may have never even come across these options, unless you were looking for them specifically.  And even then, they don’t all go by their technical terms.  Tracking is typically called “Character Spacing”, Kerning is just called Kerning (for lack of a better obvious term), and Leading is called “Line Spacing”.

kerning and tracking text


The difference between Kerning and Tracking is subtle.  They both affect the spacing between characters, but Kerning is more interested in character “pairs” and how they sit next to each other, where Tracking is more about the global amount of spacing between all letters.  In the example image, you can see how different Kerning affects the way some letter combinations behave together.  We’re mainly concerned with the “AV” combination here, because they look so strange when they don’t overlap at all.   The default setting in Photoshop is “Metric”, which uses hints that the original font designer provided.  If they didn’t provide much, “Optical” is also useful, because it looks at the shapes of the letters and tries to place them evenly apart.  As a last resort, you can set the Kerning with a numerical value if you want to adjust even further.  (It should be noted that in example D, only the “AV” combination has Kerning= -280, not the whole word, like in the examples before it.)

The goal is to get a fairly consistent amount of “space” between each pair of letters.  There’s no exact science to how that space is measured, but it should be based on the size of the whitespace “shape” you get between letters.  For instance, the triangular shape you get between “H” and “A”, and between “V” and “E” are essentially the same, but just flipped upside down.  So the most visually pleasing example overall is either b or c.  Personally I might choose the optical version in this case, but certainly not with every letter combination.

All of this is mostly important in titles and other short pieces of text that will be large.  If you have time to worry about the kerning of every letter combination in, say, a blog post like this, more power to you.  But it will mainly be noticeable where people have more time to focus on just a few letters, and when those letters are large.


So tracking is what you use if you want a bunch of letters to be close together or farther apart, like in example E.  The farther apart you get the letters, the less that your kerning really matters, too.  An example of using a larger tracking value is in this Justin Begins announcement, on the title.  One of the biggest reasons I use tracking is to adjust lines of text, so that they’ll line up perfectly with a line before or after them. If it’s done subtly enough, one line won’t appear to be a lot more compressed than the other.  Oftentimes, making the tracking small (below 0) helps a very normal font not just look bland and boring, and can make it feel “designed”.

Photoshop Shortcuts

Photoshop makes it really easy to do letter spacing (tracking in this case) by offering hotkeys.  If you wanted to adjust the “AV” combination in the example, you’d click between the A and V and then use Alt+Left Arrow to move them closer, and Alt+Right Arrow to spread them apart.  It works with selections, too — to get something like example E, select the whole word, and Alt+Right Arrow a few times to spread all the letters apart more.  Fairly painless that way.

Do you have examples of other uses for Tracking and Kerning that have worked well?  Let me know in the comments.

Tags: , ,
Back to top