Skip to content

Making your website look like a typewritten page, part 1: The design problems

I tinker with this blog regularly, and one thing I’ve wanted to try is a monospace font.

Note, this isn’t a particularly original idea. Andy is currently using iA’s Mono S, and Thomas was using Spline Sans Mono until recently. iA themselves were experimenting with a mainly-mono typeface (a duospace, if you will) a few years back, and Florens sported a Markdown-in-your-text-editor look for a while. And peering into the seeds of time, I’m fairly sure Jon Tan wanted to adopt a similar approach on his site, or at least a mono-weight and size.

So there’s precedent, and examples of how to do this well (Andy’s use of the ch unit is particularly helpful). Having said that, I’m looking to achieve something slightly different. As well as using a monospace font, I want to set this blog as if it was printed on a mechanical typewriter – even when this is the source of several stubborn bad typographical screen habits.

I am old enough to have used a typewriter. I’m sure one could get very nostalgic about them – or even use one in 2023 – but all I recall is that producing a document was a frustrating experience compared to using a word processor. Here’s what you’re limited to with typewritten text:

  • one monospace font
  • one font size
  • one line-height
  • no italics
  • no rules and borders
  • no “nice” typographical characters, such as em and en-dashes and curly quotes, or even bullet points

Perhaps surprisingly, you can create the following effects:

  • Colour. Typewriters often came with dual-coloured ribbons, so you have a second, accent colour.
  • You can underline text by typing an underscore over existing characters.
  • Mechanical typewriters respond to pressure, so you can make text bolder by simply pressing the key harder, or even by typing the same character twice.

However, using typewritten text poses several obvious typographical problems, even on a simple, single column blog:

  • How do you make titles and subheadings stand out from the surrounding text with only one font size? How do you establish a heading hierarchy?
  • How do you style visited link states?
  • How do you convey certain meanings without the use of italic, for example citations and emphasis?
  • How do you manage vertical spacing with a limited set of margin sizes based on a fixed line-height?
  • How do you style secondary information such as captions with one font size and only an accent colour?

After a bit of experimentation, I think I solved these problems. With two exceptions, this blog is currently set to the rules of a typewritten page. I’ll go through how I approached this in the next post.