in Design

The Intricate Anatomy of a Font

A lot of work goes into creating a single font and we all use fonts every day for a multitude of purposes. Some are serious, some are casual, and some are just plain fun. However, for those learning about fonts, it can be quite a tedious thing because you see, fonts are made of a lot of different components that make each one unique. While a font may be “just a font” to us, it may be an intricate and detailed thing to others. Below is some basic terminology about the different aspects of a font.

One of the easiest components of a font to understand is the baseline. This is the line where almost every character sits. This line is imaginary, but you can tell where it is since that it what all the letters are sitting on. Letters such as “q” and “y” hang below this baseline, but it isn’t common for letters or words to do that. Another easier term from fonts is cap height. This is the height that capital letters hit. All of the letters hit this imaginary line and it’s another way to keep things uniform. Another imaginary line that is present in all fonts is the mean line. This is the line that shows the distinction between uppercase and lowercase letters. This is vital when it comes to creating fonts because you want to ensure that your font is easy to read and understand.

11-600x173

Before creating or using a font type, there are a few details that you should know. For example, a bowl is the curve that closes around the negative space in a letter which by the way is called a counter; you can find this in ” d”, “g”, and “o”. A bowl is also found in letters where there is negative space, but it isn’t closed off, such as “c”, “G”, and “u”.

As mentioned before, the baseline is the line where letters sit and a few extend past that. These are called descenders and includes the letters “q”, “y”, “j”, “p”, and “q”. In contrast, ascenders are the letters that extend up and they go past the mean line, such as “l”, “b”, “d”, “k”, and etc.

Also, you need to know that a crossbar is a line that we are all very familiar with, but most likely didn’t even know it had a name. A crossbar is the line that is in the upper case capital letters “A” and “H”. This is the line that goes horizontally to form the letters, but it can also be found in lower case letters like “f” and “t”, under the name of cross stroke. Oh, and did you also know that the dots about the letters “i” and “j” have a name? They are called tittles. Speaking of things that you may not know, if letters connect and touch one another is called ligature.

Moving forwards, strokes are the lines that make up all the letters and each stroke has its own name. To start with, the strokes that extend vertically are called stems. These are on letters such as “h”, and “l”, and are also on “w”. The strokes at the bottoms of letters are called serifs. These can typically be found on nearly every letter. It simply depends what font it is. However, serifs can be found on a majority of fonts. On the letters without serifs, they are called terminals. Many letters can also be terminals and terminals can be present when serifs are present on other letters. The strokes that extend diagonally are called legs. At times, they are also referred to as tails. This includes the letters “K”, “Q”, and “R”. The letter x gets its own terminology when it comes to fonts.

Spacing is another issue when it comes to font. The spacing between letters needs to be perfect to make the whole font look smooth and functional and with the introduction of the Internet, this needs to be given even more attention. When it comes to spacing, there are two different types of it: horizontal and vertical. When it comes to horizontal spacing, two terms come up quite frequently, kerning and tracking.

More specifically, kerning refers to the spacing between letters. Letters are strategically placed close or far away from one other depending on what letter it is and this is done to ensure that the aesthetic looks neat and clean. Heavy letters wouldn’t look good place so closely next to each other while thin letters wouldn’t look good placed far away from one another. There has to be a balance somewhere in there.

The other type of spacing that is important is vertical space between lines called leading. When there is a no set space between the lines, it is referred to as being “solid”. Text that has vertical space is a lot easier to read so it’s important to keep that in mind when using or creating a text.

alignment1

When using a font, it’s very important to look at the text alignment so you should know that there are four types of alignment: left, right, center, and justified. Most designers use justified on text that is over two lines long because it looks the best. The type of text alignment you use is dependent on what type of font you’ve selected. This alignment is also important now because of the introduction of the Internet because it looks different across many mediums.

Some fonts only look good when aligned on the left or in the center, some  look best with justified, so it is something you have to play around with and decide. Right alignment is rarely used, but it is used it cases where you are writing around things like pictures and such. Stick to using the other three alignments when writing normal text.

Here are some examples of fonts on which you can study the basic components.

Halis Rounded

2.-font-600x300

Amour

4.-font-600x300

Neusa

6.-font-600x300

Columbia Titling

8.-font-600x300

Maxwell

9.-font-600x300

DIN Text Std

11.-font-600x300

Trade Gothic

12.-font-600x300

Alright Sans

18.-font-600x300

Variable

19.-font-600x300

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.