On the Design of this Website

2022-08-07 • 646 words

This is a meta-page on the design of this website. It contains details on typography, layout and design, and showcases jmulholland.com's interesting and novel features. This page is also personally useful to me as I test, tweak and refine the details below.

All code for this website is open source, and you are welcome to view it on GitHub.



Body text is styled in a stack of Charter, Georgia, serif. I wanted a serif typeface for readability, and chose this selection to utilise pre-installed system fonts and avoid additional network requests.

I also use a system font stack for my monospaced fonts: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace.

Elsewhere, predominantly for headings, I use Inter. It is similar to Helvetica in its clean, classic feel, but works much better in digital formats.


Font sizes (as well as many other dimensions of the site) are determined by a programmatically generated scale using the golden ratio.

This approach keeps sizing consistent across the size, and provides a pleasant visual hierarchy.

They also incorporate a slight size change based upon the viewport width so that text expands on bigger screens and shrinks on smaller ones.


The width of text columns (also known as the measure) is set using the rule of thumb that it should be approximately 2-3 alphabets in length.

This provides a good balance between making your eyes lose their place when jumping through long lines and breaking up text too much with short lines.

Bullet Points

  • Specific bullet point styling has been taken into account. You'll notice that it works well with longer, multi-line bullet points like this one...
  • ...and also short ones such as this.

Numbered Lists

  1. Numbered lists can also be added.
  2. They look like this.


Large display quotes can be added like so:

"Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away."

Antoine de Saint-Exupéry, Airman's Odyssey

Of course, body text would not be complete without good link styling. They look like this.

Headings contain links that appear on hover. This is useful for sharing links to particular sections of text.

Inline Tweets

Tweets can be displayed inline.


We can add footnotes into paragraphs. These allow me to add extra details or references where appropriate. I like the way they add context without being a distraction from the main text. On mobile, I use a novel design of slide-in footnotes that are triggered by tapping the footnote in body text.


It's easy to add images, with or without captions, to body text.

Performant images are loaded progressively. Give the page a refresh to observe the brief blur effect as an image loads.

Xerox PARC
Xerox PARC


I can separate sections with a --- in markdown, like so:



Inline code can be added like this: const f = () => 42.


The site also supports code blocks with language-specific syntax highlighting and a custom colour theme.

interface Foo {
  bar: string

const foo: Foo = {
  bar: 'baz',

type Baz = Foo | never

class Car extends Vehicle() {
  public async beep(): Promise<string> {
    return Promise.resolve('beep!')

 * Demonstrates syntax highlighting
export async function someFunc() {
  const url = 'https://jmulholland.com'
  const x = url.length

  const condition = true
  if (condition) {
    return x + 2

  return x

for (const x of y) {


This site uses MDX. This means I not only get the benefits of writing in Markdown, but I can also insert whatever customer React component I want, right in the middle of a piece of text.

<Concept />

Sometimes, I want to highlight a concept in the body of a text, to highlight a proper term, much like you would see illustrated with small caps in a philosophy essay. I use my custom MDX <Concept /> component to achieve this. e.g. Concept.


All code and content on this site is hosted on GitHub. I can easily edit content on the go using the brilliant Working Copy app.


Although highly personal and custom built, this site is not without its sources of inspiration. I am particular grateful for the following resources:

Future Features

At some point, you must ship whatever you have in an unfinished state. That said, in the future, I would love to add the following features to the site:

  • Spellchecking system (ideally through CI on GitHub).
  • Twitter cards
  • Aside/call-out sections
  • Hanging typography