One of the easiest things to change your website's appearance is the font used and the font layout. Often referred to as Typography.
Typography is a lot more than just choosing beautiful fonts: it's a vital component of user interface design. Good typography will establish a strong visual hierarchy, provide a graphic balance to the website. Typography should guide your users, improve readability and accessibility, and ensure an excellent user experience.
People will often read an online text to find the information they are looking for or discover new information. Readability of your text on your website is essential.
If your website visitor gets tired of reading a long horizontal line, the text's left edge is more likely to get skimmed. If the viewer gets tired of reading a long horizontal line, they could accidentally read the same text line twice.
So what is an ideal text line length? Well, that depends on what source information you use. 2.5 times the Roman alphabet or 65 characters are often referred to as the perfect measure. The ideal range that designers should aim for is between 45 to 75 characters (including spaces and punctuation) per print line. Many web designers (including me) apply this rule directly to a web design.
Although there is no official minimum font size for the web, it is generally agreed that 16px for body text is an excellent point to start. Of course, some text will vary in size, i.e. the headers could be larger, but the main text should be a minimum of 16px. When deciding a font size think of your potential clients, for instance, older clients may have poorer eyesight, so choosing a small font size could make your text harder to read. It is also worth pointing out that most websites are now viewed on a mobile device. You may need to use a different font size and layout to improve readability and accessibility on those platforms. For this page, I have set the font size to 22px and a line spacing of 1.7em.
Find colours that provide maximum contrast, including enough contrast between content and background, so that the text is legible to anyone with low vision or colour deficiency. Think books, most websites use a black text on a white background, I favour a very dark grey text (almost black) on a very light grey background (almost white)
I think this the point that font selection and design becomes fun.
Should you go for Serif or Sans Serif? Serif typefaces are characterised by a decorative stroke at the end of the letters' vertical and horizontal strokes. A sans serif font does not have the decorative stroke.
An example of a Serif font would be 'Times New Roman', and an example of a Sans Serif font is 'Lato'.
Font Pairing. Font pairing is a key aspect of web design. Good font pairing can create harmony, fluidity, and most importantly—coherence on your website. One useful to remember is to use no more than 2 font faces across the website. Google fonts have a very handy tool that allows you to try out font pairing combinations that will assist in making beautiful font pairings. When choosing font combinations, pick fonts that your viewers will like, are easy to read and reflect the intent of your site.
Fonts to Avoid
Obviously Comic Sans ;-). But other than that there is plenty of choice of fonts to create amazing, dynamic and more importantly readable text. My personal opinion is that a font that resembles handwriting should be avoided on the body text and only used for heading when it adds something to the website, but as this just a personal opinion.
I hope you found my introduction to typography useful. Below are some links that may useful for reading up on the subject in more detail.
Further reading Typography.com, the website of Hoefler&Co. Hoefler&Co, is famous for creating typefaces, Hoefler&Co design fonts that help shape some of the world's leading institutions, publications, causes, and brands.
Adobe Typekit fonts is an online service which offers a subscription library of fonts.
Launched in 2010, Google Fonts is a library of 1029 free licensed font families, an interactive web directory for browsing the library and tools to assist in font pairing.
Professional Web Typography. A free online book that covers the basics of web typography.
Typeface Anatomy & Glossary. Glossary of common type terminology. It may answer many font-related questions.