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.
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.
I’ve been writing about the creation of my WordPress starter theme, ‘Oystershell’, that I used as the base for the development of the theme for this website and how I used a range of other starter themes and code bases as inspiration. One of the decisions I made was to include the code for making CSS buttons from Twitter Bootstrap.
Twitter Bootstrap is a “sleek, intuitive, and powerful front-end framework for faster and easier web development” provided by Twitter. It has a range of components providing different user interface elements that used together can help you build a website in the style of the Twitter website.
I really like Bootstrap. The elements are well designed and stylish. But I didn’t want to include the whole of it in my starter theme. I wanted to pick and choose from the elements and happily the Bootstrap website includes a feature that allows you to customise your download so you only get the bits of code you want.
The component I thought would be most useful to include in my starter theme was the Bootstrap style buttons. You can see some examples of these here:
With CSS from Bootstrap added to my starter theme’s CSS I only need to add a simple class declaration to a <button> or <a> tag to turn it into a snazzy button.
I wrote yesterday about the creation of my WordPress starter theme, ‘Oystershell’, that I’ve used as the base for the development of the theme for this website. I mentioned that I had looked at a range of other starter themes to get ideas and inspiration, and in some cases actual code, to help with the development.
The most influential was ‘Underscores’ — or ‘_s’ — which ended up being, if you like, the starter theme for my starter theme.
_s has a good pedigree built as it is by the Theme Team at Automattic. I liked it because, despite its sophistication, it seemed simpler to understand than some of the others I looked at.