16 Typography Terms Every Web Designer Should Know (And Understand)
The world of typography is full of dozens of technical terms. While they may be a bit confusing and intimidating the first time you see them, behind this technical vocabulary lies knowledge that can improve the readability and appearance of any website.
To help you absorb some of this useful knowledge, this post will cover 50 essential typography terms that every web designer should know.
Kerning describes the spacing between individual letters in a font. Unlike tracking, which adds an equal amount of space between every letter, kerning varies between different pairs of letters.
Kerning is important to web design because it can subtly affect how people perceive text. If the kerning is off, then certain letters may seem to be too close together or too far apart.
To change tracking means to uniformly change the spacing between letters in a font.
If you need your text to more completely fill a given space (such as a button), an increase in the tracking may do the trick.
Leading describes the amount of vertical space between lines of text.
The right amount of leading helps the reader’s eye move smoothly across the page, improving readability.
A glyph is the smallest unit in a font that has any meaning. Glyphs include letters, numerals, punctuation, and other characters.
If you plan to design a website that will display text in languages other than English, you should make sure that your typeface of choice has all the glyphs you will need.
A serif is a small line that appears at the end of a stroke in a character. In typography, you’ll usually hear it used to describe a serif font.
Traditionally, serif fonts are used for body copy, particularly in print. Consequently, using serif fonts for the body copy on your website is a good decision if you want your site to evoke the printed page.
Sans-serif describes a character without serifs.
These fonts work nicely for headings, as their straightforward quality grabs the reader’s attention. Contrasting a sans-serif font with a serif font is a key principle of font pairing.
Also known as ‘typeface,’ font is a broad term that encompasses the style, size, and weight of the text. Examples of well-known fonts include the sans-serif font Arial and the serif font Times New Roman.
Your choice of font influences the way readers perceive your website. Different fonts have different personalities, so they have a subtle (but meaningful) effect on the way readers experience your message.
8. Font Family
A font family is a group of fonts that contain glyphs with similar features. A font family may be as broad as serif vs. sans-serif, or broken down further into Old Style vs. Modern, for example.
Using different font families is an easy way to add contrast between your headings and body copy.
9. Point Size
Point size is the numerical value that describes a font’s relative size. For instance, if a font is Times New Roman 12, the ’12’ describes the point size.
Choosing the right point size is one of the simplest things you can do to improve the readability of a web page.
Font weight refers to the relative thickness of text. A very light font weight might be referred to as ‘light’ or ‘thin’ while a relatively heavy font weight may be referred to as ‘bold’, ‘heavy’, or ‘black.’
Fonts vary in the number of weights they offer and choosing the correct font weight is essential to making your site copy easy to read.
Roman describes a font in its ‘normal’ appearance, as opposed to italic or bold.
You’ll want to use a Roman font for the majority of your web page copy, as it’s more comfortable to read than italic or bold.
Italic describes a font that has a slanted, cursive appearance.
You should use italics sparingly when writing website copy so that the emphasis they add is all the more powerful.
Bold describes a font that is darker and heavier than its Roman version.
Like italics, you should use bold fonts sparingly in your web typography.
The baseline is an invisible line where all characters sit.
Baseline gives us a frame of reference for discussing other parts of typography such as descenders and x-height.
15. Cap Line
The cap line is the invisible upper boundary for capital letters in a font.
Just like the baseline, the cap line is important for discussing parts of typography such as ascenders.
16. Mid line
The midline is the point halfway between the baseline and the cap line.
The midline is also an important concept for discussing ascenders.