A guide to: adding text
Text is arguably the most important part of a button. As the purpose of a button is advertising your site, it should be clear to people what the button is advertising for and that is why you put text on it in the first place. I've noticed that many people find it quite difficult to get it right, so I'll explain how I like to add text to my buttons.
Before you start
There are some things to keep in mind when making a button. First and foremost remember that text should always be readable. It doesn't matter how fancy the font is you've used or how pretty the color is you gave your text, you should always be able to read it. People are not going to try and figure out what your button says as most visitors are really lazy. I know this is easier said than done. When looking back at my portfolio, I find that quite some buttons could have been better if I'd made the text more readable. Always look at your button and ask yourself, do I have to try before I can read what it says? Also, remember that pixel fonts are usually easier to read than nonpixel fonts.
Also, mind your placement. The most important focus point of your button should not be covered by the text. Also, because buttons are so small, it will become really obvious when the spacing is off. When you put something in the middle of a button, make sure it's really in the middle and not a bit more nudged to the left. People can and will see when it's not right.
Less is more
. Buttons are small, try to put as little text on it as possible, though I suggest you stay away from abbreviations. It should be clear what the button is advertising for, but it shoudn't contain complete sentences. If you want to put more text on a button, then consider making the text the focus point and use a simple background.
Nice fonts to use
As I said before, I like using pixelfonts as they are really easy to read and therefore easy to use. There are quite a lot of pixelfonts available if you look for them, however, these are the ones I had installed on my computer. I don't use them all as often, because I like the more basic ones better than the fancy ones. My favorites are 04b_03, 04b_24 (for longer words) and PF tempesta five (condensed and compressed).
The important thing when using pixelfonts is that you should set the anti-aliasing (see the sceenshot below) to none. Otherwise your font will appear blurry. Also, all pixelfonts have a standard font size. I've also named that in the list. Don't make the font larger or smaller, they don't work that way. As you can see I've also showed the lowercase and uppercase versions of all the fonts. The letters for 04b_21, for example, only show for the uppercase version. A lot of other fonts also look better and are better readable in uppercase, so that's something you need to consider.
A screenshot of the menu bar for the text tool. From left to right there are options to set the text font, font style and size and the anti-aliasing method.
As you can see in the picture above, I like setting the anti-aliasing method for nonpixel fonts to strong. Try them all out and you will see that strong usually results in the best readable font. However, when you use a font that's really thick and already readable the way it is, you could try crisp or sharp, otherwise the font might become too strong.
I know a lot op people list their favorite nonpixel fonts in button tutorials, however, I don't really have favorites for buttons. I just try a lot of fonts to see which one I like best. If you are interested, you can find a list of my favorite fonts here
(these are just pretty much all the nice fonts I have).
It's good to start with a large collection of fonts, so I suggest you browse your favorite font site before you start making your buttons. A must are some basic pixelfonts. For nonpixel fonts I suggest you have at least some handwritten fonts, a nice serif font and a bold font. You probably already have a lot of good fonts on your computer as they come with a nice collection of standard fonts.
Choosing a font
So now you have installed a lot of pretty fonts, but how do you choose? It really depends on a few things. The most important factor is probably space, meaning how much space do you have left on your button and how long is the text you want to put on it. If your site name is pretty long, for example Nienke's Premades
, you should stay away from using large fonts, or you should somehow reserve a lot of space on your button. This is something to think about before you even start making your button.
The other thing is the amount of words you have to put on your button. For Nienke's Premades
I like to use different fonts for each word. I think this makes the button more interesting, but also allows you to emphasize certain words. Well, let's look at some examples.
Text as the focal point / one font.
As you can see, the main focal point in these buttons is the text. That's why you want it to stand out and I like to use large nonpixel fonts for this type of buttons, but pixelfonts can look good too. However, this is the type of button you'd want to make if your new to using nonpixel fonts. Keep the background simple, as it can quickly become overwhelming. I usually use this for one-word buttons.
Text as the focal point / multiple fonts.
When you want to put multiple words on a button, try to use different fonts. The easiest way is to use two different pixelfonts as you can see in the first button on the left. You could also mix pixel- and nonpixel fonts, or use all nonpixel fonts. However, the key is using contrasting fonts (handwritten vs. serif, nonpixel vs. pixel, large vs. small etc.) to keep it interesting.
With an image focal point.
Most buttons will have an image focal point. As I said before, you are limited by the amount of space. Don't choose a large font, when your spacing doesn't allow for it. You can see this on the left. As the text gets longer, I start to use smaller fonts and also make the focal image smaller. When you start making buttons, I suggest you start with using nonpixelfonts for this type of buttons. These usually work the best (and easiest) with image focal points.
Another thing to keep in mind is that you could match your font to the theme of your button. I wouldn't use a very swirly font for a spooky button. Remember that you usually can't go wrong with pixelfonts.
The placement of the text is also very important and can have a huge impact on the button as a whole. Here are some examples I made using my button bases
Here I choose a base that is quite simple. It does have a focal point, the tree, but it's not a very obvious one. When you put the text in the lower left corner, you will have the tree in the opposite border and this creates balance. Note that the distance from the left and lower border to the text is the same, which also results in a nice balance. You could decide to move the text up, in the second option the text is vertically centered. I like this option less than the first one, but it still works as you now create a left-right balance. The focus also shifts to the center of the button. For the third button I placed the text in the exact center of the button. As a result the text now covers the tree and it immediately stands out less than in the other options. The text has now definitely become the main focal point of the button.
Another simple base.
The logical thing to do is to place your text in the middle, as this part of the button is empty. Your first option is to place the text in the center towards the bottom of the button. This way the text doesn't take any attention away from the image. You'll create two focal points, that are balanced as they are opposite of each other. For the second option, I moved the text up a bit. It looks like it's vertically centered, however, it's not. I know, what? This is a typical example of an optical illusion, caused by the background image. The text is however slightly more positioned towards the bottom. You will only spot this if you zoom in a lot. Then the third option, with the text exactly centered. It looks like the text is slightly more positioned towards the top, but this is the same optical illusion. In this case I would rather use the second option than the third, because that one seems more balanced.
This base has a really obvious focal image. The first option shows (just as for the first base) the text place on the opposite side of the image focal point (eyes!). In this case I would rather use a larger font as there is still a lot of empty space left. This problem is fixed for the second option, as the text is now in the middle of this space and therefore creates a focal point on the left side of the button. There is still balance, as the face as a whole is another focal point and the text is placed opposite of the face. For the third option I placed the text in the middle of the button. You shouldn't do this, because the text is now covering the faeries face and also, it leaves a relatively large empty space on the left.
When you have an image focal point, then you should place your text on the opposite site of the button. This can be the opposite vertically and horizantally, however, it doesn't always have to be both. Placing things in the center of buttons is also a very save thing to do, again you can center vertically and/or horizontally, and also it does not have to be both. Try to strife for balance and try to keep distances to corners or borders the same. And last but not least, do not cover the important parts of you focal image with text.
I already mentioned above that mixing fonts is a way to keep your button interesting. I also talked about contrast. What I did not tell is that balance is just as important for the mixing of font as for the placement of these fonts.
I'll show you a few examples that I made, using the words Lore example
. I made pixel-pixelfont, pixel-nonpixelfont and nonpixel-nonpixelfont combinations.
The first thing you should note that the word Lore
is a lot shorter than example
. This means that to maintain balance, the word Lore
is usually in a larger font than example
Another thing is that Lore
doesn't contain any letters that would cover the other word up, this would have been different if example
would have been the first word (because of the p). Then the L in Lore
would also cause problems. Say that would have been the case, there are two things you can do. You could try to find a way or arranging the two words so they don't cover each other up. Or, you could capitalize the words, so all letters are the same height. However, you shouldn't do this with handwritten or swirly fonts, as this looks weird.
You could also decide to use another font for the first letters of the words. Then you should use a basic font for the words and then a very bold or fancy font for the first letters.
Don't forget about the alignment. Most of the examples were centered, but that's because there is no button context here. When you are not sure what alignment to use, then stick to this rule. The alignment of your text, depends on its placement. When your text is placed left of an focal image, it's best to also align te text to the left. If it's placed right of the focal image, you'd better align the text to the right. However, when your focus image is more in the middle of a button and you've placed the text agains the image (and not the border), you should do the opposite of this rule. Let's take the example above with the rainbow faerie, second option. I could've placed more text on it and then I would've aligned it to the right. And if the text is placed in the center of the button, then also center the text.
Also, note that the nonpixelfont combinations are much larger than the pixelfont combinations. Make sure that it all fits on your button when you use nonpixelfonts. On the other hand, large fonts are very useful when you have a lot of empty space on your button. This is also why these fonts usually work better with smaller or no focal images.
Again, remember that readability is a priority. Don't overdo the mixing and stay away from using too many nonpixel fonts.
So now you've very thoughtfully placed your text on your button, you want to make it look nice. In this part I'll talk about colors and effects.
Always use colors that are in your button. Take a look at your button and define the main colors, but also try to see what are the dark and light shades in your button.
These are five examples, on the left are the dark colors and on the right the lighter colors. Of course, you can always find more than three main colors in a button, but I think you should stick to a maximum of three for your text.
Again, I always colordrop my colors from my graphics. For the last example, you could just use white, but it will look a bit harsh as the light colors in the buttons aren't pure white. When you choose colors that are in your button, the text will look like it is part of the button, whereas it would look like it doesn't belong there, when you use colors that aren't in your button at all.
First determine where the text is going to go and then choose the color. On light backgrounds, you shouldn't use a light text color, just as you shouldn't use dark colored text on a dark background. When you know if you should use dark or light colored text, you could use one of your main colors you found in your button. I prefer to use colors that are important for the image focal point, this creates a certain unity.
I strongly believe that text for a button always needs a border. Because you are forced to use small fonts, you will need something to make them stand out.
To add a border to your text, right click the text layer in the layer screen and choose Blending options. Then select Stroke (see the screenshot below).
Again, as you are limited by the amount of space, I suggest you always use a border size
of 1. It will look odd when your border is larger than your text and also, it is usually just a waste of space. Don't change position
, you want the border to be outside of the text. You can change the blend mode
to whatever suits you, the blend modes I use the most are soft light and overlay, but you should just try and see what everything does. However, it is better to first change the border color
. I like to use colors that are very close to my background color or main colors that are an opposite shade of my text colors (so dark text with a light border). You should always try to keep the color quite close to the rest of the border, as this will help your text blend in with the rest of the button. If you feel like your button is to harsh, you could always lower the opacity
I really like to add an outer glow to my text. I usually make my outer glow the same color as my border or my background. Making it the same color as your border will make the border less harsh, making it the same color as your background can make the text stand out more from the background.
To add an outer glow to your text, you have to go to Blending options again (see: Borders). The important options for Outer Glow are the same as for Stroke. Unless you know what you're doing, you can better keep most options at default. Only change color, opacity and blending mode.
Drop shadow is actually quite similar to outer glow, but it's dark and displaced a little. It just creates a shadow below your text, which can help making it stand out from the rest. I think the default settings are a bit too harsh for a button though, so I either lower the opacity or blending mode (to soft light or overlay). I also almost always set the distance to 0, as this will put the shadow directly behind the text. I wouldn't touch the other settings too much, but you can play around with them a bit to see what they do.
Gradient overlay is the last layer style I sometimes use to style my text. I use it over colored text, or over text with the border. To do so you'll have to merge the styled text layer with a new layer, because otherwise the gradient will not apply to the border. For the gradient I mainly use the basic black to white gradient, or white or black to transparant. The blending mode I set to soft light or overlay. Or I will use a bright color from the button and use the color to transparant gradient set to lighten. You can change the angle to adjust the direction of the gradient.
The other layer styles I barely ever use, as I think the ones I named cover the basic needs for style text.