The Importance of Fonts in Web Design

Importance of Fonts in Web Design

Long before the age of technology, fonts have been evolving. We’ve come a long way since scriptwriting, mainly because our works are no longer in scrolls but anywhere from screens to print ads.

Fonts have changed with our times and the means of which content was presented to us, yet that doesn’t mean all fonts have gone outdated. Some of them outlasted the test of time and are still used today!

Finding that perfect font can often feel like locating a needle in a haystack, however, it’s important to remember that before we dive into that haystack, we need to understand a few of the basics of font pairing.

A bit of history about fonts

Going back to the beginning, it all started with the serif font. The first category of serif fonts were old-style serifs, dating back all the way to the Romans around the 15th to mid 18th century. These serifs had little variation between thick and thin strokes. They also tended to have a stress on the left axis, as well as have serifs that are wedge-shaped.

Baskerville Traditional Serif Font for fonts in website design

During the mid 18th century, transitional serifs were introduced. This style shows the change between the old style and neoclassical designs. This style had vertical stress, with thinner character strokes. The weights in these fonts showed much more contrast than older fonts.

Didot Neoclassical-Modern Serif Font for fonts in website design

Later in the 18th century, neoclassical serifs were introduced. The beginning of fonts considerably differing in style – the difference between weights of thick and thin was extremely abrupt.

Gill Sans Serif Font for fonts in website design

It was in the 19th century that sans serif fonts were created and became popular. These fonts, of course, lacked the serif but also had more square curves to their characters. Later the square sans serifs, geometric sans serifs and then the humanistic sans serif was created. The humanistic sans serif was said to be the most readable of the sans serifs thus far and had a lot of calligraphic influence.

Dancing Script Style Font for fonts in website design

Next, script fonts were designed, using formal scripts they were inspired by the writings of the 17th and 18th century. Then morphed into calligraphic scripts that were inspired by the characters found in religious text, but with a modern style. This then ventured to casual scripts which give the allusion of modern-day handwriting.

Lastly, there was the creation of decorative fonts, which vary widely in type and are the largest group.

Evolved over time

Evolved Over Time Scrifs for fonts in website design

Evolved Over Time Sans Scrifs for fonts in website design

It’s no secret that these fonts considerably evolved over the centuries. After all, we aren’t using the same script fonts found back in the day. But, exactly how have they changed?

Mainly, the variety of fonts in every aspect has increased during this time.

If you look at most modern-day writing, it varies between sans serif and serif, but mainly on the web the sans serif fonts display nicely. Although the history of fonts began with the serif, we tend to look at serif fonts as traditional and old school, yet they still appear in modern-day settings.

Similarly, our options of font weights greatly increased. Now when you pick a font, you have many choices as to what weight you’d like that font to display. These in itself, significantly change the appearance of a font.

Lastly and probably most importantly, we now have many variations of fonts. Today there are over hundreds of thousands of fonts, making the jumps between font growths much smaller. Whether it’s just changing a font slightly to be a bit narrower and longer or a bit more square, there are a lot of fonts that share similar characteristics.

Choices that have stuck

Technology has influenced all design and created a new modern era. In fonts, this looks like clean lines with a lot of in-between character lines. It is making the content look clean and crisp, a considerable contrast from the original font styles. That doesn’t mean that traditional fonts aren’t still in business. There’s a list of fonts that have stuck throughout generations, and we still use today!

Playfair Display for fonts in website design

An extremely popular font, with its straightforward to read style has stood the test of time and is still used widely today. It’s frequently used in books, showcasing its traditional yet stylish flair on a font, and also works well on website design, because of it’s elegant feel. This font is also part of the old-style serif category.

EB Garamond for fonts in website design

Also part of the old-style serif font category is EB Garamond. This font has a few unique qualities that set it apart from other traditional styled fonts. It has a longer ‘F’ midbar, a ‘W’ with crossed misstrokes, as well as a few distinct characters, especially with its italicized letters.

Abril Fatface for fonts in website design

This font would be considered a disdone or modern font, having a lot of strength in the characters. It has a strong focus on vertical strokes, as well as a big contrast between thin and thick strokes. Abril Fatface is much easier to read when displayed in big writing with lots of spacing in between. It’s the perfect font if you want to stand out from the crowd.

Actor for fonts in website design

One of the first san serif fonts to be widely used, this is considered a grotesque sans serif. It has a lower ‘x’ height and also gives whichever design it’s used in a much more distinctive style.

These fonts can be downloaded for free from Google Fonts.

Pairing traditional fonts

With the legends of fonts, as I like to call these, it may seem daunting to try and pair them with other fonts. After all, they’re vintage!

Don’t worry, just like any other fonts the same rules still apply. Make sure there’s a font that takes the spotlight and one that takes a back seat.

Pairing fonts is about creating balance. If there are two overpowering fonts, then they will always compete, making it hard for the reader to read the actual content.

If you’re still having trouble trying to put together another font with one of these legends, use a font combination tool like this one created by Bold Web Design.

Bold Traditional Fonts for fonts in website design

Wrapping up

Now that you know the history of some of the most popular fonts, it’s time to hit a reality check. The age of a font does not automatically equate its style. Just because a font was created in the 18th century does not mean it can’t pull off a modern look today.

Fonts are all about pairing with other fonts, designs, colors, and pictures. It’s the way you use the font that truly brings out its style, rather than the period it was first designed.