Typography in Web Design: Part 3 How to style text on the world wide web

We are midway through our Typography in Web Design Series – we are flying! To get you up to speed, so far we have explored the main categories of typeface, their history, characteristics and how they lend themselves to businesses today. We have also discussed all the various factors to consider when choosing your typeface.

So, what comes next? For part 3, we are going to talk about all the ways in which you can style a typeface. If we could get you to cast your minds back to part 1… 

(If you didn’t read it – or have forgotten – here is a reminder.)

A typeface is a set of characters and symbols (alphabet, numerals, punctuation and special characters) that share a common design. For example, Arial is a typeface.

A font is a particular set of characters and symbols within a typeface. For example, Arial Bold 14pt is a font.

A typeface then is the equivalent of a make-up free model or the bare bones of an architectural space. With a dash of make-up or a lick of paint, both the model and a space can be elevated and transformed. In the same way, with a bit of styling treatment, a typeface can have a glow up, flourishing into a full-fledged font! 

There is a very strategic element to styling text on the web. You want to use it to establish a visual hierarchy. A web design with visual hierarchy is one where the elements have been organised in terms of importance; the most important will feature more prominently. We will talk about it in more detail in part 4. 

For the purposes of this blog, we want to first introduce you to all the tools in the toolkit. We will discuss the various techniques you can use when styling text, plus when and how they should be used. Remember, when styling text for digital content, you must always have clarity at the forefront of your mind. What would be the point of some beautiful looking text that you cannot read? None.

So without further ado, here are all the ways in which you can style text:

Size

Let’s start with an obvious one: adjusting the size of your text. By making some snippets of text larger than others on your website, you instantly create a sense of visual hierarchy. This helps to guide visitors' eyes around the page. They can find the larger, more important bits of information more quickly. It also creates a sense of movement and dynamism within the design, which is interesting and keeps visitors engaged.

When it comes to web design, it is best to measure font size in the unit of pixels (px). Why? Pixels are a standardised unit online. What that means is they will appear the same size across all devices and web browsers. Using other units such as points (pt) is less reliable. You could be looking at the same website on different devices and the size of the text seems wildly different. It’s a head-scratcher!

Weight

When we talk about weight in typography, we mean how thick the lines of the text are. Unlike the other styling treatments included in this list, font weight is very much down to the discretion of the typographer. They decide whether to make a typeface available in various weights. Not all typefaces are available in all weights. Some may only exist in one whilst others exist in multiple. The most common weights are regular and bold. 

Here is a list of other font weights you may come across: 

• Thin

• Extra-Light

• Light

• Regular

• Medium

• SemiBold

• Bold

• ExtraBold/Heavy

• Black

If the typeface you are using isn’t available in different weights, but you really want to adjust it, there is a workaround. With a bit of technical know-how, you can amend the font weight in the CSS code of your website. However, you will first need to check whether you are permitted to do so as per the terms of your licence agreement.

There are no definitive rules when it comes to font weight. It is a case of experimenting and figuring out what looks best. Your decision will be based on other stylistic elements of the text and the amount of spacing. The bolder you go, the more the text will stand out!  A top tip is to choose a typeface that is available in different weights to give you room to be creative and mix it up.

Bold

Bold text can create impact. It can draw your eye to significant keywords, headings and call to actions. However, if you apply the bold treatment to your text too liberally, you run the risk of it losing its impact. That text will no longer stand out from the crowd, it will become the crowd. Furthermore, too much bold text can make your screen look quickly cluttered and thus tricky to read.

Italics

Like bold text, italics draw attention but in a different way. It is a device used in copywriting to highlight quotes, foreign words, definitions and longer titles (books, movies, music albums). Shorter titles tend to be punctuated with quotations. Its application can vary from business to business, depending on the style guide they follow and what has been stipulated. 

However, a word of caution and something to consider with italics. Italics have proven to make text less legible for users with dyslexia. The British Dyslexia Association says that italics “can make the text appear to run together and cause crowding.” Therefore, it is a styling choice that should be considered carefully.

Underlining

Don’t do it! It is best to avoid underlining text on the web. Underlines on the world wide web are generally associated with hyperlinks. If you use one to draw attention to a word, it may draw the wrong kind of attention. It can end up looking like a broken hyperlink, which never looks good! If you tried to click the above subheading, case in point.

Colour

It is advisable to keep the colour of your web text uniform on the whole. However, there are instances when you can use colour sparingly to draw attention. Text elements such as headlines, buttons and links can really benefit from a splash of (a different) colour. These elements are meant to stick out! Their dominant presence makes navigation more instinctive for the user.

However, there are some colours to avoid. A very specific shade of blue is synonymous with hyperlinks. If you use it, visitors to your website may try to click it and end up confused that they haven’t been taken to another page. So please avoid using hyperlink blue (hex code #0000EE). 

The festive combo of red and green, should never be seen in web typography; particularly, as a means to differentiate between two elements. Any visitors to your website who are colour blind, will not be able to distinguish between them. In fact, it is a good practice not to rely on colour alone to create emphasis. Instead, combine the use of colour with other styling elements such as bold, to ensure that everyone can understand the text’s importance. 

Beyond the text in and of itself, you also need to consider the colour of the background it features on. There needs to be enough contrast between them so that people can actually comprehend and read the text. We will discuss this in greater depth in part 5 of this series.

Highlights

This text styling technique tends to get overlooked. Maybe it is because the word triggers unwanted flashbacks to school work and revision…?  But highlights! In the same way that bolding and italicising draws attention to snippets of text, so too does highlighting. 

Highlighting is a particularly useful tool when you want to emphasise larger portions of text. Excessive application of bold or italic styling can make your text look noisy or cluttered. Highlighting on the other hand, creates the illusion that the background has changed rather than the text itself, which looks unaltered. It is a lot cleaner.

Deciding to highlight is a bold design choice. It can become a design element in its own right. It presents another opportunity to flaunt the brand colours in a meaningful way. It can add character, bringing a fun, playful dimension to your web design.

When highlighting, our advice is to experiment. Play around with colour, transparency and thickness until you get the look you want. It may be preferable to go for a light, unsaturated colour, so as not to disrupt the colour contrast whilst still getting the desired impact. As we have said with most items on this list, don’t get too heavy handed with the highlighter, as it will lose its power. 

CAPITALISATION

The American author Miles Tinker conducted many studies and wrote multiple books on the subject of the legibility of print. In the abstract of his paper “the influence of form of type on the perception of words,” he sums up his findings on capitalisation. 

He found that although individual capital letters were easier to comprehend at a distance, words were more perceivable in their lower case form. As a result, more misreadings occurred when reading lower-case text rather than capitalised text, because it was easier to perceive and read the words at speed.

The findings of this experiment inform web design today. Designers frequently use capitalisation for titles and headings to make them stand out more, or short phrases of text which are not too taxing to read. 

However, capitalisation tends to be avoided within the main body of the text. The Nielsen Norman Group carried out some research into How Users Read on the Web. They found that “79 percent of our test users always scanned any new page they came across.” Therefore, lower case lettering is preferable as it is easier to perceive and scan at speed.

Finally, there is also the issue of internet etiquette. Writing all in UPPERCASE has become synonymous with shouting or yelling at someone! Whenever you use capitalisation, take a step back and make sure it cannot be misconstrued as aggression…unless, of course, that is your exact intention!

Conclusion

There you have it, the complete text styling toolkit. When styling text for the web, you can change the size of it or adjust the weight. Bolding, italicising, highlighting and applying colour can make the text pop! Capitalisation is a powerful tool for titles and headings. But avoid underlining so your text doesn’t look like a broken hyperlink.

Every which way you decide to style your text, it is important to achieve consistency throughout your website. You can achieve consistency by specifying any typography styling rules in a brand style guide or copywriting guide. 

For the next instalment of this series, we will be discussing how to create visual hierarchy with text. You can learn how to practically apply all of these styling techniques to create a user-friendly, online experience.