Typography

Copyright © David Boettcher 2005 - 2023 all rights reserved.

Typography: noun - the style and appearance of printed matter. From the Greek τύπος (typos) an impression or mark, and γράφειν (graphein) they write. In the eighteenth century this was applied to printing blocks with letters carved on them in relief. This page shows examples of how different type faces or fonts look on screen.

My favourite guide to typography and how to optimise screen and printed text is Butterick's Practical Typography.

Making a website or mobile app accessible means making sure it can be used by as many people as possible. The Web Content Accessibility Guidelines (known as WCAG) are an internationally recognised set of recommendations for improving web accessibility. The UK Government publishes some useful information about this at website and mobile app accessibility regulations.

For this web site I have used the "plain vanilla" typefaces of Verdana for headings and Georgia for body text. These two fonts were designed by Matthew Carter in the 1990s with one purpose in mind: to maximise the readability of text on computer screens, which generally have very low resolutions compared with printed text.

Serif fonts have a small lines called "serifs" at the ends of the strokes of some letters, which sans-serif fonts don't. Compare the G, r and i in Georgia, which has serifs, with Georgia, the same word in a sans-serif font.

I note that the w3schools.com says "On computer screens, sans-serif fonts are considered easier to read than serif fonts." But no reason for this is given, and numerous studies have failed to produce a definitive answer.

Compare the start of the sentence in sans-serif with this in a serif font: "On computer screens, ..." Both versions are set in 16 pixel font size with a line height of 21 pixels. The difference in appearance might be because the sans-serif font has a larger “x” height, or because by default sans-serif text is rendered larger for some reason.

The “x” height of a font is the relative height of small letters such as x to capitals, eg in the serif and sans-serif fonts here “On” and “On”.

The sans-serif font may be OK for light weight web sites, ones with little content, lots of images and only small blocks of text, but I think it is wearing to read on a content intense site such as this one. See what you think and let me know.

A useful tool for examining the details of the fonts in use on a website is the browser extension “WhatFont”.

Computer screens need larger text size than print to be readable, because of the lower resolution of computer screens compared to print. A 24" High Definition or HD screen is about 21" wide (the 24" measurement refers to the diagonal) and has a resolution across that width of 1920 pixels. That works out to just over 90 pixels per inch.

Compare that resolution to that of a printed book or magazine, where images will be printed at a minimum of 300 "dots" or pixels per inch (dpi/ppi), and text may be printed at 1,200 or even higher resolutions such as 2,450 dpi, which can easily show fine details and different stroke weights in the printed characters.

The differences in resolution mean that the optimum size for printed body text is 10–12 point, whereas for most computer screens the optimum size is 15–25 pixels.

The carefully designed, subtle and beautiful typefaces developed over the centuries since printing by movable type was invented, designed by punch cutters such as Francesco Griffo, Claude Garamond, Philippe Grandjean, John Baskerville and Giambattista Bodoni, are too intricate and subtle for the computer age, at least for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.

The new generation of high resolution screens that are starting to appear will begin to alleviate this problem. A 32" 4K screen has horizontal and vertical pixels of 3840 × 2160 and dimensions of 24.4" × 13.4", giving horizontal and vertical resolutions 157 and 161 dpi. Text is noticeably sharper and more on one of these displays than on an HD display, but HD screens will have to be accommodated for years to come.

Font-Size: em, px, pt, %.

The px is the magic unit of CSS. It is not defined as a constant length but depends on the type of device and its typical use.

	Body Text	font-size: 120%
font-size: 1em	The quick brown fox	The quick brown fox
font-size: 16px	The quick brown fox	The quick brown fox
font-size: 12pt	The quick brown fox	The quick brown fox
font-size: 100%	The quick brown fox	The quick brown fox

Note that the appearances of the default serif and sans-serif fonts will depend on what you have your system and browser defaults set to. It is also difficult to change what the browser actually does with fonts, as the following table attempts to show.

Different Font Sizes

16px Georgia	16.5px Georgia	17px Georgia	18px Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.	Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

---

Different Line Heights

If the line height is the same as the font size, that is 100%, the lines are crammed together. In the test below, the font is Georgia 400 16px and the default line height allocated by the browser is 21px, which looks the same as the 130% example.

Line Height : Default	Line Height : 100%	Line Height : 120%	Line Height : 130%	Line Height : 140%
It's easy to understand that if you have 1,200 pixels or more per inch to play with you can design a much crisper and detailed font than if you only have 90 ppi. That's the problem that Matthew Carter was addressing.	It's easy to understand that if you have 1,200 pixels or more per inch to play with you can design a much crisper and detailed font than if you only have 90 ppi. That's the problem that Matthew Carter was addressing.	It's easy to understand that if you have 1,200 pixels or more per inch to play with you can design a much crisper and detailed font than if you only have 90 ppi. That's the problem that Matthew Carter was addressing.	It's easy to understand that if you have 1,200 pixels or more per inch to play with you can design a much crisper and detailed font than if you only have 90 ppi. That's the problem that Matthew Carter was addressing.	It's easy to understand that if you have 1,200 pixels or more per inch to play with you can design a much crisper and detailed font than if you only have 90 ppi. That's the problem that Matthew Carter was addressing.

---

Headings

Sans-serif fonts - all 150%

The Plate (Offences) Act 1738 (Verdana)

The Plate (Offences) Act 1738 (Helvetica)

The Plate (Offences) Act 1738 (default sans-serif)

The Plate (Offences) Act 1738 (Arial)

Serif fonts - all 150%

The Plate (Offences) Act 1738 (Georgia)

The Plate (Offences) Act 1738 (Times New Roman)

The Plate (Offences) Act 1738 (Times)

The Plate (Offences) Act 1738 (default serif)

The Plate (Offences) Act 1738 (Libre Baskerville)

---

Body text - all 100%

The examples below show clearly why Verdana is not suitable for body text, although it is useful for very small letters on a computer screen.

Serifed Fonts

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Georgia)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (system default serif)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Times New Roman)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Times)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Libre Baskerville)

Sans-Serif Fonts

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Verdana)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Helvetica)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Arial)

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (default sans-serif)

Verdana font-size:70%

1. ... from and after 28th May, 1739, no goldsmith, silversmith or other person whatsoever making, trading or dealing in gold or silver wares within the part of Great Britain called England, shall work or make or cause or procure to be wrought or made any gold vessel, plate or manufacture of GOLD ... (Verdana 70%)

---

Alphabets - all 150%

abcdefghijklmnopqrstuvwxyz (Georgia)

abcdefghijklmnopqrstuvwxyz (Times New Roman)

abcdefghijklmnopqrstuvwxyz (Libre Baskerville)

abcdefghijklmnopqrstuvwxyz (Verdana)

abcdefghijklmnopqrstuvwxyz (Helvetica)

abcdefghijklmnopqrstuvwxyz (Arial)

---

Comparison of lower case x heights - all 300%

x x x x x x (Xs in this order: Georgia, Times New Roman, Libre Baskerville, Verdana, Helvetica, Arial.)

---

Is it Working?

Sometimes it is difficult to know whether a font family is installed or available. The next paragraphs test this.

If it is installed, this paragraph should be in Noto Sans, or fallback to the default serif font. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

If it is installed, this paragraph should be in “pt serif”, or fallback to the default serif font. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

For comparison, this paragraph should be in Georgia, or fallback to the default serif font. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Test text background area and space between paragraphs.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.