An attractive user interface, an eye catchy looks, and rich user experience are few of the important things of a successful website or web application. Every company wants to build a perfect and successful website. A perfect design is the one which gives a high user experience (UX) to its viewers and that is not possible without following all the rules and principles of designing. Two elements which play a major role in segregating a design of website to bad, good or great are its typography and colour.

What is Typography and how to use it in a website?

To know the impact of typography and which would be the correct typography to use in your website, we need to know what exactly does the word means. Typography is basically, the structure, size, anatomy and curves of an alphabet used in the website. It shows how the alphabets of an area are represented. To provide a great impact of the text typed on the website, we need to take care of:

Choosing the font:

It is very essential to choose a correct font type. A font should be such that is readable and clear.

A font can broadly be divided into two types, the serif font and the sans-serif font. A serif font is a font, which has a small line at the ends of a character. This line marks the corner of the character. Some serif fonts are ‘Times New Roman’, ‘Century’, ‘Baskerville’ and ‘Georgia’. A sans-serif font is one which has no line marking the end of the character.  Some sans-serif fonts are ‘Arial’, ‘Calibri’, ‘Helvetica’ and ‘Verdana’.

There are loads of free and paid fonts available on the internet today. Depending on our usage, we may download and use the same. To embed an external font in our website, we use the font face property which is used as:

@font-face {
     font-family: (a name for the font);
     src: url(location of the font file);
}

Once we are done with the selection of the font, we need to take care of some more points while typing text. These are:

1. Size of font: The size of the font should be set according to the importance of the text and its quantity. The headings of the page should have a descending order of sizes, i.e., h1 should have size 1-2 points greater than h2, h2 greater than h3, and so on. The font size of the text should be big enough to be readable. Normal paragraph size ranges between 12pt and 15pt.
2. Leading: The leading in the text is the distance between two consecutive base lines. It makes it easier to read the text without any hindrance. Sometimes it happens, while reading a paragraph we switch to the next line in the middle of the first line. This happens due to poor leading. Ideally, the leading should be somewhere around 1.3-1.5 times the font size.
3. Tracking: Tracking is the distance between selected characters. This is generally used to write character combinations like ‘AV’ as ‘AV  ‘, ‘TA’ as ‘TA  ‘, and so on.
4. Kerning: Kerning does the similar work as the tracking, but applies it on the whole document.
5. Highlighting: Highlighting is used to bring some particular text/keyword to the reader’s notice. This is generally done with keywords in a sentence or with headings. Highlighting is generally done in two ways: by underlining and by using bold or italic characters.

Using the above parameters carefully, makes our text look beautiful and also becomes readable. Readability is the measure of ease by which we can read the text. A readable text is always preferred over a non-readable one.

Colour for Web

The next major factor that influences our design is the colour scheme used. As pictures have a greater impact on a person’s understanding than words, colours also influence the human brain perception to a great extent. Colours reflect the way our eyes perceive the design and also influence one’s mood.

Before we can study about colour, we need to understand about the colour wheel. The colour wheel is a wheel consisting of different shades of and mix of 6 basic colours, red, orange, yellow, green, blue and purple. The colour wheel helps us to compare the colours and pick up the correct one.

Colours can be divided into different modes:

1. RGB– RGB stands for red, green and blue. This mode of colours is used for electronic media like websites, TV adds, etc. In this, the screen consists of small dots of red, green and blue colour. The visible colour is the result of the amount of illumination of each dot.
2. CMYK– CMYK stands for cyan, magenta, yellow and black. This mode of colours is used for printing like the magazines, posters, etc. The printers consist of inks of these colours, which according to the value, are applied over the paper.
3. Pantone– Pantone mode is the standardization of the colour. With the help of standardization, the shade of the colour remains same, no matter the number of different manufacturers.

Colours can also be divided into different categories like:

1. Primary Colours: Primary colours are the building blocks of other colours. These are three basic colours, red, yellow and blue, which cannot be created by mixing any other colours. These are bought in some or the other form.
2. Secondary Colours: Secondary colours are formed by mixing two primay colours. These are violet (red + blue), orange(red + yellow) and green(yellow + blue).
3. Tertiary Colours: Tertiary colours are formed by mixing one primary colour and one tertiary colour. This can range upto endless colours, using the tints and shades of each. Some of these can be formed by mixing red-orange, yellow-green, blue-violet, etc.
4. Complementary Colours: Complementary colours are the colours which lie on the opposite sides of the colour wheel. These are the contrasting colours like red-green, blue-orange, purple-yellow, etc.
5. Analogous Colours: Analogous colours are the colours which lie on the same side of the colour wheel. They are the neighbouring colours and provide a soothing and subtle look.
6. Monochromatic Colours: Monochromatic colours are the tints and shades of the same colour.
7. Warm Colours: Warm colours are the colours which provide a warm feeling to the viewer’s eyes. These include colours like red, orange and yellow. These are the colours of fire and represent emotions of energy, passion, impulsiveness, happiness, coziness and comfort.
8. Cool Colours: Cool colours are the colours which provide a cool and soothing feeling to the viewer’s eyes. These include colours like blue, violet and green. These are the colours of water and grass and represent the emotions of calmness, trust, professionalism, sadness and melancholy.      

Understanding the above models and classifications, we now need to see how to chose the colour suitable for our website. To choose the right colour for your website, you need to look into some factors like:

1. Nature of the website: We first need to see the nature of the organization or the product for which the website is to be made and select the colour accordingly.
2. Target audience: We need to analyse the set of target audience and use the colours accordingly. For this, we need to check the age of the audience, the gender of the audience and the class of the audience.
3. We need to choose contrasting colours such that the text of the website is easily visible and readable.
4. Use right number of colours: We should not use many colours in our website and make it look like a circus. And must not use too less colours such that our website looks boring.

Following all the above points, can make our website design look great.