Typography

Typography: noun - the style and appearance of printed matter. From the Greek τύπος (typos) a "blow, dent, impression or mark", and graph, to 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.

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 a computer screen.

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 but should never be used for body text. I think that Georgia is fairly good for body 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. Compare the sentence in sans-serif with "On computer screens, ..." It might be simply that by default the sans-serif text is rendered larger. This may be OK for light weight web sites with with little content but lots of images and only small blocks of text, but it is wearing to read on a content intense site. See what you think and let me know.

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 actauly does with fonts, as the following table attempts to show.

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

High Definition (HD) is 1920 x 1080 pixels. That is just over 2 megapixels (MP). All digital cameras have more pixels than that, so even full screen on an HD display the extra pixels are blended down into the rendered image.

	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

The main part of the problem is the resolution of computer screens. 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. Over 21 inches 1920 pixels works out to just over 90 pixels per inch. Compare that to a printed book or magazine page, 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 2450 dpi, which can easily show fine details and different stroke weights in the printed characters. The new generation of high resolution "HiDPI" screens that are starting to appear will start to alleviate this problem.

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. 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, were not suitable for the computer age, at least not for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.	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. 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, were not suitable for the computer age, at least not for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.	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. 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, were not suitable for the computer age, at least not for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.	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. 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, were not suitable for the computer age, at least not for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.	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. 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, were not suitable for the computer age, at least not for display on a computer screen, although even a laserjet desktop printer can achieve 300 dpi or better.

Headings - 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)

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%

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)

Sans-Serif Fonts

Verdana font-size:70%

Alphabets - all 300%

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.)

If you have any comments or questions, please don't hesitate to get in touch via my Contact Me page.