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
H5,EB Garamond Italic,Regular,18,29,0
H4,EB Garamond Small Caps,Regular,18,29,0