HBGames
So, time to tell you guys about font usage. No specific reason for me doing this, it was just an idea I had, and while I think that most people have a general feeling for what font to use, I'm sure that knowing exactly what font to use works better and is less random-based. And of course, this is also a lookup guide for people who lack this feeling. Again, this isn't limited to RMXP, as it's a very generic thing to know and learn, so it can also be applied to web design and printmedia.
There's a basic thing every font you use necessarily needs to be: Readable. At all costs, and there's no exception. Text is supposed to express something more exact than images can, while images are supposed to tell much more stuff in general and leave a little rest to the imagination of the viewer. So, your goal when using text is to express stuff to be read and recognized easy and fast. If you have a font that is unreadable, barely readable or even only a little hard to demystify, it's not the font to choose.
This guide is supposed to give you hints on what you should pay attention especially, and also give you a couple of examples, reasons, as well as methods to make a difficult font readable.
This guide is supposed to give you hints on what you should pay attention especially, and also give you a couple of examples, reasons, as well as methods to make a difficult font readable.
There are a huge number of differences between fonts, and if you'd go into any detail you can, of course, every font would stand alone. I'll sort fonts only in two very rough categories, which serves the purpose to choose the proper font for a specific situation, though...
You need to differ between two very vital attributes a font can have: They might be screen fonts (also called fonts for digital media) or print media fonts (hardly ever called fonts for analog media).
The differences are easy: Screen fonts don't use serifs often, while print media fonts don't have to be as exact as screen fonts, as they have a much higher resolution.
The first example I'll give is for screen fonts, it's name is Arial / font size 72:
http://img162.imageshack.us/img162/2678/01el2.png[/img]
As you can see, it's an exact font with clearly defined letters and not a single unnecessary thing. This font is usuable even for small fonts, such as they're used in applications, text editors, and even in RMXP.
The next font is Garamond / 72:
http://img471.imageshack.us/img471/2538/02cg0.png[/img]
Garamond is commonly used for novels and similar print media. It has a couple of design aspects like the serifs you can see, and also a very specific feature I'd like to point out: The little 'L'. The way Garamond has it, you could easily read it as '1', but because this font is mainly used for large blocks of text, you won't have it mixed with numbers.
You need to differ between two very vital attributes a font can have: They might be screen fonts (also called fonts for digital media) or print media fonts (hardly ever called fonts for analog media).
The differences are easy: Screen fonts don't use serifs often, while print media fonts don't have to be as exact as screen fonts, as they have a much higher resolution.
The first example I'll give is for screen fonts, it's name is Arial / font size 72:
http://img162.imageshack.us/img162/2678/01el2.png[/img]
As you can see, it's an exact font with clearly defined letters and not a single unnecessary thing. This font is usuable even for small fonts, such as they're used in applications, text editors, and even in RMXP.
The next font is Garamond / 72:
http://img471.imageshack.us/img471/2538/02cg0.png[/img]
Garamond is commonly used for novels and similar print media. It has a couple of design aspects like the serifs you can see, and also a very specific feature I'd like to point out: The little 'L'. The way Garamond has it, you could easily read it as '1', but because this font is mainly used for large blocks of text, you won't have it mixed with numbers.
You've learned that fonts might have special characteristica, such as serifs and misinterpretable letters, or simply an exact face. Well, this paragraph will cover the uses of those, and their Dos and Don'ts. If you use this tutorial to check your current project, you might compare what you did with what I wrote. Oh, and remember: There are always exceptions to the rules for special cases, but you necessarily must be sure it's easily readable.
Serifs
Serifs serve the purpose of assuring the reading flow. It's much easier to read large text blocks if they're written with a soft font with serifs than a hard and exact font. This applies for both screen and print media, but there's a reason why there are non-serif fonts: Serifs tend to get badly displayed by digital devices, no matter what kind, if you use a small fontsize. Therefore, if you use serifs for digital media, make sure you use a fontsize they get displayed with as they should.
Exact Fonts
Exact fonts do what serif fonts can't - they write text with a small fontsize, and they're easier to recognize at first sight. Therefore, they're most often used for small pieces of text, most of the time shorter than a sentence. They're also used for all kind of digital text needs.
Pixel / System Fonts
System fonts are for displaying extremely small sized text, to name it, a fontsize between 6 and 10. Even exact fonts cease to work as they should for these font sizes most of the time, but most things you do won't need such small text outputs anyway. This is the reason why there aren't much system fonts available.
'Signature' Fonts
Those fonts are far beyond the purpose of making readable text. They're full of additional bits of beatiful lines and ornaments, and aren't suited for text bits no longer than a couple of words. Also, you mustn't use them with a small fontsize, as they become a line of the color you chose for the font, nothing more. I'll give you an example to look at, using Jey / 72, to show you what I'm talking about.
http://img255.imageshack.us/img255/3780/03ka1.png[/img]
Monospaced Fonts
Monospaced means that all letters have exactly the same displayed with. That doesn't necessarily mean that a 'W' is exactly as wide as an 'i', but they both have the same distance to the next letter. 'Courier' has this attribute, but because I want to show you a neutral example without serifs, and I also try to get away from the fonts used by default, I'll show you MS Gothic / 72.
http://img460.imageshack.us/img460/6039/04pa6.png[/img]
As you can see, the 'm' is stached a little, while there's a large space to the left and the right of the 'l'. Fonts like this are used for syntax editors and machines, where functionality goes over beauty. This is why you normally wouldn't use them in a game or on a website or something, but you can use these fonts to create exactly the impression that it serves only a functional impression, just like if you'd have a computer screen or something. Also, RMXP.org's
Serifs
Serifs serve the purpose of assuring the reading flow. It's much easier to read large text blocks if they're written with a soft font with serifs than a hard and exact font. This applies for both screen and print media, but there's a reason why there are non-serif fonts: Serifs tend to get badly displayed by digital devices, no matter what kind, if you use a small fontsize. Therefore, if you use serifs for digital media, make sure you use a fontsize they get displayed with as they should.
Exact Fonts
Exact fonts do what serif fonts can't - they write text with a small fontsize, and they're easier to recognize at first sight. Therefore, they're most often used for small pieces of text, most of the time shorter than a sentence. They're also used for all kind of digital text needs.
Pixel / System Fonts
System fonts are for displaying extremely small sized text, to name it, a fontsize between 6 and 10. Even exact fonts cease to work as they should for these font sizes most of the time, but most things you do won't need such small text outputs anyway. This is the reason why there aren't much system fonts available.
'Signature' Fonts
Those fonts are far beyond the purpose of making readable text. They're full of additional bits of beatiful lines and ornaments, and aren't suited for text bits no longer than a couple of words. Also, you mustn't use them with a small fontsize, as they become a line of the color you chose for the font, nothing more. I'll give you an example to look at, using Jey / 72, to show you what I'm talking about.
http://img255.imageshack.us/img255/3780/03ka1.png[/img]
Monospaced Fonts
Monospaced means that all letters have exactly the same displayed with. That doesn't necessarily mean that a 'W' is exactly as wide as an 'i', but they both have the same distance to the next letter. 'Courier' has this attribute, but because I want to show you a neutral example without serifs, and I also try to get away from the fonts used by default, I'll show you MS Gothic / 72.
http://img460.imageshack.us/img460/6039/04pa6.png[/img]
As you can see, the 'm' is stached a little, while there's a large space to the left and the right of the 'l'. Fonts like this are used for syntax editors and machines, where functionality goes over beauty. This is why you normally wouldn't use them in a game or on a website or something, but you can use these fonts to create exactly the impression that it serves only a functional impression, just like if you'd have a computer screen or something. Also, RMXP.org's
Code:
tags use a monospaced font.
[b]Upcase / Downcase Fonts[/b]
Several fonts contain only upcase or downcase letters, so it doesn't matter if you press shift or not. I don't know why there are special fonts for that, as you could simply take any other font and write only upcase or downcase, but there's definately a purpose behind writing like this, which is why I took this characteristica in the list. You don't only use this to point out that you're SHOUTING or something like that, but you can add an additional effect of mass to headlines or similar types of text. Also, most upcase fonts don't have letter parts going underneath the x-height, which means you don't have to worry about sticking-out text parts, if you go for a proper design. Finally, some media have an upcase font from the begin with, and it'd look weird if you'd use something else - the example to name would be comic books or manga.
[b]Fonts with Design Elements[/b]
Some fonts have special things included besides the letters, which might be all kinda of geometrical objects, animals, or basically any other thing you can imagine. I can't tell much for their usage other than to only use them very rarely, but I'll give you an example using Encounter / 60:
[url=http://img61.imageshack.us/img61/8265/05oy4.png]http://img61.imageshack.us/img61/8265/05oy4.png[/url][/img][/spoiler][spoiler=Part IV :: Font Attributes]Just as characteristica, attributes can heavily change the way your text looks like. Other than font-specific characteristica, you can choose wheather to add those attributes or not. Let's take a look...
[b]Bold[/b]
Bolden a font can make it more massive, more impressive. You can use it to give headlines more strenght, which is what I did for these paragraphs, or draw more attention to specific words within a text. Remember, though: If you don't have a reason to bolden text, don't use it.
[b]Italic[/b]
Italic text can be used to highlight soecific words within a text just like the bold attribute, but it's way less attention catching, which makes it more suitable for large texts. It's also very commonly used to simulate a special pronounciation within text-only communication.
[b]Underlined[/b]
Underlined text should be used very carefully, as it's used by default on web pages, for example. We all think if we see an underlined word in the middle of a text block that you can click it and get redirected to another page. Therefore, if you want to highlight something, use one of the above methods.
You can also use it for strenghtening headlines, for example, but I'd also recommend using bo?d text for that... in general, I think the uses for underlined text in design business are very rare.
[b]Crossed Out / Overlined[/b]
Those two attributes are something you shouldn't ever use in my personal opinion. Crossed out text makes no sense, as you basically state that you're having something there that doesn't belong there... well, if so, you can also simply delete it from where it is, as we're talking about digital creation. For overlines, well... I don't think anyone'd use an overlined text without an underline, so an underline alone serves the purpose most of the time. Remember, if something isn't necessary, better leave it out.
There's also the option of using more than one attribute at the time. Well, you're free to do this, but always check if you have to, as text might as well look overloaded when you use too many attributes, especially if you also have serifs or special ornaments on your font.[/spoiler]
This was a rather short tutorial, though it was a little tedious to write. As always, if you have suggestions or other comments, please post them. Thanks for reading, I hope this is of use for you.