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.

What Makes a Good Landing Page?

In an earlier blog, I covered good strategies for designing a website. Considering things like your target audience, color psychology, and functionality, are good examples of such strategies for your website overall. But what about a website’s first impression? In this case, the first thing an audience would see can either be the website’s homepage, or its landing page. Since every website has a homepage, we’re focusing on something less common to land on. While a landing page might seem unnecessary for your web page, it’s at least good to know the do’s and don’ts of a landing page if it’s ever needed.

Designing the Perfect Landing Page

Photo by Le Buzz on Unsplash

For starters, a good landing page must be straight to the point on its purpose with very little else to distract the audience. Keeping things simple and welcoming is essential for attracting any audience that lands on the page. It’s also important for the landing page to answer any question that would come to mind when reaching the main focus of the landing page. These would include features, any costs, and comparison to any of your competition. Make your landing page flow and engage the audience enough to follow through whatever you want them to do. And finally, you want to make sure that your ‘Call to Action’ is straightforward; if you redirect your users too often, they’ll leave in frustration. And if you want to avoid frustrating your users, let’s move on to mistake that should be avoided when making a landing page.

The Don’ts of a Landing Page

Photo by Pixabay from Pexels

Surprisingly, a major blunder with landing pages is that its loading time is too slow. With this being the first thing they see after clicking on the website, landing pages that take more than 5 seconds to appear gets rejected before their even given a chance. This is a problem that revolves around coding the landing page so that it can exceed the insanely low patience and high expectations of the web user. Another mistake to avoid is having a weak headline. A decent balance between direct and creative is ideal, but it’s safer to play direct if you can’t brainstorm attractive headlines. As long as you replace these possible slip-ups with the suggestions above, you’re go to go!


I hope this information helped gather a well enough idea for a landing page, or the consideration of making one. Of course, even without these tips there’s nothing wrong with looking up landing pages for reference. For more information on making good and bad landing pages, check out these websites for each, respectively. And as always, enjoy!