Typeface and Font are the two interchangeably used terminologies. Even the experienced designers sometimes get confused among the two. But are they the same? Absolutely not. A set of letters which, when combined and designed together systematically and harmoniously forms a typeface. A typeface is a set of characters or letters that share a typical design pattern, basic shapes that make up the structure for that particular typeface.
A font is a specific size, style, weights, widths of a particular typeface. In a layman’s term, it can be called as a subset of a typeface. A typeface can also be referred to as the font family. A collection of glyphs (the graphical representation of a character)
Let’s understand these with some examples. Transitional Serif, Geometric Sans, Script, Bodoni are all examples of typefaces. Whereas, Futura, Courier, Lucida, Calibri, Myriad, and many more like these. A typeface is what you see, and the font is h0w you use it.
Typefaces are laid out, pre-defined, and follow the rules of how you must use them whereas a font can be illustrated, styled, and enhanced as per the requirement of your interface.
Helvetica is a widely known typeface. The letter shapes and width are unusually uniform, providing an overall texture to it. It further comprises of a whole collection of fonts with specific weight, style, and size. Let’s take one more example.
- The text written above uses a typeface of Avenir.
- The text uses a font size of 14px and font style of regular.
- The following text uses a font size of 18px and is italicized as the font style.
The above two texts follow the same typeface but carry two different font styles and sizes.
It was easier to understand the difference between the two in ancient times of print typography but it went off track in the web typography. This difference is essential to know when you enter the field of web design and typography. Typography can make or break your design. So, if you want to point at any text and find it not-suitable for your design, then it’s good to use the correct terminologies. You should not end up changing from one typeface to another when you just wanted to italicize the text.