Jump to content
The Dark Arts
softbun

Fantastic Fonts and How to Use Them

Recommended Posts

Graphic Type: Any
What is the specific focus of your tutorial? Text and Fonts
What makes your tutorial unique? This is an in depth look at the elements of typography to help give greater understanding to spacing and alignment options.
What level of difficulty is your tutorial? Beginner
Who do you think can best use your tutorial? Anyone!
Can your technique(s) be used outside of the specific images, etc. used in the tutorial? Absolutely!
How translatable is your tutorial? This is just basic knowledge that can be used in anything and everything.



FANTASTIC FONTS AND HOW TO USE THEM
A Text Tutorial by softbun

My aim for this tutorial is to point out basics of fonts and type which will help you choose appropriate font settings and understand just what the heck people are talking about when they say the word 'kerning'. This is a lot of basic information, and a lot of this stuff you probably only know by instinct, but with greater understanding comes the opportunity for greater creativity. So let's dive in!

1) Anatomy of a Font

There are loads of different fonts out there, but most of them fall into a few specific categories. Let's look at them, and some examples:

xh5wIXl.png
(fonts: Garamond, Rockwell, Futura, Edwardian Script)

Now, you may be asking, just what is a serif? A serif is the little foot at the end of a stroke on a letter. Slab-serif fonts have serifs as well, simply in a more blocky style compared to the more sloping style (called Humanist, because it looks more similar to human handwriting) of a typical serif font. Why do fonts have serifs? Serifs are typically found in large bodies of text, and their purpose is to help lead the eye from one letter to the next. Large chunks of text set in a serif font will typically be easier on the eyes to read.
Sans-serif fonts lack this serif. This can result in them looking a little more mechanical and stiff, but also open and clean. Sans-serif fonts tend to have a more modern feel to them because of this.
The final type I will be introducing are script fonts. TDA is riddled with them, but out there in the world script fonts can be very difficult to use appropriately. Why is this? Well, what script fonts attempt to do is mimic calligraphy and human handwriting. But because it is only a mimic, it lacks human qualities. When all the Rs look the same, you lose some of the integrity of actual human writing. Therefore, the best script fonts will have variations of each character, in order to get around this issue. There are also decorative fonts, but those are less of a well defined category, so I won't get into them.

2) Letters Become Words

When we put several letters together, often we'll get some sort of a word. This is where we truly can start to fiddle with typography.

EiafF9Z.png

As you can see, each font definitely makes the word look different and adds a different feeling to the word. You can also start to notice how the letters interact with each other. The spacing between letters is called "kerning", and it sometimes needs to be fiddled with in order to look the absolute best. As a general rule, for a good font, lowercase letters should never be adjusted for kerning, but when a word is in all uppercase, you probably should adjust the kerning.

0d9pk8I.png

See the difference? In the top one, the kerning has not been adjusted, in the bottom, just by adding a little extra space between the letters and giving them room to breathe, it looks better and is easier to read. This is especially true for small type, because the smaller size means our eyes need more clarity.
But what about script font? Script fonts are never ever intended to be used in all capitols, and have the added bonus of often having lines called ligatures linking the letters together. If you increase the kerning, those ligatures will pull apart and the letters will become disconnected. Do not adjust the kerning on script fonts except in the case of pulling the capitol closer to the rest of the word to keep consistent spacing, which sometimes needs to be done.

JW7kAmN.png

Once we put letters and words next to each other, we also introduce something called a "baseline". A baseline is an invisible line your letters stand on top of. Some letters like g and p will hang below the baseline, and these letters are called descenders. When aligning your letters, it is important to note that those with rounded bottoms, such as c and o should sit just a smidge below the baseline. Because they are rounded, visually, this makes them look aligned with the non-rounded letters.
You can also use this baseline to make sure words are aligned next to each other. If you align words with the baseline, they will always appear to be perfectly placed.

dT8QaoJ.png

On the flip side, there are two different lines for determining the height of your font. One is the Cap height, the other is the X height. The Cap height is the height of all capitol letters, and the X height is the height of all lowercase letters (the letter x typically forms the appropriate "box" of this lowercase letter area, so that's where the name comes from). Some letters such as k and h will extend above the X height, and these letters are called ascenders. As you can see above, although the two different fonts appear to share a Cap height, they have very different X heights. This change can definitely help determine the overall look of the font. When a font includes small caps, this is making the uppercase capitol forms into the X height of the rest of the word, like so:

eV4la3m.png

Please note that while there is the option to auto-generate small caps in Photoshop (I'm not sure about other programs), this is not guaranteed to be accurate for every font, simply because it is auto-generated. Be wary!

3) Words Become Sentences

When you put several words together, often they will make a sentence. We don't often work with full sentences on TDA graphics, but in the rest of the world out there, sentences make up so so much of the work we do. It's important to know the elements of setting a sentence!

sgphQbE.png

Again, spacing is important to pay attention to and adjust as needed. The spacing between words is called tracking. In this example, the top sentence has no adjustment, and the middle only as the tracking changed, and the bottom has both the tracking and kerning changed.
If tracking is too high, words can start to drift apart and disassociate from each other. It is important to keep your tracking in balance with your kerning, in order to keep all your words holding together visually as a sentence.

4) Sentences Become Paragraphs

Again, paragraphs are rarely used on TDA, but very important to know how to set. The first thing we'll talk about with paragraphs is spacing.

QLJR1De.png

Spacing between the lines is called letting, and this is a fundamental for getting your paragraph to look good right away. In the image above, the first paragraph was set to Automatic letting. In this case, the automatic got it right and left the perfect amount of space between the lines, but this is often not true. Remember all automatic things have a formula behind them, not a human eye, and for visual stuff like typography, the human eye matters more than numbers.
The top right paragraph is set at the same point size as the font. Please notice that this letting is too tight. The ascenders and descenders are just barely missing running into each other, and they should have space to live in without fear. As a rule of thumb, letting with a slightly larger point size than the font will look better.
The bottom two paragraphs are examples of extremes. The one on the left is far too lose, the lines are pulling apart from each other and can disassociate themselves with the structure of the paragraph. The one on the right is much too tight, the words are all crashing into each other and become difficult to read.

Another property bodies of type have is something called type color. If you squint your eyes you will notice that the paragraphs each take on a different value of grey. The type with tighter letting is denser and darker, while the type with looser letting is much lighter. When placing several paragraphs together, keeping the type color consistent will help subconsciously pull an entire layout together.

9RHkBRR.png

And the final thing I am going to talk about, although by no means the end of talking about typography in general, is paragraph alignment. Most people are familiar with these things, but let's just go over what they are and their pros and cons.
The first shown in the top left is the traditional flush left ragged right alignment. The uneven ends of the lines are called the rag. This is typical because, to our English reading eyes, it flows the most nicely, as we read English from left to right, and having all our starting places in the same spot for each line is helpful to our eyes.


The second, in the top right, is flush right ragged left. While okay in small amounts of text, this alignment is definitely not recommended for anything larger than a sentence or two. As English readers, our starting place is bouncing all over the place, and it can be very difficult to read and it makes our eyes and brains a bit tired from trying. However, in small amounts, or in cases where columns might be used (think numbers 1-10 stacked on top of each other, you would want the first 1 and the 0 of 10 to be aligned), this can be practical.
The third, on the bottom left, is your standard centered alignment. An alignment such as this creates a rag on both sides which can form odd shapes and be tough to manage, so it is not recommended for large bodies of type - again, your starting place is bouncing around. However, centered type can be very useful for overall layouts with other objects, as it is symmetrical and has a clearly defined center line.


The final one, on the bottom right, is justified type. Justification is the type of alignment that becomes the most nitpicky of them all. As you can see in my example, Justification plays with the kerning and tracking in order to fill a defined text box. You get crisp corners to your text block, but you sacrifice the even type color within the paragraph. In order to fix this, you must manually adjust the justification settings. To know when your justification is perfect, you should never be able to identify the tightest line or the loosest line. All lines should be even.


And that's it, my intro to the very basics of setting your type. There is of course far more to typography than just this, but I hope this tutorial has helped explain to you the "why" of some basic things, in addition to providing you with some specific vocab and tips for making all your type snap together. If you have any questions regarding this information, feel free to ask me! I'm always jazzed to chat about typography, and I hope I've awakened the same sort of interest in you!

Edited by ailhsa

Share this post


Link to post
Share on other sites

I have switched image hosts, hopefully everyone else can see the images now!

Share this post


Link to post
Share on other sites

Thank you so much for posting this! It's so helpful!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...