After the brief history of the development of typography through the ages on the previous page, let's get down to the main object of this tutorial:

Typography And Websites
The illustration below will help familiarize you with some of the terms used in typography and typographical design:

The appearance of your website, and how it appears to your visitors, is of the utmost importance. One of the biggest contributors to its appearance and legibility is the choice of type faces: Is the text legible and easy to read? Do your headings complement the text? These are some of the things we will look at throughout this tutorial.

Many newcomers to WordPress and building websites use the Twenty series themes, which are pre installed in WordPress. Although they may be excellent themes for somebody starting out, I see so many websites uisng the Twenty series of themes, apart from the content, exactly the same: Layout, fonts and font sizes, headings, banners, color, etc, because they have been published in the WYSIWYG (What You See Is What You Get) format.

You can install the plugin Tinymce Advanced, which will let you change font face, font size, color, etc, but it won't change line height, white space, paragraph space, among other things that you can do with css.

In this tutorial I will be using the Twenty Thirteen theme, popular with many, particularly newcomers to WordPress and website building, and a more advanced theme, Frontier, as examples of how you can customize your theme, along with Google fonts, more about them later, to illustrate the different x-height of fonts.and how you can make you headings and text on your sites posts and pages perfectly legible without having to increase the font size.

The majority of serif and sans serif font faces are very similar in appearance, but they may differ mainly in two things: The x-height and width of the characters. As illustrated above, the x-height is measured from the baseline to the top of the lower case letters, the higher the x-height the larger the font appears, the smaller the x-height the smaller the font appears, although they will have the same point size.

Throughout this tutorial I will be illustrating fonts, both serif and sans serif, with different x-heights; fonts suitable for display and headings; explaining ascenders and descenders, cap height, etc. Want to carry on? Then let's go!

Choosing The Right Fonts
When choosing typefaces for your site, sans (without) serif fonts tend to lend themselves better than serif fonts on a website. Have a look at some authority sites and see what they are using, the majority will be using sans serif. Wikipedia, Amazon, Clickbank, Yahoo, even our own WA, are some examples. There are many periodicals and magazines that also use sans serif fonts. Below a is comparison of a serif and sans serif font which may help you decide which you prefer.

Notice the increased x-height of the sans version over the serif version and the slightly reduced line spacing of the sans version to accommodate the larger x-height.

Serif fonts are ideal for newspapers and books. Times New Roman was designed initially for The Times newspaper because of its small x-height, narrower character width and closer line spacing than, say, PT Serif, allowing more text per column inch, but, personally, I wouldn't recommend it for a website.

Although, at the end of the day, it's your choice, but keep in mind, it's all about visitors and how they view your site. This is why I will be explaining about Google and web safe fonts later in this tutorial.

In the examples on the following pages, for ease of viewing, I have used 24px (18pt, 1.5em) for illustrating the x-height of fonts, and 16px (12pt, 1em) for the text illustrations.