« typography » editing tips! ✧˚·

⮑ ii. anatomy of typefaces

how are you doing? it's time for typography tuesday!

the anatomy of a typeface is very important to think about when choosing the fonts you're gonna use!

in the images below, there's some terminology to know as we go through what (i think) makes up a good typeface.

before i say anything else, the information you'll find here is not going to be entirely accurate on my part, this is almost entirely personal preference with some things i've found on google, so please take this (and tbh, everything in this book) with a grain of salt.

(not my image)

so generally, you want to look for consistency and functionality in a font. that's what i do at least.

for consistency: the strokes of the letters should work with each other to look aesthetically pleasing, like the alignment of certain strokes being repeated on other letters.

for functionality: this is referring to the versatility of sizing, spacing, and body copy in a font.

if you use adobe illustrator or another application to customize typography, these things are good to keep in mind to maintain consistency when personalizing a font!

-ˋˏ✄┈┈┈┈

「 LEGIBILITY & READABILITY 」

text should be fairly legible in the first place because this is what catches and keeps the attention of your audience!

something else to keep in mind is versatility. your font should be versatile enough to be read at different sizes and/or used in different styles, written paragraphs, etc.

i'm pretty sure a term for the written paragraphs is "body copy", aka the main portion of the text.

(not my image)

this font is anatomically correct, but it's wordy, and hard to read.

this is the "digestive" typeface. it's pretty and consistent in writing, but it's. uhh. you can't really tell what it's saying right off the bat. at least for me? it's just got poor-ish legibility! thought the first t right there in "the" was an f at first. it also gets worse if you size it down.

it takes a lot of brain power to read, but that's just my two cents since i personally get headaches with reading off screens. lol. there are probably worse fonts legibility-wise, but this is somewhere in there.

although font legibility should be considered to an extent, eccentric and/or bold statements usually use these big, curly fonts!

at display size, they're much more legible and there's not so much a problem with it. it can actually be really cute!

i personally would maybe use digestive for a bold statement on a poster, because as i said, the readability at display size would not really be a problem (i can't recall where exactly i've seen it but this is definitely a common poster font).

(not my image)

now here's a nice image to show the difference between legibility and readability!

okay so som, you've said so much about legibility and how your eyes hurt when the legibility is bad, but what's the real difference between legibility and readability?

legibility is how well you can see and understand the letters.

→ example: just in the above section, i said i thought the t in the "digestive" font was an f. that's probably a sign it has poor legibility because i couldn't understand the letters right away! you can see another example of poor legibility in the image above.

readability is how easily you can actually read the words (as a whole). meaning: do your eyes move with ease over the text? or is the spacing awkward and your eyes jump between letters?

→ the example above shows a font with poor readability. how it's classified usually comes down to you as a reader (reading level, how your eyes handle the visibility of the text, etc.), and the tracking/kerning of the font.

tracking: the adjustment of spacing between letters in the font as a whole. when the spacing between two letters shift, the rest of the letters in the word will also space out the same amount.

kerning: the adjustment of spacing between only two letters. sometimes a font might look wonky, and it's usually because of the kerning being uneven! you can remedy this in apps like adobe photoshop and illustrator.

an extra term that you might see with the above two is

leading: the spacing between lines of type. it could be between just two lines, or multiple lines.

these terms are not necessary to know if you're just hearing about them, but it's helpful to inform your designs of it when necessary! and it also helps to confidently explain it to others :)

-ˋˏ✄┈┈┈┈

「 SERIF V. SANS SERIF 」

(not my image)

as shown in the image above, a serif font just has an extra embellishment when finishing off the stroke of the letter, sans-serif doesn't. that's all it is!

serif fonts are most often used for more formal texts, sans-serif fonts are usually used for bold statement texts!

— ♡ okay, and that's a wrap on the anatomy of typefaces! thank you for sticking around :)

this chapter will be very useful in the rest of the book, as i jam-packed a lottt of typography terminology that will be used! (or this chapter will be entirely unuseful, you could google it or just ask me what some term i made up means :)

i will try to err on the side of using proper terminology to make it feel more familiar, though.

xo, som <3