First of all, what is typography? Well, typography is what you’re looking at right now, text. The design and form go into each letter so our words can be visually displayed. We need typography so our words are legible and displayed clearly for readers whilst maintaining a visually appealing aspect to them to keep the reader drawn.
So what is typography in web design? This blog will describe the different aspects of typography in web design to help you determine the good from the bad and the ugly. We aim to give you some pointers into what fonts and styling you should choose for your website.
If you are looking for a library of readily available web fonts check out Google Fonts for a wide selection of useful and clean fonts.
I am going to start with the most common and critical aspect to typography in web design and that is the choice of font. There are many types of fonts out there all with their own unique styles and designs; saying there are thousands of fonts would be a vast understatement.
Fonts come in many different styles, sizes and shapes but can all be boiled down into four main font categories: Serif, Sans Serif, Script and Decorative. Fonts may fit in multiple of these categories but these categories are still important when it comes to choosing the right font for your website.
People often say size doesn’t matter but when it comes to typography in web design it most certainly does. Having your text too small and it will become illegible and not friendly for any of your older users or those with eye problems. Having your fonts too big, however, will look jarring and will lower the quality of your website design.
The industry standard for body text in web design is 1em that is usually set to 16px. This being said you may lower or raise the pixel count for your body text size to however you see fit but 16px is generally the agreed upon size when it comes readability against design.
Line height is just as important as the setting of typography in web design as size is. Although the importance of line height is not immediately apparent when you have just a few words it is when the sentences and paragraphs start forming is when you realise its use.
The line-height on text determines the amount of space left below the letters so when the paragraph collapses there is a gap between the two rows of text. Using our above-determined scale of 1em = 16px it is the best practice to set the line height of your body text at 1.25 – 1.5 depending on browser size. It is best to have a smaller line height on smaller devices such as mobile and tablets with a larger line height being on the desktop.
Tracking, also known as letter spacing, is the typography in web design that calculates the individual gaps between each letter. The letter spacing, although it is important, can usually be left as is unless you have any special design ideas. In web design, the letter spacing can be set to the value of ‘normal’ which will calculate the default letter spacing of the font in use. If you do prefer, you can set the letter spacing as a px or em value.
Finally yet importantly is the colour of the text. Colour is not usually thought of as an aspect of typography in web design as it is commonly changed and isn’t really considered when changing the design of the text. Colour does depend more on the look and layout of the website rather than the text itself but it does affect the look and feel of the typefaces.
The font style does depend on the colour that you choose, as deeper and darker colours will make the font feel thicker whereas the lighter colours will make the font look thinner. This also depends on the background your font is on, as a background colour will absorb the font if it is too dominant but a recessive colour will let the text prevail. If you are having issues with your colour selection, you can check out our Colour Theory Blog for some colour combination and design ideas.
So that’s it, the main elements and uses of typography in web design. We have covered the different fonts you can choose and what other aspects of the lettering you can take into consideration when building a website. We have explained what typography is and what uses it has. If you want to read about more design trends and tips why don’t you check out our Web Design Trends of 2018 Blog and our Web Design Top Tips Blog.
If you still need assistance with your website design or would like to talk to us for any website design related reason you can contact us on 01925 563 960 or contact us using our contact form and we will see how we can help you.