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

College Startup Seeks Mobile Developers To Help Build Vision

College Startup that needs Mobile Developer for both Android and IOS. We are also looking for a designer with job descriptions below. Front End Web and Graphic Developer: They must be ... (United States)

Need Skilled Web Designer To Suggest/direct Our Dashboard

We're building a web app dashboard that has a social/communication/planning component, and we simply need another set of eyes to take our typography and font hierarchy to the next level. The job: ... (United States)

Developer Needed For Creating A UIKIT Framework On ReactJS

Deliverables : Responsive UIKit Components for Web, Tablet, Mobile that includes basic UI Elements ( Icons, Images, Typography, Labels ), Buttons, Switches, Section Tabs, Carousels with Pagination, ...

Stardust Magazine

Hello, Looking for someone who can provide me with old editions of Stardust magazines from year 1988 to 1995 . In addition to the posted budget, I will also cover the price of the magazines plus ... (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.