Redesign
Max-width
I’ve been holding off on applying a max-width to the site, but I figured now that I have 10 articles under my belt, the time is right. In the past, I’d honestly pick article width by choosing an ideal image width. This time, however, I’m focusing on readability. I remember learning in a typography class that there’s a rule of thumb for the ideal number of words on a line of text, which (I believe) was roughly 12 words. I received a tweet from @trey suggesting a max-width using the ch unit, which made me realize there’s a ch unit in CSS—I had no idea. Mozilla describes it as:
“The advance measure (width) of the glyph "0" of the element's font.”
Perfect. Now, I simply need to find the ideal number of characters on a line of text. A quick google search led me to this gem—The Elements of Typographic Style Applied to the Web. It quotes the book that the website is based on with our answer:
“The 66-character line (counting both letters and spaces) is widely regarded as ideal.”
Combining my newfound knowledge of the ch unit and the golden number 66, I set the site’s max-width to 66ch. It feels good, but the default <body> margin feels tight beyond mobile. I doubled the margin once it reaches the max-width, which feels much better. I don’t expect to keep this margin long-term, but this entire site is a series of small steps in the name of progress.