Some of us may think that typography is all about finding the appropriate fonts to use on our website. However, it is more than that.
As posted on Creative Bloq, “it is the art and technique of arranging type.”
Choosing a font, as well as how it can work with your design layout, grid, and color scheme can make or break your design. Thus, typography is integral to the skills of a designer.
Having a solid understanding of typography allow you to do the following:
- Design readable websites
- Invoke certain emotions or vibe to your site visitors
- Emphasize important content
With this, learning about typography requires that you get the hang of a lot of design jargon.
Typography has a handful of terms, and not every designer knows about it. It can be confusing and intimidating, but these terms deal with the readability and appearance of a website.
Here are 15 of those technical typography terms that you need to know.
1. Kerning
Kerning is the space between individual letters. However, the spaces vary depending on the pair of letters.
The idea is to adjust the space between characters for a “harmonious” pairing.
What makes it essential is the fact that kerning can affect how people perceive the text. Without proper kerning, some letters may appear too close or too far apart.
2. Tracking
Just like with kerning, monitoring gives space between two letters.
The only difference is that tracking adds an equal amount of space between letters in a word or a sentence. This explains why there is a larger space between two words.
When you change a word’s tracking, it means that you need to change the spacing between letters uniformly. You can do this if you want your text to fill a space, such as a button.
3. Leading
While kerning and tracking deals with the horizontal space, leading is about the vertical space.
The term has its roots during the era of metal typesetting, wherein a strip of lead was used to separate lines.
Leading makes it easier for readers to move their eyes and read content smoothly. Thus, it can help improve readability.
4. Glyph
According to John Hughes, a glyph “is the smallest unit in a font that has any meaning.” It is a set of characters with a different typeface. The set includes letters, numerals, punctuation, and other characters.
Thus, it is essential that you have all the glyphs that you will need for a particular typeface when designing a website.
5. Serif
A serif is like the small, stroke line that appears in character.
It is traditionally used for body copy on printed documents. That’s because serif fonts can “guide” a reader through blocks of text.
So, if you would like to give your web content a printed-feel, then you should opt for a serif font.
6. Sans-Serif
Sans-serif means “without serif.” So, when you see a font that does not have a stroke at the end, it is a sans-serif font.
Sans-serif is ideal for headings, thanks to its straightforward and attention-grabbing quality.
Meanwhile, designers would advise that it is best to pair a sans-serif with a serif font.
7. Font
The font is another name for the typeface. It encompasses the style, size, and weight of a text. Hence, you will see some word processor that has Arial, Arial Narrow, and Arial Black.
All Ariant font styles come from a single font family, which is Arial.
Keep in mind that fonts have varying personalities. So, if you want your website and content to exude a particular vibe, choose your fonts carefully.
8. Point Size
Point size is the numerical value of font size. It is like seeing the same shirt that comes in three different sizes: 2, 4, and 6.
However, you should not take a point size lightly. Choosing the right point size can help improve your web content’s readability. Thus, it can boost your website’s user experience.
9. Weight
Font weight, on the other hand, refers to the thickness of a letter. A light font is sometimes referred to as “light,” or “thin,” while heavier fonts are labeled as “bold,” “heavy,” or “black.”
But like with point size, a font’s weight can also help improve a web content’s readability.
10. Roman
When a font has a “normal” appearance, it is called Roman. It is neither italic nor bold.
The Roman font is best used for the majority of your content. That’s because it is more comfortable to read.
11. Cap Line
The cap line is the invisible line placed on top of a text. It determines the height of capital letters and tall letters (i.e., L and l, T and t, H and h).
On the other hand, the invisible line at the bottom where are characters sit is called a baseline.
12. X-Height
The invisible line in between and parallel to the cap line and the baseline is called an x-height. It describes how tall or short a letter is, and serves a cap line for small letters such as x and i.
13. Descender
According to Hughes, “a descender is any stroke which goes below the baseline.” You can see on lowercases such as g, q, y, and p.
14. Ascender
An ascender, on the other hand, is any stroke that is above the x-height. Some examples of letters with ascender are b, d, h, and l.
15. Ligature
A ligature is any two letters that it combined to form a glyph. A great example of a ligature is æ (called “ash”).
When it comes to web development and design, always see to it that your typeface supports ligatures ‒ especially if your content requires to display letters such as “æ.”
According to Jack Poyntz, a web design company in Northern Ireland, “Traditionally, typography is focused on just ensuring that text is readable and the message is relayed clearly to readers. Nowadays, typography is emerging as a major design element.”
Thus, it is essential to know the terms mentioned above (there more than 15 terms, mind you) to have a good grasp of what good web design is.