17 November 2019

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.

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.


Previous post
Cormac McCarthy on academic writing [dropcap]I[/dropcap]’m not much of a fan of Cormac McCarthy. Not yet anyway, but I hold out hope. I’ve found it difficult to get into his novels but
Next post
Nine tips for writing essays on research for medical students This is a summary of the advice I’ve been giving to medical students for years. However, the advice is quite generic and it may be helpful for