Applying Practical Typography

I recently came across the online book Practical Typography. It is written by Matthew Butterick and is chock full of useful advice on improving the readability of your documents.

I’ve had a bit of free time the last few days so I’ve been trying to improve this website’s style.

Matthew’s number one tip for improving the look of websites and documents is to license a professional font (possibly from him) for use. Unfortunately, a $200 font license is more than I feel I can afford, so I’m instead using the free font Charter that he recommends.

I’ve adopted the recommended values for character size, line spacing, and line length. I was already aware that a shorter line length improved readability, but I tweaked the values to more closely match his recommended line length. I’m now using a slightly larger size for body text, and the size of headings has been vastly reduced. My line-spacing on this website is now 1.3.

Layout

Another change I found myself wanting to implement is full-bleed elements. Full-bleed is a term from the print industry for elements that extend all the way to the edge of the page. It’s nice for images, and especially nice for code snippets on the web. As an example, take a look at this code block for css that implements this style:

.wrapper {
	display: grid;
	grid-template-columns:
		1fr
		min(42rem, 100%)
		1fr;
}
.wrapper > * {
	grid-column: 2;
}
.full-bleed {
	width: 100%;
	grid-column: 1 / 4;
}

Notice how the background spans all the way to the edges of the screen while the code is aligned to the center like the rest of the content on my blog. The difficulty with implementing this style mostly comes down to the way HTML assumes content is nested within containers. Semantically the code block is nested within the article, but visually the code breaks out of the container.

I have implemented a similar style before on my portfolio website, but much time has passed since I wrote that code, meaning I would need to relearn how to achieve it. Thankfully, I found a guide on viget, which demonstrates a handy way to achieve a full-bleed effect while also making the layout responsive to the screen size. It also links to an article by Joshua W. Comeau, where I got the CSS in the above code block from. My implementation follows the method from the viget article, but if you are interested in learning how it works, I think Joshua W. Comeau’s article breaks it down better.

Final Thoughts

There is definitely styling left to do here, but this is where I’m going to leave things at for now. In the future, I think I’d like to use Tufte CSS, or at least borrow inspiration from that design. The awesome css frameworks repository seems like a good place to find inspiration for organizing my css.