Typography in Web Design

In my earlier post, I showed how web designers use the Joshua Tree Epiphany to tie their website together in a way that’s visually pleasing. No matter how innovative an idea may be, without the proper structure it can look disorganized and unattractive. And this concept also applies to typography, the art of arranging words to evoke emotion and give a message. As a reader, we don’t automatically acknowledge the process of finding the best typefaces and fonts for the website we click on. But typography is an essential technique for designing web designs. So, in this blog, we’ll cover the usage of typefaces: both good and bad.

How are Fonts Used

Photo by Jon Tyson on Unsplash

Before we look at examples of typography in websites, it’s best to understand how fonts are used to convey messages and emotions. Although it may not be comprehended at first glance, the style of a font must be taken into consideration when presenting text to an audience. When publishing magazines or newspapers, the body text is most likely going to be a serif typeface because the ‘serifs’ or extra strokes at the ends of the letter helps with readability. On the other hand, most websites use sans-serif typefaces because it works well with any monitor no matter the screen resolution. And if you want regal invitations, decorative or calligraphy typefaces are the best choice. Furthermore, the font style, size, weight, and more must also be considered. Certain fonts can give your work a sophisticated, modern, or abstract feel. There are fonts that are partially art and fonts that contribute to word play. The possibilities of typefaces and fonts are endless, and with this knowledge let’s see how to use typography well and not so well.

Critiqued Typography Techniques

Up first is a website called Mr. Bottles, an antique bottle collecting resource. The first that’s noticed is the main title and header of the website. And if the font is almost unreadable (as presented), then it will confuse the user. I, in fact, didn’t know what it said until I looked at its URL. It’s good to have a font that matches the theme of the website, but it becomes a waste if it can’t be comprehended. Another critique would be the usage of the same font in the menu. It’s always best to make the font used the menu different than the watermark; something more legible and easier to spot. It ensures that the wordmark logo doesn’t compete with everything else on the website for the user’s attention

Besides the technical aspect of typography, a font has the match the theme of the website. And Penny Juice gives a good example of this in its wordmark. For a website based on children, it does give the child-friendly feel like other child-centered websites. Even though a child wouldn’t click on this website, parents and people who work with kids respond well to websites that look child-friendly. Using vivid or pastel colors with typefaces that are more rounded and cuter can go a long way.

Applauded Typography Techniques

To end on a good note, let’s look at websites that uses typography well. And to start off, we have The Next Rembrandt, a promotion website for said film. In contrast to Mr. Bottles, this website makes the wordmark the center of attention. And simultaneously making sure the menu and header are equally important and therefore legible. The wordmark’s choice of font gives off a mysterious feel that matches the theme of the website and even the film. It definitely shows that a wordmark can be abstract and comprehensible!

Next is this simple and symmetrical website. It really shows that a less can be more. Though the text isn’t anything special like the past websites shown, Mixd, a website designing company, uses typography is other ways. For a website that boasts about “beautiful form” and “perfect function”, it does show it in their word tracking and leading. The way they space out the pieces of text along with the letters themselves reflects the perfection they’re trying to promote.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s