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.