Although the exact number is not known, estimates tell us that there are more than half a million fonts in the world.
Although most of these fonts are based on a few of the most popular fonts, and then these are just variations, there is still a very large number of fonts that look great and can be used in a variety of ways.
This is all great but this font diversity leaves us with a huge dilemma: which fonts do we choose and use for our web design? Do we go for decorative fonts or modern ones? Or do we choose the bold variant over the light one?
The choices are pretty much infinite and because of this, it is easy to choose the wrong type of font and get a really bad design.
That is why it is necessary to know as many different types of fonts as possible and which to use for the best possible results.
We will tell you more about the four main types of fonts, different styles, typeface classification, and many other things that will be very useful to you.
In this article you will read about:
- Different styles of fonts
- Four main types of fonts
- How do I identify a font?
- What fonts are good for websites?
- How to choose font for your website?
- Where can I find web fonts?
So let’s get started!
Different styles of fonts
Before we start talking about different types, you should know that there is something called the anatomy of fonts.
All fonts have something called a baseline and the fonts “sit” on it. There is also something called a mean line. All fonts “exist” between those two lines, and what is below or above is called ascender and descender.
Ascender is when part of the lowercase letter goes above the mean line, while descender is when part of the lowercase letter is positioned below the baseline.
These elements are something that every font has in common. What sets the fonts apart are the shape, thickness, height, and much more, which actually classifies the fonts into different groups.
Overall we can say that the most basic distinction between fonts is the difference between serif and sans serif fonts.
Sans serif looks very simple, while serif font looks decorative. Certain parts on the serif font that look like ornamentals and are called “serifs” do not exist on sans serif, which actually means “without serifs”. That is the key difference between them.
There are many subcategories within serif and sans serif fonts as well as a few more types we will talk about in the next paragraph.
What are four main types of fonts?
There are four main types of fonts that you will encounter often and most fonts are just variations of one of these four types.
By some classifications, there are five main types of fonts, and that depends on whether weak serif fonts count as a separate type or just a subcategory of serif fonts.
We agree with a classification that states that there are 4 main types of fonts, and these are, in addition to the already mentioned serif and sans serif fonts, script fonts, and display fonts.
Let’s learn more about them and mention some of the most famous variations on these 4 main types.
- Serif fonts
- Sans serif fonts
- Script fonts
- Display fonts
The reason for this font being first on our list is because it is the oldest font type.
It originated from Roman carvings, and there are two theories why the Romans had serifs on their letters.
The first one states that, during the process of carving the letters into stone, the stone carvers unavoidably created the serifs while following the outlines of the letters.
The second theory suggests that the use of serifs was deliberate and that they were used to neaten the ends of lines.
Whichever the case, letters with serifs became the default and were used for centuries, so when Gutenberg devised the movable type printing press, the books were printed in letters with serifs.
Because of their origin, serif fonts are associated with the old and traditional, but this doesn’t mean they’re not used anymore.
There are 4 types of serif fonts that have their own separate uses and variants, so let’s take a look:
- Old-style serif fonts
- Transitional serif fonts
- Didone serif fonts
- Slab serif fonts
Old-style serif fonts
This serif font style originated in 1465, shortly after Gutenberg invented the movable type printing press.
Old-style serif fonts were inspired by the Renaissance and had great readability on the rough paper that they were printed on back then.
Let’s look at an old-style serif font:
These fonts are characterized by a small difference between thick and thin lines, as well as curves that connect the serifs to the strokes.
Other old-time serif fonts include Bembo, Bookerly, Cartier, Callisto, Gentium, Palatino, Requiem, and many others.
Nowadays, they’re rarely used in web design, but they have found their use in printing, book covers, and movie posters. Penguin Books, Oxford University Press, Cambridge University Press, the National Gallery, and many others use Bembo as their body typeface.
Fun fact: The Requiem font is most often used for credits in movies and TV shows.
Transitional serif fonts
These fonts are also referred to as baroque fonts and became widely used mid-18th century. They got their name because they present a mix of old-time and more modern fonts. Times New Roman is a type of transitional font:
The difference between thick and thin lines is more obvious, and many of them have more round serifs (as opposed to strokes) and a more vertical axis.
Other transitional fonts include Baskerville, Georgia, Bookman, Cambria, Perpetua, and others. They’re still very much used, here’s a website of a developer and designer that uses the Times New Roman font:
Didone serif fonts
Didone is a more modern version of the serif fonts and it first appeared in the late 18th century. These fonts were immediately a huge hit and could be found everywhere.
The designers of the first Didone fonts, the printers Firmin Didot, Giambattista Bodoni, and Justus Erich Walbaum, wanted more elegant fonts that would show the more refined printing techniques. Here’s an example of a Didone font:
It looks pretty modern, doesn’t it? And how sharp do those serifs look? Compared to the previous two serif types, this one is sleeker and looks neater and more trimmed.
Didone fonts are characterized by narrow serifs that have a constant width, thick vertical strokes of letters, and a strong contrast between the horizontal and vertical parts of letters.
Out of the four serif types, the Didone fonts are used the most in web design.
The Didone fonts are usually associated with fashion, but they can be found everywhere. Here’s a mattress company’s website that uses a unique Didone font:
Slab serif fonts
The slab serif fonts appeared during the early 19th century. Their purpose was to grab attention, hence their main characteristic: thick and bold serifs. Here’s Rockwell, a slab serif with a geometric design and consistent line thickness:
In the past few years, their use significantly increased, probably because of their bold and clean design. They used to be everywhere: from magazine and book covers, brand logos, and web design. Their use is not that common lately.
There’s a website that uses the Soho slab serif font for both the title and the body text:
Sans serif fonts
As minimalism became more popular, the need for simpler and cleaner fonts appeared.
Sans serif fonts entered the scene.
These fonts, as previously mentioned, don’t have serifs and look more modern and sleeker. Just like the serif fonts, sans serifs also have variations, depending on the period when they were made and their appearance.
They first appeared in the early 19th century. Frowned upon at first, they are nowadays used much more than serif fonts. Their sleek appearance works perfectly paired up with modern web design, and when it comes to web articles, their lack of serifs enables cleaner-looking text and increased readability.
Let’s look at the sans serif fonts variations, of which there are 4 types.
- Grotesque sans serif fonts
- Neo-grotesque sans serif fonts
- Geometric sans serif fonts
- Humanist sans serif fonts
Grotesque sans serif fonts
This font family first appeared during the early 19th century.
Now, you may be thinking: ‘How can a font be described as grotesque?’ This isn’t about the god-awful chiller typeface, or about any font that is dripping blood. These are quite ordinary-looking fronts that got their name by being different.
Serif fonts were all people knew for centuries and when the first fonts without serifs appeared, people thought they looked weird and ugly and called them grotesque.
If you think about it, it is kind of understandable. People were used to ornate fonts and their elegant serifs, so when something so ‘plain’ appeared, it makes sense that it was met with disgust.
The word grotesque started being used officially for these early sans serif fonts when William Thorowgood, a British typographer, designed the so-called Seven Line Grotesque font in 1832. It was used for newspaper titles, while the body remained in a serif font.
Here’s what it looked like:
As you can see, the characteristics of these fonts include small contrast and even line widths.
I found it really interesting that some letters clearly stand out from others, such as the capital R, which is the case with many grotesque fonts.
Irregular proportions are very common when it comes to grotesque fonts, as well.
Additionally, when they first appeared, many of them didn’t have bold and italic variations, which limited their use, hence why the body text in newspapers was often in serif fonts.
Today, people are still creating grotesque fonts and some of them look pretty amazing and unique, like this one for example:
Here’s a website making great use of a grotesque font:
Neo-grotesque sans serif fonts
As the name suggests, these sans serif fonts present a more modern variation of grotesque fonts. The difference between them is that the neo-grotesque variant looks plainer.
They appeared during the 1950s when the graphic design style known as the International Typographic Style emerged.
During this period, the font Helvetica was created, one of the most popular fonts of the 20th century.
I find it really fascinating that it is still very much used today, look at this stunning website that utilizes it as its main font:
Other neo-grotesque fonts include the famous Arial, Android’s Roboto, Impact, as well as Microsoft Sans Serif, and many others.
Geometric sans serif fonts
These sans serif fonts have a geometric appearance, which means squares and nearly perfect circles.
They originated in Germany during the early 20th century and most of the popular fonts were designed in the Bauhaus art school.
What made them popular was the fact they looked even cleaner and even more modern than the neo-grotesque kinds.
When it comes to these fonts, the letter ‘o’ is almost a perfect circle and the capital letters have different widths. Additionally, the ‘M’ is often spread out. Here’s the first geometric font called Erbar, created by Jakob Erbar:
Other geometric fonts include the famous and ever-so-popular Gotham, Brandon Grotesque, Century Gothic, Nobel, Metro. Here’s a website that uses both different variations of Gotham and the Brandon Grotesque fonts:
Humanist sans serif fonts
Contrary to the geometric appearance of the aforementioned fonts, these look more like they were drawn by hand and have a more organic appearance, hence their name. They appeared during the early 20th century and were inspired by traditional letters, serif fonts, and calligraphy.
The contrast between the thick and thin strokes is low, the ‘e’ has a slanted crossbar, and the ‘a’ and ‘g’ are double story, with the aim of readability increase. Here’s a website that uses Freight Sans, a sans serif humanist font:
They used it in the text under the title, which is in Jubilat, a slab serif font. The body in Freight Sans has a natural appearance and contrasts with the chunky title. It also gives a friendlier and lighter note to the very serious-looking website.
That was it about serif and sans serif fonts and their variants. But there are more types of fonts in web design, and those are script fonts and display fonts.
Let’s look at what they entail.
As their name suggests, the aim of these fonts is to resemble handwriting.
Because of the fact they are extremely ornate, they have very limited use in web design. You won’t see them used for body text. They have found their use in really short phrases, most often titles.
They don’t have much in common aside from the fact they look very elegant. The brush strokes vary from font to font, as well as widths and the way the letters are drawn.
You’ll find them on logos of sophisticated restaurants, elegant liquor bottles, beauty brand logos and packages, posters, etc.
Here are some popular script fonts:
Even if you think that some of these look good, trust me, they don’t. Avoid using any script font that came with your computer. The wrong use of a script font can ruin an entire website and make people think that an amateur made it.
If you really want to use a script font, find them on the internet instead. You will have to pay for the best ones, but you can find nice-looking ones that are free if you spend some time searching.
They cannot be frequently found on well-designed websites, and web designers avoid using them for the aforementioned reason. Instead, they go for modern fonts and old-timey fonts that are far more legible.
But we did say in the title of this article that we would provide you with examples, so I spent quite some time looking for websites that use script fonts tastefully. Here they are:
This agency used the script font as sparingly as possible: for only one word. They created juxtaposition, or contrast, between the sans serif and script fonts, which makes their website more unique.
Another case of juxtaposition, probably with the aim of saying the restaurant is a combination of both modern and traditional cuisine and aesthetics.
This website utilizes the Blitz Script font pretty heavily, but it fits its artsy appearance and purpose.
Here’s the last of fonts in web design on our list. Display fonts, also known as decorative fonts, are the most diverse group of fonts.
You know how serif and sans serif font groups have something in common, which makes them easily recognizable. Here, that isn’t the case.
The fonts that belong in the decorative group vary in appearance so much that they often look like they don’t share a group.
Here are some of them:
As you can see, their appearance varies: there are highly decorative ones (Monoton), there are minimalist ones (Poiret One), Bangers looks very comic-esque, and Special Elite is a typewriter font.
They all look like they have nothing in common, except the fact they are used for titles and not body copy.
There are different styles of display fonts, and they include:
- script looking fonts
- fonts with shadows and engravings
- fonts where upper and lower case letters are mixed
- distorted fonts
- very light or very bold fonts
- fonts with reverse contrasts
- alphabet redesigns
Here’s an example of a website that uses display fonts really well:
The use of color matches the unique display font they used for their logo and makes their website very memorable.
How do I identify a font?
Due to the huge number of fonts that exist, it is not possible to recognize most fonts, except for a few of the most common ones we mentioned. But since even these most common types have a lot of subcategories, it will often happen that you see a font somewhere that you like and think you should implement it, but you can’t identify it.
Fortunately, there are several tools that can do this for you.
The image resolution on which the desired font is located should be as high as possible because then the tool is more likely to recognize the font. Also, the larger the font, the easier it will be to find out which font is in question because the characteristics will be more obvious.
There is also the possibility to scan it using the camera of your smartphone and thus find the font.
If you want to see which font is used on a particular website, you can install extensions to help you search.
In case you fail to find it after using all of those tools, your last resort will be to contact someone who is a font expert or upload an image to the forums where someone will probably solve your dilemma.
What fonts are good for websites?
In the next paragraph, we will talk more about how to choose the right font for your website, but before that, we must explain which fonts may come into consideration at all.
It is very important to pay attention to whether the font you like falls into the category of web-safe fonts.
Web-safe fonts are those fonts that will suit different browsers as well as different devices like smartphones, tablets, and so on.
All those fonts that are not web-safe will not always be displayed in the right way, but in case someone does not have that font installed, he or she will be shown some of the generic fonts, and that will then completely destroy the look of your website.
So no matter how positive it is to be unique and stand out from the crowd, you need to think about fonts that look well on the web too.
But that’s not all. Web-safe fonts, as well as those that are not, significantly affect SEO.
As you probably know, page load speed is one of the most important things for search engine optimization.
If you use web-safe fonts loading speed will be significantly higher than when you use those fonts that are stored locally and are not installed everywhere and then visitors to your site will experience slow loading.
This is disastrous both for SEO and for the general impression that users will have about you.
So before you opt for a particular font or more of them, first make sure that they are web-safe fonts, and only then proceed to the design of your website.
How to choose font for your website?
If the same few fonts fit everyone, there wouldn’t be so many variations. How do you determine the one that is ideal for you?
We will tell you a few factors to consider when choosing suitable fonts for your website assuming that you are going to choose some of the web-safe fonts:
- Type of your brand
- Decide on the number of fonts you are going to use
- Amount of written content
Type of your brand
Font should be chosen based on the characteristics of your brand. Each brand, both because of its characteristics and the niche it belongs to, has some visual characteristics. For example, the beauty brand compared to the IT-related brand is completely different.
So first you need to think and research what fonts are mostly used by brands like yous. You certainly shouldn’t plagiarize them, but you should get some impression.
This way you will understand whether you need to focus more on modern or vintage fonts.
Also, pay attention to the colors you will use. If the font is extravagant, then use soft colors and vice versa.
Otherwise, your website will look like a circus advertisement, and very few brands can benefit from such a design.
Don’t downplay the importance of the font as it has one of the biggest impacts on brand identity.
Decide on the number of fonts you are going to use
The golden rule is that you should not have more than 3 different fonts on your website.
In some cases, you can use more than 3 fonts, but it is best to stick to having 2 to 3.
You don’t even need to use just 1 font, because the website will look boring.
First, choose the primary font that will be most visible and you will use it for your brand name and other large text such as titles. The primary font can be different. Some opt for simple ones, while others choose ornamental fonts as the primary.
You should always strictly adhere to the hierarchy, which means that fonts should have different levels of importance and that this is the case everywhere on the site.
The secondary font is also important because it is actually being the most represented on your website. You will use it for all the text and therefore it must be easy to read. While the primary font can be more complex and bold in design, as there is more to draw attention to, the secondary must be simple so that website visitors do not get tired of reading.
You can also implement a third font, but only in a few places like call-to-action, menus, and the like. It can look embellished to attract attention, but it mustn’t dominate.
Your goal is probably to get people from all over the world to visit your website.
Many know English and will browse your website in its original form, but also many will take advantage of the translation options and switch it to their language.
This can be a problem if your font only has Latin letters and then when translated, the website will completely lose its look.
It is impossible to find a font that supports all the languages of the world, but make sure it has at least some characters from other languages.
Think about which market your brand is most interesting for, and choose a font that is adapted to specific foreign languages.
Amount of written content
We have already mentioned that the secondary font should be clean and easy to read.
But the amount of text found on your website also dictates the choice of all the fonts you use.
If there is very little written content, you have more choice than if you focus on a blog and the like. In case your blog and generally written content is your primary thing, you need to choose a font that is easy to read.
No one will want to read a 10-minute blog written in some of the non-standard fonts.
The point of a blog is for people to learn something new, not to attract attention with colorful design and ornate fonts. So if you have a lot of content, our recommendation is to choose one of the sans serif fonts.
The only exception can be a very specific niche, which ideally fits a specific font.
Where can I find web fonts?
There are many websites where you can download different fonts, try them out, and implement them.
Don’t always choose default fonts, because that doesn’t seem creative at all. Investigate what’s available to you, make sure it’s a web-safe font, and then fit that into your brand identity.
Google fonts is probably the most popular site for finding fonts, as its name suggests.
All the fonts you can find there are open-source, which gives you a lot of freedom to use them however you want.
Alongside Google fonts, there are many more reliable sites like Font Squirrel and FontSpace where tens of thousands of different fonts are available, so take some time to find the right one, don’t end your search after 10 minutes.
Do you think you’ve mastered the four main types of fonts and their subcategories?
To check your knowledge, head over to our portfolio page and try to identify the fonts of 3-4 of our projects.
After you’re done and want to know if you’re correct about the types of fonts, you can contact us and we will respond to you shortly. Or, you can simply write your answer in the comment section below.
Thank you for reading! We can’t wait to see your answers.