Using Typography for Great Web Design

Unfortunately, you don’t see typography mentioned as often when talking about good website design. The truth is, however, that it is one of the most important aspects of a good design. Don’t believe me? Change your website’s main font to Comic Sans and see what happens. Exactly.

Communication is the pillar of your relationship with your website visitors (potential clients), and the way you communicate with them is through text. Naturally, you’ll want to ensure that just like with everything else on your website, reading your text is also a pleasant experience.

Anyone can choose a typeface but choosing the right one can be pretty tricky. It might seem simple, but there are actually quite a lot of things to consider, such as legibility, flexibility, emotion, even personality. Letters are never just letters and they have to fit in with your overall aesthetic and brand.

Before we move on, let’s get one thing out of the way: what’s the difference between a typeface and a font? Well, it’s pretty simple: Helvetica as a whole is a typeface and fonts are part of typefaces. Fonts describe a typeface’s weight, style, and size. While it’s true that “font” is often used as a stand-in for “typeface”, it’s not technically correct. It’s ok most of the time, it’s pretty common, but it is worth knowing that if you get technical, it’s just wrong.

The basics of typography

Typography describes the use of type in design. Its purpose is to create greater meaning by carefully selecting font, color, size, alignment, layout, as well as other factors which affect the type’s design on a page.

There are two major categories of fonts: serif and sans serif fonts.

A serif font has serifs, which are extra embellishments at the end of stokes. They are sometimes called feet or tails.

Sans serif fonts lack any serifs and there are no extra details on the end of letters.

What to consider for web typography

There are multiple differences to consider on the web versus in print, such as color, contrast, readability, and size.

Screens create color through light, and contrast becomes more relevant because it can be straining to read text with poor contrast. Since black and white provide the most contrast, black text on white ground is always the easiest to read.

While serif fonts are preferred for print, the opposite is true for screens. Sans serif fonts have been proven to be easier to read in copy body because serifs tend to make following the text tougher for the eye.

Serif fonts can still work fine in the body if you increase the font size and line height — the amount of vertical space between lines of text, also known as leading. On the other hand, serif fonts are great for headlines and headings because they are actually easier to read when the amount of text is limited. At the same time, they also give headlines and headings a distinct emphasis.

Size is also a very important factor to consider when choosing a font style. If the text is too small then it becomes hard to read, and if it is too big it will take up too much unnecessary space. Try and find a balance between good legibility and good design.

Digital typography and its challenges

Print design doesn’t present many challenges as there are extremely few variables in how users will interact with it. There is no shapeshifting involved, colors are tightly controlled, and typefaces are static, regardless of who and how they are holding it.

Digital typography, on the other hand, is much more fluid and there are multiple factors which can contribute to how it is displayed, among which are:

· screen size — screen size can’t be predicted, but responsive designs are a working solution for any shifts in dimensions. Typesetting, however, can sometimes be pointless because of the varying screen sizes.

· screen resolution — pixel density is crucial to text legibility. While most people these days use devices with high resolutions, designers should still keep in mind the few who are using older technology.

· screen calibration — a screen’s brightness levels will affect how it displays colors, so any color choice in web design should accommodate any settings on readers’ devices.

Choosing appropriate fonts for reading on a screen

Typeface options along the years have increased significantly to the point where we have a myriad of choices available for all our design needs. There are countless typefaces today that have been designed with screens in mind and have certain nuances which enhance their legibility.

Google Fonts, Font Library, and Adobe Typekit are only a few libraries which offer easy integration and numerous choices for designers.

Web safe fonts

Web safe or web standard fonts are groups of select fonts which are typically available on every computer.

The idea behind classifying these fonts like this is that choosing any one of these fonts for your design will ensure that you have better control over how your text looks like across devices and operating systems.

The most popular web safe fonts are:

· Arial (Helvetica on Mac OS)

· Time New Roman (Times on Mac OS)

· Verdana

· Georgia

· Courier

Other popular web safe fonts include:

· Impact

· Lucida Console (Monaco on Mac OS)

· Lucida Sans (Lucida Grande on Mac OS)

· Palatino

· Tahoma (Geneva on Mac OS)

· Comic Sans — but please don’t ever use it

· Trebuchet MS

Whenever you use any of these fonts, even if they are technically “safe,” you should still always include at least one fall back option in your CSS, just in case someone viewing your page doesn’t have the specific font you used installed.

Now let’s move on to optimizing your website’s typography and improving your visitors’ experience.

1. Don’t use too many typefaces

A general rule of thumb is to not use more than 3 typefaces, while 3 already being maybe too many. Too many typefaces will make your website look unstructured and unprofessional, and the same goes for using too many sizes and styles. It just does not look good.

Consistency is also key; when using more than one typeface, stick with them throughout your entire site, as using multiple different ones across your site can be a bit jarring and confusing for users.

At the same time, also consider whether the typefaces you are mixing work well together. Here are some tips:

· don’t use two fonts of the same classification for one layout

· don’t use two serif or sans serif together because this will lead to low contrast

· use different styles like light or bold

· lean toward minimalism

· stick with a single font until you master it

2. Consider line lengths

Readability is very much connected to line lengths. This is a simple exercise you can try out for yourself by creating a new document and pasting some text there using different line lengths. If the length is too small or if it is too long, reading text becomes difficult and unpleasant.

It’s typically considered good practice to have around 60 characters per line for a good reading experience on laptops/desktops, while 30 or 40 should be ideal for mobile devices.

3. Use typefaces that scale well

Your website users will be accessing it from different devices with different screen sizes and resolutions, so it’s important to pick typefaces that work well in various sizes and weights, ensuring your text is legible regardless of how people are accessing your site.

A good tip is to avoid cursive scripts. I know they’re beautiful, but they can be a pain to read, especially on smaller screens.

4. Use typefaces with easily distinguishable letters

The most common confusion is between uppercase “I” and lowercase “l”. Before choosing a typeface, try it out in different contexts and make sure it won’t be confusing for your users.

5. Choose an appropriate body text size

Type size generally depends on the distance at which the screen is from the user. Typical sizes are:

· 12–16pts for phones

· 15–19pts for tablets

· 16–20pts for computers

6. AVOID USING ALL CAPS

While you may be tempted to scream at your website users, don’t.

Capitalized text can work with very short headlines, but it’s generally better to avoid it. If you’re writing whole paragraphs, then absolutely do not use all caps. Capitalized text is generally harder to scan and read when compared to regular, lowercase type.

7. Consider line height (leading)

Line height refers to the space between lines of text. Naturally, if you smush lines together users are going to have a difficult time reading the text. Comfortable spaces will take up more screen real estate, but that’s really not a big deal when compared to readability.

It’s typically good practice to have a line height that is about 30% more than the character height.

8. Consider contrast

I talked about this in our article on 13 Steps to Make Your Website More Accessible: always ensure you have good contrast between your text and the background it’s sitting on for good readibility.

This one’s pretty easy. Of course, you’ll want to avoid using similar colors for both the text and the background as that will make the text hard to read.

9. Avoid red or green for accessibility

Color blindness is a fairly common condition, so don’t rely on just colors to distinguish important information. Red and green color blindness tends to be the most common form of the condition, so especially avoid using those in places where color matters — for example, a form where the only indication that a field is mandatory is its red label.

10. Avoid blinking text

In case you just came from the ’90s, you should know that blinking text on websites is a big no-no.

Not only is it annoying and distracting, but in some people, it might trigger seizures, and I’m not sure how likely those users might be to convert.

11. Remember to test

While using a guide is certainly a good idea when designing any onscreen experience, there are too many factors to account for a design’s successfulness without actually seeing it in place.

Test your typography on screens and settings which are on the far edges of average, such as high-resolution monitors, outdated smartphones, and screens with very high brightness levels. If your design passes such extreme conditions, then it is ready to be seen by the rest of the world.

Before we finish up, let’s take a quick look at why typography is so important for your brand and how it affects users:

· reinforcing your branding — just like your overall design, typography can set a specific style for your website that complements your brand.

· setting the mood — typography can help establish a certain mood or emotion. For example, a light and more playful typeface can signal that your brand is fun and doesn’t take itself too seriously.

· setting the tone — typography can convey a certain personality; it can give your website a voice of its own. While your copy may convey this personality, a typeface can reinforce it.

· encourage reading — as we’ve already seen, there are several ways to adjust and tinker with how your copy appears on the screen. With the right typeface and formatting, users will find it easy to read and will want to.

· make scanning easy — scanning through copy is more common these days since users have so much content drawing their attention, so improving their ability to scan the text on your website is certainly something you’ll want to take into account.

· improving accessibility — there’s a lot you can do to improve accessibility, and typography can certainly help, from text size and typeface to background contrast and line height.

I hope this article has done a good job of explaining in a nutshell just how important typography is to a website’s design. Bad choices can lead to users having bad experiences, and this does not bode well for your business.

For a convenient infographic that summarizes some of what we have discussed above, the good folks at Toptal have done a great job of it.