Hi, thanks for looking in. Typographically speaking, does size really matter? Personally, I don't believe it does! In this tutorial I will attempt to explain why.

There are a number of things that need to be taken into consideration when creating your website: Layout, Legibility, Ease of Navigation, but one of the most important of them all is choice of fonts, Choosing the right fonts goes a long way into determining how long visitors stay on your site.

So, how do you choose the right fonts? First they must be legible, easy on the eye, and appropriate to your niche. There are many fonts that appear very similar in style, but differ in one very important aspect:

What is x-height you may ask? It is the height from the baseline to the top of the lowercase letters and determines how large your text appears on your website. Even though fonts may have the same point or pixel size they can look quite different in size according to their x-height.

Now the question arises: Why use a font with a small x-height that needs to be increased to 19px (14pt, 1.2em); or 22px (16pt, 1.4em), to make it easily readable when you can use a similar font with a large x-height that is easily readable at 16px (12pt, 1em)?

As you can see from the previous paragraph, there are various ways to determine font size, but for this tutorial we'll keep it simple and use pixels. I would also advise using a test site and installing a simple custom css plugin, as this will save you the trouble of creating a child theme for a test site.

If the changes you make are successful, you can then create a child theme of your new or published website's parent stylesheet or you can carry on using a custom css plugin, just install it into your published website and copy and paste the changes from your test site into the plugin or your newly created child theme.

In the following pages I will be giving examples of fonts similar in appearance but with different x-heights, character widths, line-heights, letter spacing, etc. These can all be modified in your child theme or css plugin, which I will be explaining as we progress. The fonts I have used are purely for demonstration purposes and need not be used on your website unless you so wish.

These can also be modified by using HTML code, but isn't recommended unless it is just for the odd paragraph, heading, or horizontal rule, as you would need to do it for each paragraph, heading, and horizontal rule, creating problems with loading time and inline css.

It would also create problems if you want to edit your pages and posts, as each page would have to be edited individually, one hell of a task if you have a large number of posts and pages. Using css will automatically apply any changes you make to all your posts and pages.

Although typography for the web and printed matter may differ in some respects, the basic principles are the same. On the next page I have given a brief history of how typography developed over the centuries, which I hope you may find interesting, or you can skip to the next page. I hope you find this tutorial helpful in developing your website, if you do, a like and/or comment would be much appreciated.


Join the Discussion
Write something…
Recent messages
minitrio Premium
Great tutorial, thanks :)
Reply
Harrysastar2 Premium
Thank you, happy to be of help.
Reply
T1967 Premium
TAGGED WITH PART 1 AND 2...CHEERS HUN :-)) XOXO
Reply
Harrysastar2 Premium
Hope you find them useful. Best wishes.
Reply
T1967 Premium
you too :-))
Reply
MKearns Premium
Thank you for you time and attention to the many characteristics and type of fonts. It's really quite an art and most useful for capturing attention.
Reply
Harrysastar2 Premium
Thanks, Michael, only too happy to help whenever I can
Reply
Loes Premium
Thank you for taking the time to explain all this about the different fonts, very thorough and easy to understand.
Reply
Harrysastar2 Premium
My pleasure, Loes, and thanks for the comment, much appreciate.
Reply
judebanks Premium Plus
Fantastic tutorial. Informative and it helpful for making better font choices and how to customize their appearance.

I understand that WordPress is removing Google's 'Open Sans'
font option.

Would you know what that means for WP users? Web designers and coders don't seem to like this. Do you know why this is an issue for some people? ~Jude
Reply
Harrysastar2 Premium
First, thanks for the comment, Jude, much appreciated.

Secondly, I'm not sure whether this applies to just the WP default Twenty series of themes or all themes. Below is a screenshot of a WordPress plugin that mentions removing fonts from default WP themes. I find it strange that WordPress has a plugin to remove these fonts when they are still named in the latest updated themes stylesheets.

I installed the Twenty Fifteen theme on a test site and changed the 'Noto Serif', serif to 'Open Sans', sans serif, with no problem, unless it would not appear as Open Sans on someone else's browser. As websites built at WA use the WP platform, maybe Kyle or Carson could clarify exactly what it means to WA members.
Reply
judebanks Premium Plus
Thanks, Harry. I appreciate your input.

I have since learned that the removal of Open Sans is from the Admin area of WordPress. See discussion below if you are interested:

https://wptavern.com/wordpress-4-6-to-drop-open-sans-in-the-admin-in-favor-of-system-fonts

It makes more sense now.

I'd like to remove - fonts.googleapis link altogether from my theme. I get a message when speed testing that the CSS needs to be optimized. It must have been included as default by the theme creator because I don't knowingly use google fonts on my site. ~Jude
Reply
Harrysastar2 Premium
Thanks, Jude, I'll take a look at it. Have a look in your header php or functions php the googleapis link may be in one or the other. If you know what the font is you can go to google fonts and find out what the loading time is.
Reply
judebanks Premium Plus
Okay, thanks.
Reply
Top