cta quote button US

A Brief Guide to Typography in Web Design

Typography in Web design has come a long way since the early days of the Internet when designers were extremely restricted by a small selection of Web-safe fonts and a limited variety of styling options. Today, every website has the opportunity to look unique, making the Internet an ideal platform for conveying a brand’s individuality and its message. However, with the far greater number of options available to us than we have ever had before, it can be tempting to try something too radical, and this can often end up becoming counterproductive.

Typography is not just about choosing the fonts for your Web design projects and distinguishing each one from the other. It is about defining your style and the entire look and feel of your website while also delivering excellent usability and encouraging visitor engagement. There’s a great deal to think about with typography in Web design, and this guide will help to steer you in the right direction and avoid some of the more common mistakes which novice designers make when trying to create something unique and personal.

Text Size

if_024_-_Text_Size_2860336Since the launch of Web 2.0, and the various Web design trends which followed it shortly afterwards, many designers have turned towards using smaller font sizes in line with more minimalistic designs. However, text content exists to be read, and by using excessively small font sizes, you’ll end up alienating a huge number of your visitors.

Not only do a lot of people have difficulty reading smaller font sizes – smaller text is also harder to read on the screens of mobile phones. Given the unprecedented rise in the popularity of mobile browsing, your chosen font sizes should be easily readable across the complete range of Internet-enabled devices. For bodies of text, you should stick to a minimum font size of 12 pointy though 14 or 16 is often better.

Colours and Contrast

if_004_393075There is a reason why the vast majority of body text on the Web is black written on a white background, as is the case with printed media. The simple fact is that black and white are as different from each other as two colours possibly can be, making it far easier to read. On the other hand, many people find it uncomfortable to read white text on a black background.

The black-on-white standard is generally preferred for text-heavy content such as blog posts and other articles, but there’s no reason why you can’t use different background and text colours in other situations. You may need to increase the font sizes to compensate, but there are certain colours which should never be put together in this way. Always make certain to choose colours which contrast well.

Typographic Hierarchy

if_hierarchy_2_143005The most effective way to differentiate between different elements of your content is to use varying type sizes, and in some cases, typefaces. However, in order to make your website visually appealing while retaining usability, it is important to establish a typographic hierarchy which you will use consistently throughout your website. This hierarchy will play a major part in defining the entire look and feel of the site.

Given that people usually have a shorter attention span while reading Web content than they do when reading magazines, it is particularly important that the most important content elements, such as headings and sub-headings stand out. For this reason, your headings should use a larger font size, and using a different font as well can also make things look better.

Extra Space

if_vynil_115772No one wants to see a wall of text filling up their screens, particularly when they are viewing websites on the large screen. With the limited space of mobile screens, this might not be such an important issue, but Web designers should take into account the full range of screen sizes in use today for browsing the Internet. Use responsive themes to make sure that your page content and elements scale appropriately.

Don’t be afraid of having plenty of blank space on your pages, since this actually helps to draw attention to the text without distracting your visitors. It’s also wise to use a line spacing of about 1502 of your text size so that each line stands out enough so that your readers don’t end up getting lost in it. Leave plenty of space to the left and right of your bodies of text for other important on-page elements.

Other Useful Guidelines for Usability

if_wired_seo-21_372177 (1)Just like the above, the following are also guidelines rather than rules for good typography, and a slight deviation from these guidelines can still work effectively in certain situations:

Stick to a small number of fonts. Two or three should be sufficient in most situations, whereas using more can make your site look untidy and your style poorly defined. Avoid ‘over-designing’ your text.

Stick to using sans serif fonts for the body of your written content. Serif fonts are fine for titles, and they remain popular in printed content too, but sans serif tends to look cleaner and more legible on the Web.

Take colour-blindness into account when using red or green for your fonts and text backgrounds. Approximately eight percent of men cannot differentiate between the two colours, or if they can, they do so differently to others.

Avoid using blue text, since this colour is used for highlighting links and using it is sure to distract and confuse your visitors as a result. Likewise, avoid using purple text which is also sometimes used for links.

Do not try to draw attention by using blinking or moving text. While blinking text used to be quite common online, it is now considered old-fashioned and unprofessional.

Always use commas to separate large numbers into groups of three digits. It is much quicker and easier to read the number 1,000,000 than it is to read 1000000.

As is the case with any area of Web design, you’ll likely want to spend some time experimenting to find out what best works for you. If you are still looking for ideas, don’t be afraid to do a bit of competitive research to find out what others in your industry are doing. If you are thinking about redesigning an existing website, consider asking your current visitors directly, such as by publishing an on-site poll.

Need Inspiration? Check Out Some Related Projects and Tasks

Seeking A UI Designer With BALSAMIQ & Web Design Experience

We are seeking a designer to support our lead designer in an existing project. The designer would create some mock-ups for the website and support future opportunities through wireframing (using ... (Canada)

CSS, Sass, Jekyll Developer To Help Fix Minor Glitches In

My personal web site is hosted at http://leonardomartins.com and its source code is updated and available at http://github.com/snitramodranoel/leonardomartins-com. It is static and based on Jekyll and ... (Brazil)

Rework A Web Design

Hi, I have an uncompleted web design. I'm looking for devoted people to share their experience and expertis. We want you to inspire us and take our web design to the next level Almost of the web ... (France)

Designer Needed For Custom Font Creation

I am looking for a designer to create up to 75 custom fonts for a mobile app. We need a wide variety from Serif, Grunge, Block, handwritten, script etc. Must be in TTF format. Please see some ... (United States)

These results are based on the freelance jobs extracted from Upwork.

If you think your friends/network would find this useful, please share it with them – We’d really appreciate it.

Leave a Comment

We would be glad to get your feedback. Take a moment to comment and tell us what you think.