Web Development: The Ultimate Guide to Basic Typography

The Ultimate Guide to Basic Typography

Learn the essential terms in the world of typography. In this article, we'll clarify a few misused terms, touch on figures and symbols, and explain some indispensable typesetting terminology.

In the world of typography and design, there are innumerable terms that are necessary for beginner designers to know. A few of these terms are widely confused and misused. In this Ultimate Guide to Basic Typography, I’ve gathered some essential terms you need to know. I'll go through some of the basic misunderstood terms, like the difference between typeface and font. I'll also touch on the different font file types, explain the different type of figures and symbols, and explain some essential typesetting details.

Follow along with us over on our Envato Tuts+ YouTube channel:

Typeface vs. Font

One of the most common mistakes when talking about type is mixing up the terms "typeface" and "font". The distinction between these terms can be slightly confusing, so let’s talk about their different meanings.

A typeface is a group of characters that share a common DNA. For example, Alegreya Sans is a different typeface from Rockwell Std.

A font is a particular set of glyphs within a typeface. For instance, 12 pt Franklin Gothic URW Light is a different font from 14 pt Franklin Gothic URW Light. You’d use the same definition if you are talking about different weights—12 pt Franklin Gothic URW Light is different from 18 pt Franklin Gothic URW Book.

For many centuries, text was set individually by hand, and each letter would be a small piece of cast metal. Each letter was stored in a wooden type drawer that was organized in small compartments. A specific type drawer would have a full alphabet and other glyphs at the same size. Therefore, the term “font” had a very specific meaning, distinct from the word “typeface.”

Nowadays, these two words are often used interchangeably, but it's always good to know the distinctions between the two. A great analogy is the one of albums and songs. Typefaces are the different albums, and fonts are the songs in the album.

Font Styles

When type was first invented, all fonts were designed as roman. It wasn't until the early 16th century that italic fonts were introduced. Originating in Italy, italics were a separate group in the type classification, similar to serifs and sans serifs. By the early 18th century, foundries started pairing roman and italic designs. Italics are used to emphasize important points in a text block.

Italics or true italics are angled typefaces that are strongly influenced by calligraphy. Their slanted anatomy mimics the organic movement of cursive letters. Italics that are specifically designed for their matching roman fonts are similar in shape, with the exception of a few characters. Lowercase characters like the a, f and g tend to change in form considerably when designed as italics.
Oblique fonts are less calligraphic in style compared to italics. None of the glyphs in oblique fonts go through a cursive transformation. Some glyphs can be slightly slanted, while others go through rigorous corrections to maintain the same style as their roman counterparts. When included in a block of text, oblique fonts don’t contrast enough with their roman counterparts.

Font Weights

Morris Fuller Benton was a proponent of the creation of large type families between the late 19th and early 20th centuries. The idea was that the characters within the family would share a common DNA, with slight distinctions.

The most common font weights you can find in a typeface are Regular and Bold. Some typefaces like Neue Haas Unica include extensive weights. This typeface includes multiple weights like ultra light, thin, light, regular, medium, bold, heavy, black, and extra black. The advantage of having such a wide range of weights in a single font is the ability to create a hierarchy in a page layout.

Font File Types

Let’s be real: when you download and install a font, you are left wondering if you've used the right file. We’ve all been there and questioned what the real difference is between the files. So let’s talk font file types:

PostScript (.pfb, .pfm, .lwfn, .ffil) files were developed by Adobe in the mid 1980s. A computer would need two separate files: one for on-screen display and a second one for printing. The PostScript file is not cross-platform—different files were needed for Mac and Windows computers. This became an issue when handling files on different operating systems. The file could hold a maximum of 220 glyphs.
TrueType Font (.ttf) files were developed by both Apple and Microsoft in the early 1990s. This type of file renders the outlines of each character through a hinting process to achieve a high level of legibility on low-res devices. Incorporating hinting into the font became time-consuming, and not all fonts take advantage of the technology. A single file contains on-screen and printing data and up to 65,000 glyphs.
OpenType Font (.otf) files were developed by Adobe and Microsoft in the late 1990s. These fonts support Unicode, meaning that one OpenType file can contain more than 65,000 glyphs. Previously, typefaces with multiple languages would have had a separate file—OpenType fonts can house them all in a single file, including swashes, numeral styles, pictograms, and more. This type of file is cross-platform: the same file can be used for Mac and Windows computers.

Figures, Signs, and Symbols

Old Style, Lining, Proportional, and Tabular Figures

You might have noticed that some numbers are differently set from typeface to typeface. Each number style has a specific use that can make designing easier. Lining and old style figures have different baseline alignments. Tabular and proportional figures have different widths, and if they are used on multiple lines, the numbers might not align. Let’s take a look at the different figure styles and when should you use them:

Lining Figures are usually the default figures you’d find in a typeface. The numbers sit on the same baseline as the rest of the characters. These figures look great next to capital letters because the height tends to be similar if not the same.
Old Style Figures or non-lining are numbers that extend above and below the baseline—similar to ascenders and descenders in letters. This style looks great if you are using it in a paragraph of text. Visually, the varying height blends in nicely with uppercase and lowercase letters.

Tabular Figures have a set width, similar to monospaced fonts. This figure style is perfect if you are planning on typesetting tables, charts, or numbered lists as they’ll align vertically without the need to kern. Avoid using this style for blocks of text as the even width will be seen as poorly kerned figures.
Proportional Figures are the opposite of tabular—these numbers have different widths depending on their shape. Therefore, the numbers don’t align vertically. Use this style of figures in body text as they blend in organically for readers.

Superscript and Subscript

Superscript and subscript figures are smaller versions of full-size numerals. They're commonly used in footnotes and endnotes, cents in pricing, diagonal fractions, and chemical notations. These figures aren’t always included in a typeface, but software like InDesign has the option to create a fake figure. Properly designed figures have been drawn to have a harmonious visual relation in terms of weight and proportions.

Superscripts or superior figures can be cap-aligned (mainly used for standard numerators) or go slightly above (for mathematical formulas). Some typefaces will include both of these or just one.
Subscripts or inferior figures can be baseline-aligned (used for denominators) or sit below the baseline (for chemical formulas).

Small Caps

Small caps are uppercase letterforms that are shorter than regular capital letters. They are often around the same height as lowercase letters or slightly taller, so they look visually harmonious. If you are looking to highlight text instead of using bold or italics, you can use small caps.

Unfortunately, many small caps nowadays are computer generated, so pay close attention when using small caps. Well-designed small caps have been drawn specifically to complement the weight and proportion of the letter. Avoid using the Small Caps button in InDesign as it will only be a proportionally reduced form of a capital letter. These tend to look too light, poorly spaced, and narrow.

Ligatures: Standard and Discretionary

You might have come across these stylish characters before and not noticed it. The word "ligatures" comes from the Latin ligare, meaning to tie. Ligatures tie two or more letters into a single character to help with kerning or for decorative purposes. Let's look at the details:

Standard ligatures help with the kerning when some characters take over the horizontal space of the next. For instance, the letter f tends to take over the space because of its hanging terminal. The overlap increases to both sides with italic fonts. Typical English ligatures include letter combinations such as fi, fl, ffi, and ffl. Depending on the language, ligatures can be different.
Discretionary or decorative ligatures don't necessarily help with the kerning but are stylistic features of a typeface. This style of ligature has a calligraphic appearance and can add personality to characters. Letter combinations like ct, sp, and st have a specific connecting style between the characters.

Hyphens and Dashes

Hyphens and dashes are punctuation marks that are often misunderstood and misused. While they look very similar, the distinct length serves specific functions. These three characters are horizontal strokes that can have specific characteristics to match a typeface.

The hyphen is a short mark used to hyphenate a word or at the end of a line to break a word. Hyphens are commonly used to separate digits in phone numbers or to join compound words, such as "long-term".
The en dash is longer than a hyphen, and the width usually matches the one of the capital N. It is used to indicate a duration of time, often replacing the prepositions “to” or “through”.
The em dash is the longest dash, and the length usually matches the one of a capital M. It is often used in place of commas, parentheses, or colons. Em dashes are also used to indicate a strong break in the structure of a sentence or a change of thought or emphasis. Typewriters don’t include the em dash—only hyphens—so some writers have used two hyphens instead of an em dash. Note that this is typographically incorrect.

Ampersand

One of the fanciest characters in a typeface is the ampersand. This symbol is a stylized depiction of "et", which is Latin for “and”. Designers often use the opportunity to design ampersands as a way to show off as it can be a symbol that contains lots of character and personality. You can substitute the word "and" for an ampersand in certain instances: headlines, titles and branding or for connecting words in a list. Try to use it sparingly or not at all in copy text as it can appear larger next to normal copy.

Legal Symbols (™ ® ©)

Trademark, register, and copyright are important symbols to use when you are designing a brand identity. They help protect creative work against plagiarism. Visually, these symbols are often used at a small size to look clean but modest as they accompany a logo.

Designers prefer to use serif symbols with serif fonts and sans symbols with sans logos. It is acceptable to use a sans symbol with a serif logo as it can read better at a smaller point size.

If you are using the ™ or ® symbol in text size, set it to less than half of the x-height of the text. As the text gets larger, the symbols should decrease in size for a clean look. For the © symbol, match it to the x-height or cap height of the text.

Legal symbols trademark register and copyright

Detailed Typography

Legibility

Legibility refers to the anatomy of a typeface and the common DNA the characters share. It is related to a reader's ability to differentiate one letter from the next. There are multiple elements that contribute to a legible typeface, such as x-height, character width, weight, counters, serifs, stroke contrast, etc.

Readability

Readability refers to how clear and easy it is to read words in a block of text. Many designers spend years mastering the art of typesetting as it helps shape the page in a cohesive and clear manner. Typesetting is very detail oriented, and there should be a mix of legibility and readability considerations. Depending on the DNA of a typeface, designers can make decisions for its readability on a page. Font size, line length, and leading, just to name a few, are some of the elements that need to be considered to make text legible.

Size

12 pt font has become the norm when creating a document. Unfortunately, it is not the most comfortable size to read for long forms of text. Many books, periodicals and magazines are printed at less than 12 pt. This is not only for aesthetic purposes—it can also get costly to print at that size.

While every typeface looks different at 12 pt, try printing it out and reading it. Size it down to 10 pt—it might not seem much, but copy text can look elegant at this size. Don’t be afraid to go up or down by 0.25 pt or 0.5 pt as it can make a big difference. It's all in the details. Depending on what the end product is, you might need to adjust. For instance, business cards are usually set at 7 or 8 pt.

Line Length

Line length is the width of a column where type is set, and it's usually measured by the number of characters on a single line.

Depending on the size of the copy text, a readable line length can vary. For copy text, a line length of between 45 and 75 characters is optimal. As you increase the point size of a font, you’ll need to increase the line length. Narrower lines are suitable for short copy as the reader’s eyes won't need to travel far to the beginning of the next line. For long forms of text, go for wider columns, so that readers won't need to jump to the following line as often.

Leading

Leading, also called line spacing, is the vertical space between each line of text and is measured from baseline to baseline.

Depending on the typeface you are using, you might need more or less leading. Darker typefaces need more leading because they tend to make a page look darker and require more breathing room. As a rule of thumb, add 2 pt to the final size of the copy text. Keep an eye on ascenders and descenders as they can often touch between the lines.

Tracking

Also known as letter spacing, tracking is the act of adding horizontal space between characters. Lowercase characters require some tracking in long forms of text to fix rags, orphans, and widows. Strings of capital letters need tracking to add some air between the characters. There isn’t a rule as to how much tracking you should add, but try to find a good balance.

Kerning

Whereas tracking is the space between characters in a word, kerning is the space between a combination of two characters.

Most typefaces are integrated with kerned pairs that are created carefully by a designer. There are many different combinations, so some are not kerned by default. There's no mathematical rule for kerning—your eyes are your best tool. The goal of kerning is to achieve equal distance between the pair so that the full word looks evenly spaced. Characters with diagonal strokes are difficult to kern because of the space they create.

Typographic Alignment

Typographic alignment refers to the text placement on a page, and it is one of the first decisions you'll make at the beginning of a project. Each alignment style has different applications and its own challenges to make the text readable.

The four main alignment styles are:

Flush Left: If you are typesetting large amounts of text, flush left is a great option for languages that are read from left to right. Try using hyphenation to achieve a pleasantly uneven rag on the right side (more on rags in the next section).
Center Align: Use center align for shorter amounts of text, like headlines, formal invitations, and introductory copy. Avoid using this style for long copy as it can become difficult to read due to the uneven edges.
Flush Right: Flush right is common in languages that read right to left, like Hebrew and Persian. Use this style for a few lines at a time and when necessary (pull quotes, sidebars, and notes).
Justified: Justified text is aligned to both sides simultaneously. This style is most common in books and newspapers, mainly to save space and fit as many characters as possible on one line. Use hyphenation with this style to avoid wide gaps between words.

Rags and Rivers

The uneven edge on the opposite side of a flush left (ragged right), flush right (ragged left) or center aligned text is called "rag". When setting type, pay attention to the ragged edge shapes as they sometimes can be distracting if not set properly. You can correct rags manually by breaking lines where necessary or hyphenating words. A good rag goes in and out in small increments.

Rivers are big gaps between words, usually caused by justified text. Use a combination of tracking and hyphenation where needed to eliminate rivers. A slightly tighter tracking will allow you to fit more characters on a line, while the hyphenation option will break words where necessary.

Orphans and Widows

Orphans are isolated lines created when a paragraph begins on the last line of a column or page. A widow is the last line of a paragraph that appears at the beginning of the next column or page.

Both of these issues cause excessive white space around the lines of text. To eliminate this problem, edit copy where necessary. If editing is not an option, try typesetting previous paragraphs meticulously. Typography is all about the details, and it's important to create a good reading experience within a clean and organized layout.

That's It!

In this article, we've shown you the most essential typographic terms. We clarified a few regularly misused words, touched on figures and symbols, and explained some indispensable typesetting terms.

It's important to learn the do's and don'ts of typography. You'll understand why some typefaces work at a small point size or why text is readable in a wide column. While this guide contains rules, I think rules were made to be broken, so experiment outside the box. Once you've mastered, practiced and applied the basics, I encourage you to get crazy and explore new horizons!