Let’s face it: Typography makes up the bulk of your website because web content is mainly about reading. Therefore, why not concentrate on making typography as clear, helpful and attractive as possible? It’s sad but true that many web designers just neglect typography and view it as something of an afterthought. If you do this, then your site visitors will view your website as something of an afterthought, too!

Typography and web design are always intertwined; you can’t have one without the other. Effective typography will get the immediate attention of your site visitors, compelling them to stick around longer and perhaps become regular readers of your website! More so than graphics or images, typography is a strong technique for conveying important information to your site visitors.

Wouldn’t it be awesome if it was always used to create website text that constantly impressed you … instead of driving you away or boring you? Here’s how web designers can use typography to come up with some truly breathtaking website text.

Emulate Newspaper Text and Layout

This is particularly useful if your website is an online magazine version of the print form, or if it just offers readers various features or stories of interest. The reason that typography that resembles a paper’s works so well is that literally every person alive is very familiar with this type of font. Who hasn’t picked up a newspaper at least once in their life?

A great illustration of this is the New Yorker’s website. This long-running American magazine has a website that immediately grabs a user’s attention due to its large, very noticeable font size, ideal spacing and smart utilization of white space to spread out elements. All of this adds up to a website that’s super-easy to read, which is what will keep your site visitors sticking around for a long time to come.

Use Big Fonts and CAPS Liberally

There’s always been debate about how and when to use really big fonts and even caps, but if it’s done aesthetically, then it works perfectly, as La Wine Agency’s website clearly demonstrates. La Wine Agency is a company that makes lines of wines especially for novice wine drinkers, in the hopes of turning them into regular wine drinkers.

The site is not afraid to boast big fonts and caps on all its text, which immediately makes it stand apart from most of the typography on the web. It’s also an ideal illustration of what a site can be when typography takes center stage. The end result is a site that captures the visitor’s attention with atypical type and even color.

Combine Different Fonts and Font Styles

Some designers are hesitant to incorporate more than one or two font styles on the same webpage because they fear that anything more will lead to disharmonious typography that can drive users away. Tom, Dick and Harry Creative Co.’s website will make those designers reconsider their hesitating point of view.

Look at how many different fonts and styles the site’s homepage has, whether you’re observing the header, the graphics or the columns. In spite of this – perhaps because of this – the site is extremely attractive and designer eye candy. See how the site’s typography is enhanced by virtue of spacing, contrast and various shapes and sizes? You can combine different fonts and styles all you want, as long as you contrast and space appropriately.

Take Simplicity and Put a Spin on It

You can never go wrong with minimalism, if you can just convince yourself that simpler and basic are not pejoratives.

Meet Ben Lind, a web designer whose motto is all about being simple and clean. Now, meet his website.

Right away, you’re blown away by the stripped-down aesthetics at work on the homepage, just because they work! All he’s had to do is utilize a fundamental sans serif font and then position it in an askew way to create typography that’s equal parts interesting and very basic. This is a wonderful example of taking the basics, putting an unexpected spin on them and creating something that stands out.

Contrast Impactful Font With a Solid Background

Powerful contrast is eternally effective in typography because it makes an impression and catches the eye! There’s hardly a better contrast combination than white font on a solid-black background. Nonetheless, the use of a black background on a site can sometimes be related to a non-mainstream site, but if black happens to be your brand’s color, then you’ve just got to go with it.

A prime example is New Zealand’s Black Estate Vineyard website. Black Estate is a vineyard whose brand color is black … so what does its web designer do? Ingeniously use the black color as the site background to contrast with the sophisticated and bold sans serif fonts in white. Not only does this make for easy reading, but also for the type of sophisticated typography one expects from a wine website.

The Benefit of Paying Attention to Typography

Typography can make or break your website. It’s what’s standing between your site visitors enjoying their user experience or leaving your website as fast as they possibly can! So…take care and be meticulous when designing the type and font on a site. Decisions about typography should never be rushed and taken lightly.

We’ve already seen what happens when site designers think carefully about the style and size of type they use on their websites. All of the examples above are noteworthy because they give users something to talk about…in a positive way. Their typography is familiar or instantly recognizable, stands out, uses minimalism and effectively contrasts elements on a page. In short, they all work wonderfully.

Conversely, sites where designers failed to spend time thinking about typography are obvious, too…in a not-so-positive way. You’ll notice them also, but because of how hard to read their text is, how unattractive their font styles are and how boring their type is. So what site would you rather build?

Got something to say? Agree or disagree with the typography examples used in this piece? What’s your idea of typography that works and that doesn’t? Feel free to unload your thoughts and opinions in the comments!