Building a static website (part 8: Web typography basics)

Main illustrative blog post header image.

Published and updated date of webpage. 08-OCT-2025, updated 15-OCT-2025

Last time, I looked at using a CSS reset and some other CSS related items, such as how you might look at centring the main content on the page. In this blog post, I wanted to explore some of Web typography basics. My intention is to look at the basic concepts, ideas and recommendations in this post and then in the next one, dive deeper into implementation details.

This is definitely one of those subjects that is more "guidance and recommendations" rather than "definitive rules", which can make it quite difficult, although that is why I'm diving into this, to some significant level of detail.

Naturally, there are a ton of references and guides available out there on the web. Out of the many I have looked at so far, I think the best overall is currently: Everything you need to know about website typography (with examples), which gives a pretty good overview of the concepts.

Concepts

Before diving into the details, I think it's worth at least trying to understand some of the basic concepts and ideas behind this subject. Certainly, it is worth exploring what typography in general actually is.

I quote from the Wikipedia article: Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. We can then by extension say that Web typography is essentially the same thing, but applied to webpages, which share some characteristics of typography in print and other media, but clearly present many unique challenges. I suppose it is all about presenting words on your pages in the best way possible for your and the users needs.

I would suggest that some of the unique challenges of the Web typography might be:

On the other hand, I think we should also bear in mind the advantages afforded to us.

Basic typography definitions

Clearly, a great deal of typography is centred round the way words are presented on the page. Many of those are centred round the appearance of the actual characters, while others describe the wider context. Given this, I think it's worth talking about the way I understand some basic typography related definitions.

First of all, at a high level:

Digging a little deeper, a font family will be based on the following types, with the first two being significantly in the majority for most cases:

If we then think about the way to describe some other more detailed characteristics of the individual characters used in a particular font, we have the following, some of which are also illustrated in the subsequent diagram. Some of these are likely to be more useful than others when it comes to Web typography.

Shows some of the typographic features of fonts, such as the baseline and x-height.

Note that I'm not trying to be 100% precise in the following definitions, because I think it is unnecessary to get too detailed, at least as far as my usage is concerned.

Although web typography is a lot more than which font to use, it is clear that font families and specific fonts are a core concept. Actually choosing a specific font is quite a vexed subject, because there is a very wide range of choices available, depending on the various circumstances involved. I will go into that subject more specifically in my next blog post.

I will continue by going through some of the various recommendations that I have collected while looking into this subject.

Web typography recommendations

As to be expected, there is a mountain of advice available, with "rules" and recommendations for effective web typography. One could (perhaps ironically) write a book on the subject, which I would rather avoid, so I am going to bring together some of the common areas for recommendation, relatively briefly. I will also make a few comments on what I think.

It is worth bearing in mind that the recommendations are mainly intended to enhance the most important goals of typography, which are: legibility, readability and accessibility. Briefly, these are:

Invest in a design system

I thought that the tip about investing in the design system was interesting, because I haven't seen that mentioned elsewhere. I quite like the idea of having something that provides a set of standards to work from, especially having been used to large corporate environments, but as an individual, that is presumably something that you would have to build yourself — which is perhaps what this series of blog posts is all about to some extent.

Establish a visual hierarchy

I understand that implementing a visual hierarchy involves using different font sizes, weights and styles to guide the user towards what's important and to break up the text into easily definable sections. A straightforward example of that is using large bold text to represent a page heading, with normal body text significantly smaller, while other less significant text may be rendered in further smaller size, or possibly at a lighter font weight.

There is a lot of talk about how users tend to skim webpages, so this needs to be made easy for a user.

Choose a suitable font family

On the face of it, this does seem to be one of the most important considerations and some of the considerations I have seen include:

Set min/max line length

It is very commonly advised that text should be restricted within a certain minimum and maximum number of characters per line (including spaces). The idea is that beyond a certain number of characters, it becomes increasingly difficult for your eyes to track successfully from line to line. Below a certain minimum, it is difficult because you are forced to constantly be moving down to the next line of text. Note that the recommendation does vary somewhat, with ranges from around 45-80 characters per line.

Personally, I agree that this is a good idea in principle, but I would also note that many of the sites that recommend certain maximums, often don't seem to stick to their own advice, with line lengths often being 90 characters per line or over. In my case, I tend to find that it is the physical on-screen length of a line that is most important, rather than the number of characters, assuming that the individual character readability is okay. Clearly, there is a significant relationship between the number of characters per line and the font size that you use.

Choose font sizes

When it comes to font sizes, there is some very specific advice, while other advice is more generic.

One generic piece of advice was to use a maximum of four sizes, which is defined as:

  1. Header font size [would there not be a multiple of these?]
  2. Default font size (presumably meaning body text).
  3. Secondary font size (2px smaller — for less important details of site).
  4. Tertiary/caption/label/wildcard font size.

As I noted above, I'm not sure whether it makes sense to talk about a single header font size, because clearly there can be up to 6 sizes of header.

Again from the The Responsive Website Font Size Guidelines, is an example of more specific advice, regarding font sizes for mobile and desktop use. For convenience, I reproduce some of that advice here.

Element Mobile Desktop
Page title 28-40px 35-50px
Default/body text 16-20px for text-heavy pages 18-24px for text-heavy pages
Secondary text, captions 2px smaller than default 2px smaller than default

I think it's also worth noting that browsers typically define a default font size of 16 pixels, so it may well be that leaving the body text at that size might not be such a bad idea.

Personally, I often find that the font sizes used on websites appears to be significantly larger than I would like and I find myself zooming out from the page. However, it is probably more important to think about the people who will read your website and what they may need.

Consider line height and letter spacing

There seems to be general consensus that the line height of the text (which is the distance between one baseline and the next), should be around 1.5 times the font height. I think this is typically the default value set by browsers. I have also seen a recommendation that line height should be reduced somewhat for headings, for those situations where they do end up wrapping round. Note that there are W3C recommendations that line height should be a minimum of 1.5 times the font size.

When it comes to letter spacing (tracking), there is just advice that this can alter the text density, as it will change the amount of white space between individual characters. I don't think I'm likely to go down to that level of detail right now.

Consider the use of white space

I think of whitespace being the generic term for everything on the web page that forms the background to the text that is displayed. I presume the name comes from the fact that backgrounds are typically white in colour, so that's what shows through. From a web typography point of view, we are talking about the space between lines and letters and between paragraphs, headers and so on. Altering properties such as line height and letter spacing (tracking) introduces more or less whitespace. These values can be changed so the page is more or less 'airy'.

It seems that the trend has definitely been towards using more whitespace in modern webpages, in comparison with, say 15 or 20 years ago. I recall that this was particularly evident with high-profile redesigns such as that for BBC News in 2008. At the time, the then dramatic change in the use of things such as increased whitespace was highly controversial. Although to be fair, it is often extremely difficult to get people to praise any kind of change! As an example of how whitespace was used, take a look at the screenshot below of the BBC weather website, just before its redesign.

Screenshot of the BBC weather homepage, taken on 01/02/2008.

Now I think it is generally much more accepted for webpages to not be be highly compact things that they were back in those days.

Miscellaneous recommendations

There are plenty of other things that are recommended, but I thought I would collect a few more of these together under the "miscellaneous" heading.

Styling tables

Although this is not the main focus of this blog post, I decided I would add some basic styling for the <table> element, because up to now, there hasn't been any. I will no doubt return to this at some future point, but for now, the CSS I'm using is:

table thead tr
{
   background-color: lightgrey;
   border: 1px solid #ffff;
}

table, th, td
{
   border: 1px solid black;
   border-collapse: collapse;
}

The rendering of which can be seen in the recommended font size table earlier in the article.

Conclusions and design decisions

As usual, having looked into the subject, I need to think about what I should take from this as far as the design of my own website is concerned. Some of this can be seen in this current blog post page. Taking a few of the concepts that I explained earlier, I would say:

Next time, I will be looking into the details of how to implement font choices using CSS, while making some initial choices for what fonts to use in my own blog posts.s