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

K-Type: Very British fonts

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 was looking the other day for an icon to indicate a drop down navigation menu in a mobile layout. I wanted something that would be easy to implement, flexible, and relatively lightweight. I decided that I would do it using an icon font, but that meant finding a font to use.

I chose Genericons – and was so impressed with it that I decided to permanently integrate it into ‘Oystershell’ my WordPress starter theme so that it will be easily available for use in future projects.

Some example icons from the font.

It has been released by Automattic so it has a number of features that are really handy for WordPress users. This includes these icons designed to indicate each of the native WordPress post formats.

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

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

Garamond

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?

History

Claude 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:

My choice: EB Garamond

Garamond Ampersand

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.