A Glossary of Typographic Terms
This is a really good glossary of the terms used in typography. It includes a very clear definition of the difference between a font and a typeface. It has also taught me the meaning of the word “gadzook”.
The K-Type font foundry produce a range of typefaces that include New Transport, a font based on that used for road signs and now used on the gov.uk website; Keep Calm, a font based on the lettering used in the famous ‘Keep Calm and Carry On’ posters; Blue Plaque, a font that simulates the lettering on English Heritage plaques; and a font called Dalek. You can’t really get more British than all that.
I love this clever and informative video by Ben Barrett-Forrest.
Over the last few days I’ve been making some changes and improvements to this website. The most significant being a major change to the use of typography.
The Grit & Oyster website as it currently stands is a work in progress. I didn’t want to spend ages getting it ‘perfect’ and not getting it ‘out there’. So I had always intended to come back and make adjustments. However, I received some ‘friendly feedback’ that suggested I had got the typography wrong and probably needed to pay some attention to that aspect sooner rather than later. Which was fair comment.
My original choice of using EB Garamond with Junction had made the text seem too ‘busy’ and I hadn’t taken enough care with the layout and spacing of the text. The pages were not as comfortable to read as they should be, the overall effect was not the simple elegance I was aiming for, and there seemed to be some some problems with display on some device and browser combinations. So I decided I needed to make some changes.
I wanted to keep with using a Garamond as my signature serif font but I decided I needed to pair it with a simpler sans serif. I also decided that I would switch their roles. The sans serif would become the main heading font and the Garamond would be used for the body text.
In order to improve legibility in the body text I’ve moved to declaring just ‘Garamond’ for the body text in the CSS. I’m still using EB Garamond in various places for branding and ornamentation. The sans serif I’ve chosen is Droid Sans.
I’ve set the base font size for the content area at 18px. This has a line height, calculated using the golden mean, of 29px.
This means that all text, and other elements within the flow of a page, should fit within a grid of 29px.
This has resulted in a font scheme as follows (all measurements are in pixels):
[table]
,Font,Weight, Size,Line Height,Bottom Margin
P,Garamond,Regular,18,29,29
H6,Garamond,Bold,18,29,0
H5,EB Garamond Italic,Regular,18,29,0
H4,EB Garamond Small Caps,Regular,18,29,0
H3,Droid Sans,Bold,29,29,0
H2,Droid Sans,Regular,36.5,36.5,7.5
H1,Droid Sans,Regular,44,44,14
[/table]
Serif fonts are more readable than sans serif fonts, right? Apparently not —
“It turns out that, as with so many of the things we ‘know’ are right, the idea that serif typefaces are more readable than non-serif typefaces simply isn’t supported by the evidence. “
From ‘The Serif Readability Myth‘
The font I’ve chosen to use for the Grit & Oyster logo, and for headings on this site, is Garamond. I wanted to use a traditional serif font that has an elegance and I think Garamond fits this nicely. It is a classic and popular font, although one that is more associated with print than online use. But I think that is part of the attraction as I wanted something with a slightly ‘bookish’ feel.
Ah, but which Garamond?
There are a number of different font types that are called “Garamond” and the history of this font is a bit confused. As this article makes clear:
“Garamond is the original typographic naming disaster–a source of ongoing confusion. There are many types called “Garamond”, almost to the point where garamond has emerged as a category among serif text faces. What most of the Garamonds have in common is that they are more-or-less accurate revivals either of type cut by Claude Garamond in the late fifteenth century, or of type cut by Jean Jannon in the mid-16th century.”
Here are some more resources for this history of this classic font:
Wanting to stick with open source I’ve chosen to use EB Garamond by Georg Duffner which has been released with an Open Fonts License. This Garamond has some nice italics and also comes with a small caps version – so I’ve been able to make good use of these.
In particular, I really like the italicised ampersand which I’ve use to make the & in Grit & Oyster.