Although you probably know the difference between serif and sans-serif fonts. But typography is actually so much more interesting than that. Did you know that letters can be dissected into parts as if they were a puzzle? Like people, fonts have personalities, moods, styles—and even anatomical features!
And last but not least, we will look at how type is manipulated to better fit in a space so that it looks balanced and easy on the eye. Next time when you download a set of fonts with “extra swashes,” you will know exactly what that means.
The different parts that make up letters and their real-life counterparts, visualized with some analogies…
A portion of a letter that extends downwards, attached at one end and free at the other.
A straight or curved portion of a letter that extends upwards or outwards, attached at one end and free at the other.
The small stroke that extends outwards from a lowercase g in some typeface styles.
The stroke that curves downwards and to the right of the lowercase h, m and n.
OTHER KINDS OF INTERNAL LETTER PARTS
The x-height isn’t exactly a part but rather a measurement. It measures the height of all lowercase letters that are part of the same typeface. It’s called x-height because the letter x of each typeface is what determines the measurement.
The cap height is a measurement of all capital letters in the same typeface. The most accurate measurement is found in flat bottomed characters like the letter E.
An ascender is a vertical stroke that extends upwards over the x-height.
A descender is a vertical stroke that extends downwards below the x-height.
The stem is the main vertical stroke in upright characters. When a letter has no verticals like a capital A or V, the first diagonal stroke is considered the stem.
A stroke is the main vertical diagonal line in a letter.
A bar is a horizontal stroke in letters like A, H, e and f.
A serif is a short line at the beginning and the end of strokes. Serifs are what make a typeface a serif or a sans serif. Serifs can have different shapes: hairline, square/slab, wedge. They can all be bracketed or unbracketed, meaning that their connection to the stroke is rounded or perpendicular.
When a letter doesn’t have a serif, the end of the stroke is called a terminal.
A bowl is a stroke that creates an enclosed curved space, as in the letters d, b, o, D and B.
The counter is the enclosed space in letters like o, b, d, and a. Counters are also created by bowls.
A link is a stroke connecting the bowl and loop of a two-story lowercase g.
A swash is a fancy or decorative replacement to a terminal or serif in any capital letter used at the beginning of a sentence. Swashes are also used at the end of letters to decorate the composition. Calligraphy is full of swashes of all kinds; at the beginning, at the end and even in the middle, extending from ascenders.
A spur is a small projection that veers off the main stroke on many capital G’s
HOW TYPE IS STYLED TO BETTER SUIT A PURPOSE
BOLD & ITALIC
There are ways to style typography to more effectively get your message across. The most common typography styles are italic and bold. Regular typefaces can be turned into bold or italic in any graphic design editor. Bold styles are great for headlines and highlighting important parts of text. Using bold styles for links makes them more prominent and easy to see. Italics are used mainly for words in a different language or reference links.
Some typefaces have more options. A typeface family can have as many as 20 styles or more. Futura, a very versatile typeface family, has 22 styles. Some of the most memorable Futura styles are light, condensed, semi-bold, extra bold, bold condensed and book italic.
Apart from the styles covered above that work for all sorts of text and designs, there are also hundreds of other styles! Novelty fonts have all sorts of different styles, from whimsical and hand drawn, to culturally inspired. These novelty fonts cannot be turned into bold or italics because they only exist in the style they were designed in.
For example, INLINE is a style in which there is a white line inside each letter:
INK is a style that resembles letters written with an Asian brush and black ink:
SCRIPT (or cursive) is a style of font that resembles letters written by hand; script fonts vary from classic calligraphy to freestyle handwriting.
Novelty styles are great for designs that need a special je ne sais quois, but should still be used with caution since they can become overwhelming quite easily.
There are other fonts that are purely cultural in fashion. For example, the fonts that look like Japanese characters but aren’t. The ones that look Chinese but are not Chinese characters. Other cultural styles are ones like the Disney font or the Coca-Cola font. Cultural styles are even more limited than novelty styles. They carry so many messages that using them will instantly give your design a preconceived meaning, so be mindful when using these types of fonts.
HOW TYPE IS MANIPULATED TO FIT IN A SPACE
Sometimes letters need to be adjusted to fit in a certain space. There are three different ways in which type can be moved around in a space so that it looks better. These three measurements are called kerning, tracking and leading.
Kerning is the space between two individual letters. It’s used when you need to move only one letter because it is too far or too close to its companions. Some typefaces have a strange spacing between the capital letter and the rest of the word. Kerning helps create a better balance between letters.
When designers create wordmark logos, they usually control the kerning from letter to letter, making sure the the entire word is perfectly balanced and polished.
Tracking is the proportional space between all the letters in a body of text. Being able to change the tracking helps fit more letters in a small space or spread out letters if they are too tight. Script fonts cannot undergo too much tracking due to how the ligatures separate and create unbalanced spaces.
Designers manipulate the tracking when they want to accomplish a look that has even edges for all the words. By spreading out the tracking or making it tighter, they can make all the text look unified and justified.
Leading is the space between baselines. This means that when we manipulate the leading, we are changing the way a paragraph looks.
Leading and x-height have a direct effect on how text will look in a paragraph. There is another measurement we should mention called the baseline, which is the line on which letters sit horizontally. The bottom of the x-height of each letter sits on a baseline.
The lower the x-height compared to the cap height, the more white space there will be between lines. When letters have a higher x-height in comparison to the cap height, the leading looks more balanced and ordered.
Ascender – The part of a lowercase character (b, d, f, h, k, l, t) that extends above the x-height.
Bar – The horizontal stroke in characters such as A, H, R, e, and f.
Bowl – A curved stroke which creates an enclosed space within a character (the space is then called a counter).
Cap Height – The height of capital letters from the baseline to the top of caps, most accurately measured on a character with a flat bottom (E, H, I, etc.).
Counter – The partially or fully enclosed space within a character.
Descender – The part of a character (g, j, p, q, y, and sometimes J) that descends below the baseline.
Ear – The small stroke that projects from the top of the lowercase g.
Link – The stroke that connects the top and bottom part (bowl and loop) of a two–story lowercase g.
Loop – The lower portion of the lowercase g.
Serif – The projections extending off the main strokes of the characters of serif typefaces. Serifs come in two styles: bracketed and unbracketed. Brackets are the supportive curves which connect the serif to the stroke. Unbracketed serifs are attached sharply, and usually at 90 degree angles.
Shoulder – The curved stroke of the h, m, n.
Spine – The main curved stroke of the S.
Spur – A small projection off a main stroke found on many capital Gs.
Stem – A straight vertical stroke (or the main straight diagonal stroke in a letter which has no verticals).
Stress – The direction of thickening in a curved stroke.
Stroke – A straight or curved line.
Swash – A fancy flourish replacing a terminal or serif.
Tail – The descender of a Q or short diagonal stroke of an R.
Terminal – The end of a stroke not terminated with a serif.
It’s important for you to share your thoughts with us about the post you read above. Therefore your comments are always welcome. Plus, if you like what you read above why don’t you sign up to be added to our mailing list and why not be the first to hear our new posts and other surprises 😉
SIGN UP NOW
Credits: Visme.co and Orana Velarde who is an artist of many trades, currently working as a graphic designer for bloggers and small businesses. Her love of art and travel create the perfect artist-nomad combination. She founded Orana Creative to help freelancers, solopreneurs and bloggers master a better visual strategy. She is passionate about eye happiness and loves constructive criticism.