Typography Tutorial
So! Nyx wanted to know how to set type, so I'm going to create this little tutorial and teach you every crazy thing you ever wanted to know about using typography on icons. Before you read this, though, be aware that I'm going to be using quite a few of typographic terms, such as "leading" and "kerning" and "serifs" and so on and so forth, if you don't know what those are, please refer to this former post that I made a lo~ng time ago about typography.
Yes. I know way too much about typographic design. I'm just a little crazy when it comes to stuff like this. If I use a term you don't know, or that I didn't explain, please tell me so I can tell you what it means/fix it.
OVERVIEW
-Fonts I Commonly Use (and why)
-The Character Palette
-Anti-aliasing
-Layering
-Small Lines of Type
-Typographic Flourishes
-Resources
Fonts I Commonly Use / Since the differences in these were already explained, I decided to include this to show the difference between various serif fonts and various sans serif fonts. The most important thing about using a font on an icon is the mood that that certain type of font shows. Serifs are more elegant and antique (depending on the style). They portray a more romantic part of design. I usually use them to make things look like books, or like they're telling stories. Some of the serifed fonts I'm particularly fond of are:
ITC New BaskervilleTimes New Roman
Bookman OldstyleBook Antiqua
Book Antiqua is my personal favorite. When you put them all side by side you can notice the small, subtle differences in them. Bookman Oldsyle is the easiest one to pick out of the group. It's heavier and more extended then the rest of the serifs. Times New Roman is the most commonly used, it's a little more condensed and has a higher x-height then the other serifs. It has darker strokes, which vary moreso then the other fonts that are pictured here. Book Antiqua is the most subtle of all of them, if you look carefully, you can see that the serifs at the end of each stroke actually curve upward.
ArialArial Black
Century GothicFutura
Univers
These are the five different sans serif fonts I usually choose from. Since they don't have serifs, they're cleaner, and geometric as opposed to organic and elegant. Arial Black is everyone's favorite, and by putting it in caps, you can create a clean look. It's actually a darker style of Arial (hence the name "Arial Black"). If you choose Arial and change the style to "bold", it has the same effect, except the strokes of the font themselves are a little lighter. It's nice when you don't want the font to look as heavy, or when you only have a certain amount of space and you want to make it a little smaller, but still legible. Both Century Gothic and Futura are similar, and if you have Futura, it should come in a variety of different styles, ranging from "thin" to "black". You should even have a condensed and extended version of it. The more styles you have, the easier it is to create a hierarchy on your icon. For example, for smaller type, a bolder face would be more legible. Futura Light could be used as a headline, while Futura Bold Condensed goes beneath it to create a subhead. Fonts with thinner strokes are better used as one-word headlines on icons, and thicker faces serve better as smaller type.
This is all incredibly important for creating an overall "mood" of an icon. If you choose the wrong font, then the meaning can easily be lost. It's also nice to know when you're choosing a font and are having a hard time choosing between two. Simple fonts are the best if you want the type to be read, otherwise it'll look busy and over-done.
Kerning and Leading / If you head up to the tab that says "window" when you're in Photoshop, you'll get all the options of the different palettes you can pull. Since the one we want to use isn't open automatically when you start Photoshop, you need to open yourself. Go down to "character", and something along the lines of this should pop up.
This will tell you everything you need to know about the type that you're setting. Everything from the font type to the kerning. On the far right side, beside point size you have two options. One with the letter A and an arrow moving horizontally, the other with a letter A and an arrow moving vertically. The one with the arrow moving horizontally is your kerning.
Kerning is basically the space between the letters, the more you widen it, the more elegant and bookish it looks. For example, here's the same font over and over with different kerning.
They range by 50's. So the one at the top is -150 ems while the one at the bottom is 200 ems. It's a very convenient way to check and see if the letters need to be farther apart. With smaller type, it's easier to read letterforms that are farther apart.
The option beneath the kerning, the one with the arrow moving vertically is the leading. The leading is the space between one line of type to the next, it's always better to customize it rather then leave it on auto (it will default on auto). When you make smaller lines of type, using the leading is amazing, because it's easier to line it up with only one pixel between smaller lines of type.
Beneath are the different Photoshop styles of type. The first one (marked with a bold letter "T") is bold automatic, and as much as people like to play with that, I'd suggest just using the bold style in any given font that you're using. Using the bold automatic can screw up the kerning. The one beside it is automatic italic (marked with an italic letter "T"), again, most fonts already have an "oblique" or a "bold" style as an option, I'd suggest just using that.
The two besides those are my favorite. The automatic caps (marked with two majuscule T's side by side, it looks something like this "TT") and automatic small caps (marked with a T and then a smaller capital T beside it). Both of these make it really simple to switch between minuscule (lower case) and majuscule (upper case) letterforms easily to see what looks best, you can compare the kerning above to the same font (Book Antiqua) below.
Looks a little bit different. The kerning is kept the same, so you can see how you need to opening the kerning more if you choose to use automatic caps.
Anti-aliasing / This is incredibly important when you set type in Photoshop. Since Photoshop works in pixels instead of vectors (like Illustrator), it makes set type look smooth by mixing the edge pixels with the actual image. Using anti-aliasing tells Photoshop what way you want the pixels to mix with the surrounding image. This is incredibly important to the way your type will look after it's set, if it'll break up or have a ragged edge. There are five different ways to anti-alias type in Photoshop.
None
Having no anti-aliasing method means that the edges of the type will be cut and ragged, and the pixels will not be mixed to the image behind it. This works best with bitmat fonts such as 04b and Sevenet 7. It gives everything the look of being on a computer screen.Sharp
This is what I usually use for small lines of type. It mixes the pixels around the edges of the type just enough that it still remains dark and crisp, but doesn't look blurred or bold.Crisp
This one makes the type just a little sharper, still blurring the edges somewhat. This is better for thinner fonts like Century Gothic and Futura, depending on the use in the icon. You can start to see the differences almost right away, if you can't pick them out, look at the counter (hole) in the bottom of the "g" in "typography".Strong
This is what I usually use since I use a lot more serif fonts then I use sans serif. This makes the type look heavier without making it look as blurred. It's a nice medium to modify once it's set and can be sharpened nicely.Smooth
You know, I've never used this, but it makes the edges along the type smooth and blurred. (Perhaps that's why.) It's the smoothest of the five, and tends to look almost illegible.
You can find the different ways to anti-alias your type at the top of your screen after you choose the type tool in your tool bar, and it looks like this:
It's the fourth option over. Remember to select the type before you use it, or you'll get no effect at all.
Layering Type on Icons / This is a massively simple technique, the reason I'm including it is because Lins actually didn't know it existed until I told her. After your type is set on your icon, all you do is pull another layer of the same type by grabbing on to the layer of type, and dragging it down into the icon beside your trash icon in your layer palette. It'll create another layer above or beneath the type that you just set, and will make it darker and fuller.
After you pull the layer and make a copy, you can go back and link them together and rasterize the layer to use it to your whim. It works best, I think, with the anti-alias set at either crisp or sharp. (Sharp, of course, being my favorite.)
Small Lines of Type / You can, of course, take the easy way out and get a brush to start making lines of type, and then use the sharpen tool to sharpen it up so it looks crisp.
Or you could make your own. Personally, I like to have my little rows of type say things even if it can't be read; as an artist, it just kind of makes me feel better about using it as an element if it actually has something to do with the piece (even if the piece is a 100x100 square). So I find a long string of type that I like, and make my own. Once again the mood of the icon comes in to play-and how dark you want the little line of type. This will determine which font you use. The line of type will be lighter if you used a serifed font, and darker if you use a sans serif font. You can opening and close the kerning to your leisure to make the line of type the desired length, but also remember that the more you opening the kerning, the lighter the line will be. Changing the style of the font can also make it lighter and darker, obviously choosing Times New Roman Bold will make the line darker than Times New Roman. I suggest that you play around and find a setting that you like and reuse it.
I usually set the anti-aliasing to "sharp" to make the type sharper and more legiable. Setting it to "none" also works well, depending on the pixel layering around it. You can also go in and sharpen it to your heart's content with the little triangular sharpening tool; or you can just filter it with a sharpen. You can also set the anti-aliasing to "strong", and then pull another layer of type over it by grabbing the layer and pulling it down to "make layer copy" (near the trash can in your layers palette) and then linking them and merging the layers.
Small lines of type can usually be set around anywhere between 1 and 3 points. I usually set mine at 1.5 points. You can go as small as 0.5 of a point if you want to make rows of it. If you use all caps, you can make the line of type level, so nothing dips below the baseline. If you choose to keep it minuscule, you can get an interesting effect with the descenders and the ascenders, depending on how wide you set your leading. You can see that in the Ky icon I used in this post.
Flourishes / Flourishes are the last touch you can tie into using type. There are many different kind of flourishes you can pick from! You can use little fading squares to little curlies. There are even complete fonts of ornimentals that you can use, like I used on this Virgil icon:
Fonts like that can be found at House of Lime, she has A-Z of art nouveau-ish ornimental fonts.
There are also little flourishes you can use to tack onto fonts to make them look more elegant, like I used in this Mathias icon:
These little flourishes inparticular were made by bunny_icons, and can usually be found on iconextras community. You can also make your own. Brushes usually need to be sharpened, however, as they're a little blurry. The one I used on the Mathias icon, I choose to lay over the cross in the "H", so it looked as if it were part of the font itself.
Resources / The best resource I have (something that I think everyone should read, no matter what field they're going into) is called The Elements of Typographic Style by Robert Bringhurst. It's one of the best resouces on typography that there is. I just skimmed the surface about differences with different fonts, he goes into indepth detail, and even tells you how many characters to put on a line before it becomes unbearable to the eye.
Other resources include:
icon_extras
photoshopextras
icontutorials
Misprinted Type - There's a little of everything here, fonts, brushes, and so fourth, I love his brushes. They're usually all I use brush-wise.
House of Lime - Where I get all the Ornamental fonts, A-Z.
Typo 5 - Fonts like whoa, along with a lot of really interesting layouts.
Fenotype - MORE FONTZZ.
Astigmatic - And more and more fonts.
Is there anything else I've forgotten/anything anyone else would like to add? I always like to know if those helped or not, or if you already knew this stuff. :3 So drop me a line and tell me, I'd appreciate it.
Yes. I know way too much about typographic design. I'm just a little crazy when it comes to stuff like this. If I use a term you don't know, or that I didn't explain, please tell me so I can tell you what it means/fix it.
OVERVIEW
-Fonts I Commonly Use (and why)
-The Character Palette
-Anti-aliasing
-Layering
-Small Lines of Type
-Typographic Flourishes
-Resources
Fonts I Commonly Use / Since the differences in these were already explained, I decided to include this to show the difference between various serif fonts and various sans serif fonts. The most important thing about using a font on an icon is the mood that that certain type of font shows. Serifs are more elegant and antique (depending on the style). They portray a more romantic part of design. I usually use them to make things look like books, or like they're telling stories. Some of the serifed fonts I'm particularly fond of are:
ITC New BaskervilleTimes New Roman
Bookman OldstyleBook Antiqua
Book Antiqua is my personal favorite. When you put them all side by side you can notice the small, subtle differences in them. Bookman Oldsyle is the easiest one to pick out of the group. It's heavier and more extended then the rest of the serifs. Times New Roman is the most commonly used, it's a little more condensed and has a higher x-height then the other serifs. It has darker strokes, which vary moreso then the other fonts that are pictured here. Book Antiqua is the most subtle of all of them, if you look carefully, you can see that the serifs at the end of each stroke actually curve upward.
ArialArial Black
Century GothicFutura
Univers
These are the five different sans serif fonts I usually choose from. Since they don't have serifs, they're cleaner, and geometric as opposed to organic and elegant. Arial Black is everyone's favorite, and by putting it in caps, you can create a clean look. It's actually a darker style of Arial (hence the name "Arial Black"). If you choose Arial and change the style to "bold", it has the same effect, except the strokes of the font themselves are a little lighter. It's nice when you don't want the font to look as heavy, or when you only have a certain amount of space and you want to make it a little smaller, but still legible. Both Century Gothic and Futura are similar, and if you have Futura, it should come in a variety of different styles, ranging from "thin" to "black". You should even have a condensed and extended version of it. The more styles you have, the easier it is to create a hierarchy on your icon. For example, for smaller type, a bolder face would be more legible. Futura Light could be used as a headline, while Futura Bold Condensed goes beneath it to create a subhead. Fonts with thinner strokes are better used as one-word headlines on icons, and thicker faces serve better as smaller type.
This is all incredibly important for creating an overall "mood" of an icon. If you choose the wrong font, then the meaning can easily be lost. It's also nice to know when you're choosing a font and are having a hard time choosing between two. Simple fonts are the best if you want the type to be read, otherwise it'll look busy and over-done.
Kerning and Leading / If you head up to the tab that says "window" when you're in Photoshop, you'll get all the options of the different palettes you can pull. Since the one we want to use isn't open automatically when you start Photoshop, you need to open yourself. Go down to "character", and something along the lines of this should pop up.
This will tell you everything you need to know about the type that you're setting. Everything from the font type to the kerning. On the far right side, beside point size you have two options. One with the letter A and an arrow moving horizontally, the other with a letter A and an arrow moving vertically. The one with the arrow moving horizontally is your kerning.
Kerning is basically the space between the letters, the more you widen it, the more elegant and bookish it looks. For example, here's the same font over and over with different kerning.
They range by 50's. So the one at the top is -150 ems while the one at the bottom is 200 ems. It's a very convenient way to check and see if the letters need to be farther apart. With smaller type, it's easier to read letterforms that are farther apart.
The option beneath the kerning, the one with the arrow moving vertically is the leading. The leading is the space between one line of type to the next, it's always better to customize it rather then leave it on auto (it will default on auto). When you make smaller lines of type, using the leading is amazing, because it's easier to line it up with only one pixel between smaller lines of type.
Beneath are the different Photoshop styles of type. The first one (marked with a bold letter "T") is bold automatic, and as much as people like to play with that, I'd suggest just using the bold style in any given font that you're using. Using the bold automatic can screw up the kerning. The one beside it is automatic italic (marked with an italic letter "T"), again, most fonts already have an "oblique" or a "bold" style as an option, I'd suggest just using that.
The two besides those are my favorite. The automatic caps (marked with two majuscule T's side by side, it looks something like this "TT") and automatic small caps (marked with a T and then a smaller capital T beside it). Both of these make it really simple to switch between minuscule (lower case) and majuscule (upper case) letterforms easily to see what looks best, you can compare the kerning above to the same font (Book Antiqua) below.
Looks a little bit different. The kerning is kept the same, so you can see how you need to opening the kerning more if you choose to use automatic caps.
Anti-aliasing / This is incredibly important when you set type in Photoshop. Since Photoshop works in pixels instead of vectors (like Illustrator), it makes set type look smooth by mixing the edge pixels with the actual image. Using anti-aliasing tells Photoshop what way you want the pixels to mix with the surrounding image. This is incredibly important to the way your type will look after it's set, if it'll break up or have a ragged edge. There are five different ways to anti-alias type in Photoshop.
None
Having no anti-aliasing method means that the edges of the type will be cut and ragged, and the pixels will not be mixed to the image behind it. This works best with bitmat fonts such as 04b and Sevenet 7. It gives everything the look of being on a computer screen.Sharp
This is what I usually use for small lines of type. It mixes the pixels around the edges of the type just enough that it still remains dark and crisp, but doesn't look blurred or bold.Crisp
This one makes the type just a little sharper, still blurring the edges somewhat. This is better for thinner fonts like Century Gothic and Futura, depending on the use in the icon. You can start to see the differences almost right away, if you can't pick them out, look at the counter (hole) in the bottom of the "g" in "typography".Strong
This is what I usually use since I use a lot more serif fonts then I use sans serif. This makes the type look heavier without making it look as blurred. It's a nice medium to modify once it's set and can be sharpened nicely.Smooth
You know, I've never used this, but it makes the edges along the type smooth and blurred. (Perhaps that's why.) It's the smoothest of the five, and tends to look almost illegible.
You can find the different ways to anti-alias your type at the top of your screen after you choose the type tool in your tool bar, and it looks like this:
It's the fourth option over. Remember to select the type before you use it, or you'll get no effect at all.
Layering Type on Icons / This is a massively simple technique, the reason I'm including it is because Lins actually didn't know it existed until I told her. After your type is set on your icon, all you do is pull another layer of the same type by grabbing on to the layer of type, and dragging it down into the icon beside your trash icon in your layer palette. It'll create another layer above or beneath the type that you just set, and will make it darker and fuller.
After you pull the layer and make a copy, you can go back and link them together and rasterize the layer to use it to your whim. It works best, I think, with the anti-alias set at either crisp or sharp. (Sharp, of course, being my favorite.)
Small Lines of Type / You can, of course, take the easy way out and get a brush to start making lines of type, and then use the sharpen tool to sharpen it up so it looks crisp.
Or you could make your own. Personally, I like to have my little rows of type say things even if it can't be read; as an artist, it just kind of makes me feel better about using it as an element if it actually has something to do with the piece (even if the piece is a 100x100 square). So I find a long string of type that I like, and make my own. Once again the mood of the icon comes in to play-and how dark you want the little line of type. This will determine which font you use. The line of type will be lighter if you used a serifed font, and darker if you use a sans serif font. You can opening and close the kerning to your leisure to make the line of type the desired length, but also remember that the more you opening the kerning, the lighter the line will be. Changing the style of the font can also make it lighter and darker, obviously choosing Times New Roman Bold will make the line darker than Times New Roman. I suggest that you play around and find a setting that you like and reuse it.
I usually set the anti-aliasing to "sharp" to make the type sharper and more legiable. Setting it to "none" also works well, depending on the pixel layering around it. You can also go in and sharpen it to your heart's content with the little triangular sharpening tool; or you can just filter it with a sharpen. You can also set the anti-aliasing to "strong", and then pull another layer of type over it by grabbing the layer and pulling it down to "make layer copy" (near the trash can in your layers palette) and then linking them and merging the layers.
Small lines of type can usually be set around anywhere between 1 and 3 points. I usually set mine at 1.5 points. You can go as small as 0.5 of a point if you want to make rows of it. If you use all caps, you can make the line of type level, so nothing dips below the baseline. If you choose to keep it minuscule, you can get an interesting effect with the descenders and the ascenders, depending on how wide you set your leading. You can see that in the Ky icon I used in this post.
Flourishes / Flourishes are the last touch you can tie into using type. There are many different kind of flourishes you can pick from! You can use little fading squares to little curlies. There are even complete fonts of ornimentals that you can use, like I used on this Virgil icon:
Fonts like that can be found at House of Lime, she has A-Z of art nouveau-ish ornimental fonts.
There are also little flourishes you can use to tack onto fonts to make them look more elegant, like I used in this Mathias icon:
These little flourishes inparticular were made by bunny_icons, and can usually be found on iconextras community. You can also make your own. Brushes usually need to be sharpened, however, as they're a little blurry. The one I used on the Mathias icon, I choose to lay over the cross in the "H", so it looked as if it were part of the font itself.
Resources / The best resource I have (something that I think everyone should read, no matter what field they're going into) is called The Elements of Typographic Style by Robert Bringhurst. It's one of the best resouces on typography that there is. I just skimmed the surface about differences with different fonts, he goes into indepth detail, and even tells you how many characters to put on a line before it becomes unbearable to the eye.
Other resources include:
icon_extras
photoshopextras
icontutorials
Misprinted Type - There's a little of everything here, fonts, brushes, and so fourth, I love his brushes. They're usually all I use brush-wise.
House of Lime - Where I get all the Ornamental fonts, A-Z.
Typo 5 - Fonts like whoa, along with a lot of really interesting layouts.
Fenotype - MORE FONTZZ.
Astigmatic - And more and more fonts.
Is there anything else I've forgotten/anything anyone else would like to add? I always like to know if those helped or not, or if you already knew this stuff. :3 So drop me a line and tell me, I'd appreciate it.