Guide to Typography When Designing Your Website in Singapore

guide to typography in web design

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.

get google ranking ad

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.

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.

guide to typography in web design

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.

  1. Choose a font from the list available
  2. 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.

guide to typography in web design

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.

guide to typography in web design

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.

guide to typography in web design

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.

guide to typography in web design

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

guide to typography in web design

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.

guide to typography in web design

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.

guide to typography in web design

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.

 

Author Bio

Tom Koh is widely recognised as a leading SEO consultant in Asia who has worked to transform the online visibility of the leading organisations such as SingTel, Capitaland, Maybank, P&G, WWF, etc. Recently he was instrumental in consulting for a New York-based US$30B fund in an US$4Bn acquisition. Tom is a Computational Science graduate of the National University of Singapore. In his free time he performs pro-bono community work and traveling.
Google+

Leave a Reply

Your email address will not be published. Required fields are marked *

Get FREE Website & Digital Marketing Quote Today!

Go top
close-link
close-link