The Difference between Typeface and?Font.

Typeface and Font are the two interchangeably used terminologies. Even experienced designers sometimes get confused among the two. But are they the same? Not. A set of letters, 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 that typeface structure.

A font is a specific size, style, weight, widths of a particular typeface. A layman’s term can be called 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 how 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. It comprises a collection of fonts with specific weights, styles, and sizes. 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 two texts follow the same typeface but carry different font styles and sizes.

It was easier to understand the difference between ancient print typography, but it went off track in 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.

ProCreator is an award-winning UI/UX Design agency in Mumbai, focusing on establishing an end-to-end product solution, from product design to development.

Originally Published at ProCreator Blog, by — Rashika Ahuja.