Euan Lawson
A note on typography
Something completely different this Sunday. I just wanted to add a few words about the typography on the website and highlight a little bit of styling I’m using.
I’m using the Merriweather font - it’s a serif font that has good readability on the web. I like the slightly old-fashioned look to it. You can read more at the designer’s website.° I’m not sure what Matthew Butterick would make of Merriweather. He’s the author of the excellent web book, Butterick’s Practical Typography (2nd Edition).° It is a treat. I would highly recommend paying for the book and I’ve a huge amount of respect for Butterick’s approach and commitment. If nothing else, read the summary Typography in ten minutes° and cast off your foul Arial and Times New Roman fonts forever.
As well as adjusting font size and line spacing I have also made a couple of other tweaks with the behaviour of hyperlinks and the use of small caps. Both of them needed some CSS tweaking to get them to work. I don’t profess any great coding knowledge but I can cope with the basics and some persistent Googling will usually solve the problem. In fact, with the small caps I was struggling and, in the end, I worked it out by finding a site and using the Inspect function in Chrome to take a sneak at the code. I thought I’d add them here.
Changing the behaviour of hyperlinks
My hyperlinks don’t look coloured and they only appear if you roll over them. I use a degree symbol (°) to flag them if it is not utterly obvious from the context. I find it less intrusive and distracting when reading. You’ll need to add this snippet of code to your style.css file (or your theme might have a convenient box embedded within the backend).
a:link {
color: black;
background-color: transparent;
}
a:hover {
color: black ;
background-color: #D3D3D3 ;
}CSS code to add small caps
As I said, this took me a while to work out. The CSS code you need is here:
.smallcaps {
font-family: "Merriweather";
font-variant: small-caps;
text-transform: uppercase;
font-stretch: ultra-condensed;
font-weight: bold;
font-size: .95rem;
letter-spacing: 1.5px;
line-height: 100%;
}When you are in the post editor you need to jump into the html view to use this little bit of code: <span class=“small caps”>Whatever you want in small caps</span>
And that’s it.