Are you looking for a comprehensive guide to typography in web design? One of the vital roles of web design is communicating the intended message to the audience in the best way possible. As a Singapore website design agency, it is essential that we establish a strong connection between the user and the website. This connection will ensure that your business accomplishes its set goals and objectives.
In the context of Singapore website design, communication not only refers to visuals but also the text/typography used on the site. Before we look at the guide to typography in web design, it is important to note that over 95 percent of information on the internet is in written language.
Using the right typography will make it effortlessly easy for the website users to read and understand your content. Optimising your website typography is equivalent to optimising readability, usability, visual balance, and accessibility.
What Is Typography?
In his book, ‘The Elements of Typographic Style,’ Robert Bringhurst, a Canadian typographer defines typography as the craft of giving human language a durable visual form. More so, typography transforms language into a decorative visual element. Typography can also be defined as the science and art of appearance, font style, and structure with the aim of delivering aesthetic and easy to read text.
Typography should be at the centre of your website design whether it is for mobile apps or websites. So, for you to be successful in creating exceptional web design, you need to understand how to use typography to achieve your goal.
Guide to Typography in Web Design
Don’t Use Too Many Fonts
Keep the number of fonts on your website at a minimum to avoid making your site look unprofessional and unstructured. On the same point, too many font type styles and sizes will ruin the layout. In most cases, two fonts are enough and in some instances too much.
You should also strive to stick to the same fonts that you select throughout the website. If you decide to use more than two font families, make sure that the two complement each other based on character width and appearance.
In the combination below, Verdana and Georgia create a harmonious pairing because they have similar values.
Use Standard Fonts
Google Web Fonts and Typekit provide interesting fonts that can breathe freshness and uniqueness to your website design. Here is a guide on how to use Google Web Fonts for this purpose.
- Choose a font from the list available
- Generate a code and copy-paste it to your HTML document’s <Head>
One of the downsides of this strategy is that most web users are accustomed to reading text that is presented in the standard formats. To be on the safe side, stick to the standard fonts unless your website needs to create an immersive user experience.
Note that good typography will draw the reader to the content, not to the font type itself.
Reduce Line Length
One of the secrets to enhancing readability is by having the right number of characters in every line. Your website design should not dictate the width of your text. According to the Baymard Institute, 60 characters per line are enough to offer the best reading experience. Concisely, having the right number of characters in each line is essential to improving your text’s readability.
When designing a mobile version of your site, make sure that each line has between 30 and 40 characters. In the example below, the first site has 50-70 characters in each line and the second one has 30-40 characters.
This is a classic example of why you should only hire a professional website design agency in Singapore. The designers will make sure that the number of characters in each line is optimal.
Go for a Typeface that Adjusts to Different Sizes
Singapore has the highest smartphone penetration in the world. Your website visitors will use different mobile devices to access your site. Different screen sizes mean varying resolutions. Therefore, it is essential to choose a typeface that can adjust to different font sizes and weights without compromising readability and usability.
Confirm that the typeface used by the website design agency is legible on small screens. Avoid fonts that make use of cursive script such as Vivaldi that looks elegant and beautiful, but it is almost impossible to read.
Avoid All Caps
What do we mean by all caps? We mean text where all letters are capitalized. Caps are OK in sections of the website that do not require reading such as acronyms and logos. However, when the message you want to put across involves reading, do not force potential clients who land on the site to read all caps text.
As noted by Milers Tinker, all-capital print reduces the speed of reading and scanning content compared to lower-case type.
Spacing between Lines
The spacing between two lines of text on a website is referred to as leading or line height. You can easily increase leading by increasing the vertical white space between text lines. This move will improve readability in exchange for screen space.
One rule that you should always adhere to is that leading should always be 30% higher than the height of the characters if you want to achieve good readability.
Studies have also proven that leaving the right amount of white space between paragraphs increases comprehension by approximately 20%. One way of achieving this goal is by removing extraneous details and providing your web users with an amount of content that is digestible.
Sufficient Colour Contrast
Colour contrast will make the most important elements or sections of your text stand out from the rest thereby making it easier for web users to scan or read the content. Here are the recommend contrast ratios for both image text and body text.
- Large text: Contrast ratio of 3:1 against the background
- Smaller text: Contrast ratio of 4.5.1 against the background
After selecting the right colour, make sure that you carry test it different devices and real users to know if you need to tweak it. If any of the test results show a problem, rest assured that other users would encounter the same problem if you do not rectify it.
Don’t Use Blinking Text
Sure, you want to grasp the attention of your website visitors the first three second after they land on your site, but flashing or flickering text will not help you achieve that goal. Such text can cause seizures to susceptible website users and distract them from the essential parts of the website.
Colour Text in Green or Red
8% of total men population in the world is colour blind. Green and red blindness is the most common form of blindness in men across the globe. Based on this fact, it is recommended to leverage other cues to make essential information stand out from the rest instead of colouring it using green or red colours.
Let’s look at how we can use typography in UI design:
Size Matters A lot
It is common to see that many designers incorporate text elements that vary in size for example, section headers, field labels, button copy and more. Generally, some typefaces are best suited for large sizes while others look best when used for letter forms or in small sizes.
With that said, you will need to consider the scalability of the text if you have a typeface that you want to apply to small labels and large headlines. While you will prefer a typeface that looks a certain way; consider one that is compatible with multiple sizes, and those that promote usability and readability.
One of the worst things that you can do in typography is to have letters that are not differentiable in a sentence or a body of text, and this makes it difficult to pass on the message. Studies show that figures are often neglected compared to letters when deciding the attributes of the fonts of a project.
For example, uppercase I’s and lowercase L’s are easy to confuse. Another case is when a lowercase R and lowercase N; if placed together some fonts will make it look like lowercase letter M. Be wary of fonts that get this mixed up and choose fonts that pay attention to legibility, typeface, details, and letters.
There is more to this tip, and you must consider the several factors such as:
Statistics show that we come across lowercase letters 95% more times than we encounter uppercase letters. However, you need to keep a large difference between upper and lowercase letters to enable you achieve a clear typeface. The best thickness for a character stroke should be 18% of the height of the letter x, which is known as x-height.
- Wide Proportion
This refers to the thickness or width of character outlines relative to its height. In most cases, a lighter typeface is clearer than characters or letters with a heavy typeface. The proportion has a correlation to counters (covered below), and it enables non-modified character shapes. Wide letters are preferred to compressed letters since they give better letter recognition and improve the legibility of the text.
This is the space within the letters, d, o, b, e, and u. Typography experts believe that the larger the extent of counters in a body of text, the better a reader will be able to recognize the letters.
- Letter Spacing
If the text is bigger, you need make the spacing smaller and relevant to the size of the text. When you couple large letters with large spacing, the typeface appears too open, and this prompts you to set the spacing manually. Manually setting the spacing is only applicable to headers in UI design.
This refers to the quality of the overall reading experience, and it is defined as the ease with which we can recognize headers, paragraphs, sub-headings, blocks of text, as well as understand the displayed text. You can think of it as some macro typography that makes the text attractive to encourage site visitors to read the content.
To leverage on readability as part of your typography, you need to manage the colour of the text, contrast, composition, size, among other aspects to enhance the reader’s experience.
Here are points you should consider to improve the readability of your text:
- The Serif Fight
Traditionally, serifs were thought to be more legible, and printers preferred them and would incorporate it in large block texts. Serifs enable eye flow through the body of the text, but it is not the case with text on websites and mobile. Sans-serif fonts have high readability, especially when used on simple letter forms. These are better for smartphone applications as well as website content publishing.
- Line Height
The golden ratio in readability regarding line height is that you ought to multiply the letter size by 1.618 and the resulting figure should be the line-height to use. With time, however, you will be able to predetermine the line height according to your UI needs, since you are at the liberty of tampering with the rules whenever necessary.
- Text Block Width
If your text block is too wide, then reading it will be too tiring for the eyes, and if it is too narrow, the reader will try to follow each line and thus hinder the reading flow. The ideal width of your text block should be between 50 and 70 characters per text line, and this will keep your readers engrossed in what you have to say. Website development company teams have software for measuring this accurately.
- White Space
White space reduces the amount of text that your visitors will have to read at a go. This improves readability and avoids the page from appearing as congested. The white space forces the eye to notice the layout, and in turn, it gives the allure of order and finesse of the content.
The hierarchy of your text determines the reading pattern, and it gives guidance to the reader on how to separate the header from the subheading and the body of text. You can use contrast, margins, text sizes, and more to accomplish the hierarchy of text. However, you need to experiment with the hierarchy to improve readability.
Rhythm and Repetition
The essence of repeating any element used in UI design severally is to achieve unity of the content. You can achieve repetition using boxes, text size, colours, margins, padding, as well as text background. With repetition, your text and UI design will gain a rhythm.
Scenarios in View
When you are almost finalising the text that you will incorporate into your UI design, you need to look into different scenarios the text will be used. An example is an alert message. The original text needs to stand out from the text in the alert message.
Use the Actual Text
When you are testing how the text will behave in different scenarios, you need to use the actual text. The letters in the actual text are more important compared to placeholders, despite placeholders being useful in some cases.
Test the Typeface
When it comes to the testing process of your typography, you should do it on the actual platform. This means that if you are creating a smartphone application, you need to test it on a mobile platform.
We hope that this guide to typography in web design will help you make the right decisions when designing your website. Your best bet is a professional web design agency in Singapore that is committed to creating custom designs for local and international businesses. Get in touch with us for the best web design services in Singapore.