Beginner's Guide to Font-Making, #3!

The previous two issues talked about coding basics (located here), and NeoHTML (located here). You should probably read those first if you’re completely new to the font-making business. For this issue, I’m going to be talking about the first kind of font present on the Neoboards: word and/or symbol fonts.

Now, what’s a word font? As can be deduced from the name itself, a word font is a font comprised primarily of words. These words could be memorable slogans you live by, lyrics of a song you’ve been addicted to recently, quotes from a show you love, or even just your name. Symbol fonts, on the other hand, are pretty similar to word fonts, except that they’re primarily composed of symbols like asterisks (*), bullet points (•), hearts (♥), etc.

That sounds easy enough, doesn’t it? If you’ve followed the guide so far, it definitely should be a piece of cake! In my personal opinion, word/symbol fonts are a lot better and easier than the other kind of font, the picture font, because the possibilities are literally endless. You will soon find out that picture fonts have more limitations to them – I will talk about this soon in the next issue of the Beginner’s Guide to Font Making. Anyway, there are so many lyrics and quotes from all kinds of languages that can be used to make the perfect font for you. As such, I definitely recommend starting off with word fonts on the Neoboards.

So, do you have anything in mind for a word font? Great! Listed down below are a couple of tips and tricks to help you come up with your perfect word and/or symbol font. (Again, keep in mind that these are only suggestions!)

1. Always experiment with fonts and sizes!

As stated in the NeoHTML edition of the guide, your font would look much better with a font that’s different from that of your NeoHTML. While I can’t put into words why having different fonts is more aesthetically pleasing, it definitely just is! However, I wouldn’t recommend going past two different fonts in your word font. Having more than two tends to look a lot messier and all over the place, so definitely try to limit yourself to having only two fonts. I also wouldn’t recommend having more than one font face in the same line.

(P.S. If you want a list of all the fonts that can be used on the Neoboards, SunnyNeo has a very useful list here: http://www.sunnyNeo.com/avatars/typefacechart.php

Now, if what you want to put down is something short, like your name, perhaps, it’s best to only have one. There’s not much use to having three different fonts for a word font that only says Aya, is there? :P

If what you want to put down is something longer than a name, on the other hand, then go for two different fonts. My general rule of thumb is that if the words don’t fit into one line, two fonts may be needed.

You may be asking: what if I want to have the same font as my NeoHTML? What if my NeoHTML was Verdana, for example, and I just love Verdana so much that I want it as my signature as well?

My first answer? It’s your font! Do whatever you please. Again, this is just a guide.

My second answer? Nothing’s totally wrong with having the same font in your NeoHTML and signature – just refrain from making them totally similar. To use the hypothetical situation in which both my NeoHTML and signature are Verdana, I would suggest changing the color of the signature and maybe making it bold. This way, it looks much spiffier and differentiates between the NeoHTML and signature quite nicely. Everyone is happy!

In regards to sizes, having different sizes in your font adds a bit of dimension, especially if your font has more than one line. However, I wouldn’t really recommend having more than one size for one line, since it’ll probably just look quite messy. If your font is a one-liner, it’s best to only use one size. If your font has more than one line, different sizes would work well if each line is limited to only one size.

Down here is a template of a font I’ll be demonstrating with.

This font is a two-liner. The first line is Consolas, size 1; the second is Georgia, size 4. Definitely still looks plain, so let’s move on to the next tip!

2. Try to fit in most of the main colors of your avatar.

Most avatars tend to have three to four primary colors. If you figure out which colors to use and where to put them, it can make your font really pretty. Having a font that matches your avatar definitely brings everything together.

To figure out what the specific hex codes are for the avatar you want, the sites SunnyNeo and The Daily Neopets are your best friends.

SunnyNeo has a very useful eyedropper tool that lets you pick out the color you want from an enlarged picture of the avatar itself. It then generates the specific hex code for you to use, and even has another tool called the Rainbow Font Maker that allows you to create gradients! Nifty, isn’t it?

Meanwhile, The Daily Neopets (as pictured) provides the three most prominent colors for every avatar, saving you the hassle of figuring out which colors to choose.

Now, making the perfect word font isn’t just about putting in all the colors. Much of the font’s aesthetic relies heavily on how the colors are used in the font. Basically, it’s not only the question of which colors to use that’s important – the how aspect is also something to consider.

For one thing, figuring out which colors go where really makes a difference in the overall appearance. Let’s say that the main colors of your font are fuchsia, light blue, and blue. One option could be to create a font that consists only of these primary colors. Considering that the colors light blue and blue are similar in color, you could turn it into a gradient for a cooler effect. Fuchsia can be then used in another part of your font, like so:

(For the record, I’m using the avatar Kau – Fortune Teller for this example.)

Another option would be to add a neutral color to your font so as to highlight the main point of your font. Neutral colors could be black, gray, or other colors close to black and gray. The beauty of these neutral colors is that they match every single avatar, so you don’t have to worry about them ruining your font. Using the same font, here is what it would look like if I added gray and changed the gradient from light blue to blue to fuchsia to blue:

See? A lot of difference can be made just with the colors alone. Also, just to reiterate what I said in the previous issue, always use colors that are easy on the eyes for your font. Having a bright yellow font definitely makes things harder to read, so that’s a no from me!

Instead, I would recommend using your yellows and oranges for other elements of your font. I will be explaining this later.

3. Utilize bold and italic.

Not much needs to be explained here. The bold coding is another way for elements of your font to stick out and pop out even more. Italic does the same.

I normally only use bold on fonts with small sizes (to make them small but impactful) and italic on fonts with big sizes (to make them snazzy and not so plain). Mixing bold + big makes your font seem rather in-your-face, and unless that’s what you’re really going for, I wouldn’t recommend that. Italic + small, on the other hand, isn’t too bad when you look at it, but at times it could be very hard to read and even see.

Using the same font we used earlier, we get this:

I basically just bolded the first line and italicized the second. It’s starting to look really nice now, but I still have one more tip to make it look even better.

4. Mix and match!

Your font doesn’t just have to be purely words or purely symbols. Like I said earlier, you could put asterisks (*), hearts (♥) and all other kinds of symbols to add some more elements to your font. Definitely try to add some if you have some additional space left! There’s a wide range of symbols available for you to use, and SunnyNeo has it all listed down here: http://www.sunnyNeo.com/avatars/specialcharacters.php/.

For the font, I added a couple of symbols to the second line. I changed the letters n to an n to an engma (which is that n with the tail thing), the e to an epsilon (the backwards three thing), the i to a dotless i, and the y to a phi (twirl thing). I usually do these to make my word font look more interesting.

Remember what I said about using your bright yellows and oranges for something else? This is it! Symbols are also a great way of incorporating bright colors into your font without making it too hard to read. As you can see, I added a yellow star at the bottom of the font for just one more pop of color.

So, put them all together and you get…

…this! Tada! See how much different it looks since we first started? The different sizes and fonts adds more dimensions to the font, the colors complement the chosen avatar perfectly and the symbols add a nice bit of flair. Of course, this is only one way of making word fonts – there’s so many colors and symbols and fonts that can be played with that no font looks the same (unless you copied it from someone else, which is mean!).

Another thing I personally love about word fonts is that they’re very flexible. If you ever get tired of your current avatar, the colors in your word fonts can be easily edited to complement the new avatar. I know someone who has the same font in all her Neoboard pens – she just uses different colors for her different avatars! So, for all you people out there who might not have the time (and motivation) to make different fonts for your different avatars, word fonts are your best friend.

There you have it, folks! These are my tips and tricks to making the perfect word font. I sincerely hope that you guys have learned from my guide. Join me in the next issue as I tackle the other kind of font: picture fonts.

Thank you for reading, and I’ll see you next time!