You’ve capped the width at 750px, but use up to 83 columns of monospace. This leaves it assuming that each column is no more than 9px wide, but this may in fact not be true. I, for example, have boosted the size from the stupid historical customary value of 13px to the more sensible 16px, which, combined with my chosen monospace face Triplicate, takes 9.6px per column, and so I get some undesirable wrapping. Here’s what should be done instead (assuming 83 columns, though I suspect you actually want to rewrap the sole line where that occurs and go down to 80, and incidentally the other line that’s 80 could be subjectively prettier with manually-chosen line breaks aligning with punctuation rather than line length, starting a new line for each of the two “_and_”s):
In related news, I think this is the first time in at least a decade that I’ve come across an actually interestingly useful use of monospace in a web page and felt no particular inclination to substitute in serif and breathe a sigh of relief at how much more readable it becomes, which is what I would normally do. If you’re going to go monospace, do something interesting with it like this!
Relevant reading: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_.... The ch unit is the width of the 0 glyph, which for monospace fonts means the width of all regular-sized glyphs. The story of what it actually calculates gets a bit messier if you use a font-family stack with more than one item, but that’s no problem for what you’ve done. There are genuine uses for all three of em, ex and ch (though ex is the rarest by far).
And hey, another fun tip: you can add U+FE0E after emoji to prefer monochrome textual rather than graphical representations (and U+FE0F says “go graphical”, useful for the comparatively few emoji that default to a textual representation). It’s not perfect, and it may end up feeling less pleasant than the greyscale-filtered graphical representation, but hey, it’s a fun feature.
You’ve capped the width at 750px, but use up to 83 columns of monospace. This leaves it assuming that each column is no more than 9px wide, but this may in fact not be true. I, for example, have boosted the size from the stupid historical customary value of 13px to the more sensible 16px, which, combined with my chosen monospace face Triplicate, takes 9.6px per column, and so I get some undesirable wrapping. Here’s what should be done instead (assuming 83 columns, though I suspect you actually want to rewrap the sole line where that occurs and go down to 80, and incidentally the other line that’s 80 could be subjectively prettier with manually-chosen line breaks aligning with punctuation rather than line length, starting a new line for each of the two “_and_”s):
In related news, I think this is the first time in at least a decade that I’ve come across an actually interestingly useful use of monospace in a web page and felt no particular inclination to substitute in serif and breathe a sigh of relief at how much more readable it becomes, which is what I would normally do. If you’re going to go monospace, do something interesting with it like this!