What Is The Difference Between Fonts, Typefaces, And Typography
Text and images are what constitutes design, not just on our screens but all throughout. If you remove them from perspective, there isn’t anything left. Having an understanding of typefaces and fonts is very important for everyone whether you are a designer or a developer or a human, just for instance. No matter what you do, you should have at least the clear insights of typography.
In this article, we will embrace the basics of typography and fonts, what comprises them, how we classify them, and most importantly, which font is the best suitable for your work.
An Introduction To Typography And Fonts
Take typography as the work of art and font as the original form of that artwork. Famous designer Nick Sherman summed this very well as-
A typeface is to a font as the song is to an MP3 file.
Same as we have genres of music, we have families of typefaces as well, such as serif, sans-serif, monospace, etc. Typography is nothing else than the overall look and feel of the final text; it encompasses all the considerations about the visual appearance of type (the font is a part of them).
Typefaces vs Fonts
Both of them are the same. Pretty surprisingly, the answer is no, typefaces, and fonts are not the same things, but the terms are employed interchangeably quite often. The words are used conversely at times, but the fact is that both of them are very different from one another.
A typeface is a family of many similar fonts (such as Times New Roman).
Fonts are different, take them as the adjectives of typefaces as you may have many attributes such as curiosity or fat (wait, how fat is an adjective!). In the same way, fonts are the adjectives of typefaces and include things such as height, weights, widths, and styles.
Classification Of Typefaces
These typefaces have a slight finishing stoke at the end, which makes them more readable even from a distance. The words appear well separated from one another. They were used hugely in printing works such as in newspapers or magazines.
The meaning of Sans in Latin is “without”, hence the definition of sans-serifs compiles to without serifs as they don’t have the ending strokes. Because of this, Sans-Serifs appeal more modern and minimalistic, making them more suitable for digital screens.
Script typefaces contain a continuous cursive type feel in them, often resembling fluid strokes created from pen ink while writing. They can differ from formal to very casual. Because of having that hand touch in them, they are perfect for invitations, headlines, descriptive texts, or display use (or even signatures and autographs!)
Mono means having the same frequency, throughout. Monospaced typefaces have a consistent amount of horizontal space between them, which makes every letter take the exact amount of space. Making it easier to find words in hundreds of lines and is the reason why they are the typefaces of choice for developers. All the modern IDEs use monospace typefaces to retain the readability of code.
A Display typeface is designed for sizeable heading text, not as the main body text. Display typefaces vary widely in their appearance and include both practical and novelty fonts.
Anatomy Of Typefaces
All letterforms have different parts, and there are names for those parts. As chemists have weird naming conventions, in the same way, designers as well like to name things to have a gap of separation.
There is a massive list of these naming conventions. We aren’t going to cover everything in this article. If you need a list of them, please check out this.
Naming Conventions In Fonts
Inline, Outline, Shadow, Fill, Bevel.
Caption, Text, Subhead, Display, Deck, Poster.
Roman, Italic, Cursive, Oblique (a slanted roman), Small Caps (usually included as an OpenType feature rather than a digital font), Petite Caps (rare), Upright Italic (rare), Swash (often an OpenType feature rather than a font).
Hairline, Thin, Ultra Light, Extra Light, Light, Book, Regular/Roman, Medium, Semibold, Bold, Extra Bold, Ultra Bold, Black, Ultra Black.
Compressed, Condensed, Semi Condensed, Narrow, Normal, Extended, Extra Extended, Expanded.
Choosing A Font
After so much practical theory, it’s time for some practical stuff! Which font to use and for which purpose. With the design trend changing with time, it’s tough to answer this question in a few words, but some considerations can be taken at the time of choosing the right font for your project.
Is the load size of the font nominal?
If the font has too many typefaces, it is undoubtedly going to take much time for the file to load. By choosing a font having a limited number of typefaces or by limiting the number of typefaces getting load when someone opens the website would surely make the web page faster to load.
Will the font work great with other fonts you are using?
Every font doesn’t work well with other families of fonts and can make a design look ugly. To address this issue, always make sure to check the combination of fonts working together.
Does that font have enough styles?
Fonts usually offer three different styles in general. A font with less than three styles limits the forms.
Wow. That was long, congratulations on making this to the end! Read more development related articles on Phleebs!