(no subject)

May 08, 2011 07:50


font guide:

fonts i could not live without. plus some tips & other stuff.


Does what it says on the tin. Font guide. YES. Includes the fonts I couldn't live without and tips, tricks and various pointers. I get a lot of questions about my text and fonts, so in some small part, I hope this helps. :D I didn't provide download links for the fonts because you can find these in just about every font guide on LJ, around the web or on Dafont. I also don't go into how to use certain tools and features, you should be knowledgeable on this if you are at the point where you are adding text to your icons. I'm happy to answer any questions of course. To the guide!

Old Sans Black
Examples:




I like this font for large blocks of text that cover almost the entire icon. It's impactful and gets the message across. It's also very clean and easy to work with. I find that I don't really have to mess with my settings too much to get this font to work. And it also works well in all caps or lowercase.

Tip: Try adding a slight blur to your text layer when you use this font, it actually looks really pretty!

Myriad Pro
Examples:




This font is fucking brilliant for text-only icons. It's all I use it for! Basic, simple and READ-ABLE. It's like this font was created just to work at a smaller size and that's why I love it so much.

Tip: Don't sharpen this font, ever. I rarely sharpen this font when I use it because it tends to get jagged and fugly looking. Really, you don't have to mess with this one too much. It's clear and readable all on its own.

Times New Roman
Examples:




This font is one of my all-time faves. It's so versatile and can be used in virtually tons of ways and they all look different. I think it looks prettiest in italic or bold, large or even very small. It's useful for tiny text as well. You can space out the letters (a nifty feature called tracking) or keep them closer together and it always turns out a nice result.

Tip: The spacing between the letters is really important when you use this font, so fiddle around with tracking when you use it.

Georgia
Examples:




Another one of my all-time faves. Looks prettiest in a smaller size and in italic. I find this one starts getting ugly if you use it large or in caps.

Tip: Stick to using this one small. I recommend using it for tiny text or 1-2 lines of text.

Folks (black or bold)
Examples:




Folks is my favorite because of its versatility. It looks brilliant large or small and can be combined with all caps or lowercase for a pretty result.

Tip: The I's tend to look a little goofy with this font, so if you have text with a lot of I's in it I recommend choosing a different font. Some nice Folks alternatives? Debussy, Vag Round and Arial Rounded MT Bold. These look almost like Folks, but with normal looking I's, LOL.

Arial
Examples:




This one's pretty self-explanatory. It looks best in large, small, all caps, letters closer together or spaced apart. The possibilities are endless here.

Tip: Italics doesn't look good with this one. Or at least in my opinion it doesn't.

Courier New
Examples:




Useful in small, large, all caps and lowercase. Clear and readable.

Tip: This one is very block-like and can tend to take over an icon or overwhelm it. I recommend using this one in moderation.

New fonts (I've come to know & love)
Examples:




01-04




05-08




09-12
01-04; Pistilli Roman, Pistilli Roman & King, Riot Squad, Riot Squad
05-08; Nouvelle vague, Arial Rounded MT Bold, OFL Mills Sorts Goudy, Levi Marker
09-12; Rabiohead, Halo Handletter, BlackJack, Daisy Script

It's all in the Settings
My text settings (this is not typical, though. Just a starting point)


A Breakdown of the Character Toolbox
(from top left)
a. Your font. Click this dropdown box to choose a font.

b. With some fonts, you can choose different styles like italic or bold. This dropdown controls these features. Note: this depends on the font, of course.

c. Here is where you choose what size you would like. There are preset sizes to choose from or you can type in any size.

d. The leading feature. Honestly, I don't know what it does. But I read somewhere that size 10 (as I have shown here) is best for all fonts.

e. Kerning. No idea what this does either. My Photoshop default is Metrics and I haven't been able to change that. So. *shrug*

f. Tracking. Determines the spacing between letters. VERY IMPORTANT. I recommend lots of fiddling with this setting.

g&h. Vertical and Horizontal scale. I like to keep this at 90% for both, but I will fluctuate it to 100 when needed. Switch between the 90 and 100 settings to see what you like best.

i. Baseline shift. I don't fiddle with this one. Mostly because I'm not sure what it's for.

j. Text color. Use your color palette to change your font color. Or enter a hex code. I use my color picker tool for choosing font color. A color from your icon works best. Or standard white. BUT NOT BLACK. Black text looks ugly in most cases.

k. Bold, italic, caps, etc. Pretty self-explanatory.

l. Language. Choose your preferred language here.

m. Anti-alias. A VERY IMPORTANT TEXT FEATURE. Seriously, this can make or break your icon! I recommend sticking with Sharp or Crisp. Sometimes Strong and Smooth look good for tiny text, but I mostly use Sharp or Crisp for all my text. And don't ever set it to None!

Adding Text: Tips & Tricks
a. Fiddle around and experiment with all the text you add. Yes, it can be time consuming and frustrating, but really worth it when stuff works.
b. Rasterize rasterize rasterize. I can't talk about this enough, especially if your are sharpening, blurring or doing anything extra to your text.
c. I like to merge all of my text layers into one layer. Much easier to work with and move around, if necessary.
d. Don't be afraid to blur or sharpen your text.
e. Duplicate your text layer instead of using bold. Looks just as good, if not better.
f. Don't be ashamed to use song lyrics in your icons. In a pinch it works. If you can come up with your own original text without using lyrics or quotes than that's cool too.
g. Change up text by mixing all caps with lowercase. Change the color of one word or emphasize by making it all caps or larger than the rest of your text.
h. Think outside the box with your text. Try moving all of it to one side and cutting off words. Or put it directly over your subject's face. Kinda weird, but in a good way. Dare to be different!
i. Shrink or rotate your text with Free-Transform. But don't forget to rasterize and merge all of your text layers first. I find that rotating or resizing some fonts tends to look ugly no matter what you do. I don't rotate text all that much because I can't figure out how to make it look good, but if I rasterize first it doesn't look too terribly awful.

Other Useful Font Guides I Love
Font Guide by ohfreckle
This one's kinda dated, but still very very useful. Includes commonly used fonts and settings. Also links to where you can download the fonts.
My Favorite Fonts by neverjustbeing (as posted to fontaddicts)
Lists favorite fonts and links to download fonts on the web.
Font Guide by coupdefoudre
Not really a guide per say, but a post of the user's most frequently used fonts all in one handy zip file.
A Font Guide by letsey_x
The font guru!!!! A. must. read. Includes a list (with examples) of all the fonts she uses and some very helpful tips and tricks. Everyone who asks me about adding text to icons gets pointed to this guide. It's awesome.
Font Guide by neversleeps
Hasn't been updated in about 3 years, but still quite useful IMO. This guide just has a list of the fonts she commonly uses, which is really handy for reference or inspiration.
Font Tutorial by neversleeps
The most brilliant font tutorial in the history of EVER. I recommend this one to those who have never added text to an icon before or those who are just looking to brush up on their skills. This guide rules the world.
Tiny Text by greenie_cgv (as posted to icon_tutorial)
A tiny text guide. Includes fonts that work best for tiny text and settings.
Fonts, Fonts, Fonts by emmahyphenjane
I discovered a lot of new fonts when I read this guide. Also includes examples, tips and download links for fonts.
The Font Pimp Post by lemonpunch
List of commonly used fonts and recommended settings. Includes examples and downloads. The comments to the entry are a must read.

other: font guide

Previous post Next post
Up