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.
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.
Serif
A serif font consists of small lines, called serifs, attached to the endpoints of letters. A popular example of a serif font would be Times New Roman. This type of font can be used as either a body or a title font but are more commonly used on printed media rather than in web design.
Image source: https://dribbble.com/shots/4811525-Article-Header
Sans Serif
Sans Serif fonts are letters without the serif on the ends and instead have flat endpoints. Helvetica is a good example of a sans serif font. In web design sans serif is probably the most widely used font type due to its clean and clear readability even on lower resolution monitors. The most popular use for sans serif is as a body font but very commonly used as title font too.
Image source: https://dribbble.com/shots/3538223-Web-Design-Touchstone-Innovations
Script
Script fonts, also known as handwriting fonts, are a type of typography that appears like it has been written by hand and is usually displayed in cursive. Sometimes with handwriting fonts strokes connect to one another so it is best not to tamper with the letter spacing when using these. Qwigley would be an example of a script font.
Although this font can be used in web design it is often avoided due to its difficulty to make out sometimes and that it cannot really be altered much using other typographic techniques without the font looking messed up. That being said the font can still be used to add a bit of splash and style to a web page just don’t expect to see it as the main font.
Image source: https://dribbble.com/shots/4905259-Smooth-River-Font
Decorative
The fourth and final font is a Decorative font. These fonts are the quirky and outlandish fonts that have fun flairs and are designed with more style in mind rather than legibility. The Algerian font is a good example of a decorative font. This type of font is not often used in web design due to the novelty aspect of it. When it is used it is used sparingly and as a title font, it is not good practice to use this type of font as a body font whatsoever.
Image source: https://dribbble.com/shots/5283128-Hillingdon-Font-Extras
Size
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
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.
Letter Spacing
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.
Colour
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.
Conclusion
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.
