I’ve been helping a business get a more professional looking home page in order to help it grow. One thing I noticed in the header was that the letter-spacing was off. The part that was off looked like this:
I’d only recently gained access to the source files used to create all the site’s imagery. The one for the home page banner had a funny extension: xcf. It didn’t take too much searching to discover that it was created in GIMP.
I opened the file in GIMP and discovered that the text was in the font Georgia, which is readily available on computers browsing the web, so this text really should not be an image at all, but in code! Yet that was not going to happen with the site’s current WordPress theme very easily, so I decided to let it go. Gimp didn’t seem to have any easy way to adjust the kerning (spacing between letters) so I recreated the image in Photoshop. Typing without doing any adjustment at all, the text came out like this:
Now if you don’t have a trained eye, you might not see any difference. The biggest problem area in the Gimp (top) image is between the “T” and the “o” and the “d” in Today’s. It’s still not absolutely perfect in Photoshop, but it’s passable.
If you want to adjust the kerning in Gimp, you have to select the “A” in the toolbox to get your text selector. Select the T and the o. Notice on the Tool options for text, you have an “adjust letter spacing” box. If you change anything here, it changes the entire line! No good! In my version, (on a mac) there is a faint text box interface above the selected text area. You may also check the box in the text options “Use editor” and get a fully opaque box to work with. I can hit the arrows on the box for “changing the kerning of selected text” (this text pops up when hovering over the arrows) and bingo! I get the desired effect.
Now that seems like a lot of work for something Photoshop handles better straight out of the box. But if you can’t shell out the money for Photoshop and prefer to use Gimp, just make sure to keep an eye on your letter spacing.
Another thing I noticed is that the Gimp text looks a bit bolder. It’s using the exact same font, Georgia Italic 18pt, and color, #400000. But then I noticed something called “hinting” on the Gimp text options screen. It was set to “medium” out of None, Slight, Medium and Full. I have no idea what they intended in using the word “hinting”, but it’s equivalent to anti-aliasing in Photoshop, where your options are a bit more logical: None, Sharp, Smooth, Strong, and Crisp. On the Gimp interface mouse-over, “Hinting alters the font outline to produce a crisp bitmap at small sizes.” Okay, whatever that means. Photoshop just says “Set the anti-aliasing methods.”
Which I did, and set it to “Strong” to make it look more like the Gimpy version:
Well, it appears that Medium Hinting is somewhere between two Photoshop settings. Let’s try the rest, shall we?
None: (ugh, we’re back to old PC browser renderings!)
Crisp:
Sharp:
Smooth:
And, the original Gimp image here to compare without scrolling:
Whichever you use is a matter of taste. Perhaps you’re using a font without a bold option; this is one way to create a semi-bold appearance without much effort.
If you want to see the effects of the various ‘hinting’ settings in Gimp, be my guest. It’s a free program. I don’t use it, so I’m not going out of my way to experiment. All I can say is the differences between some of the settings is not as dramatic as in Photoshop. If “none” is selected but ‘antialiasing’ is also selected, it will still be anti-aliased.
Leave A Comment