Spacing is a challenge. And you lose some legibility giving up proportional fonts. I think kerning in proportional fonts makes a big difference, letting your eyes recognize the shape of different letter groupings.
Monospace text is fine if you avoid long-form text, like when it's structured and highlighted in a code editor.
But it sure is pretty! Especially with Unicode charts and ASCII art.
I'm curious if there are studies for this? In particular, I always think back to how few people notice common ligatures in books that they are reading. To the point that I would generally be willing to wager decent money, thinking 90% odds, that any given friend/family I have has not noticed it in books that they are reading. Only indicator I have that someone is aware of them, is if they know any typography terms already. :D
ASCII art was so cool! After getting my day's work done in typing class, we could try our hand at making ASCII art via a list of commands to follow, and without knowing the final image. Like:
15 space, 1 V, 3 U, 1 V
15 space, 5 U
12 space, 2 x, 5 U, 2 x
and then after 250 lines, a pic of Jordan dunking would show up once done and we could print it!
The problem is not really with the protocol or the file formats, though.
I gave this some thought in the past, and, since this is more of an artistic/crafting endavor than anything else I'd say we decide on some arbitrary rules (like "only monospace fonts, no external javascript, only static content", I don't know, I'm just spitballing here) and create our own certification to display at the top of the page (like the omnipresent top-right oblique ribbon of yesterdecade or, even better, the little badges we used at the turn of the century), then we make a central list where people can add their website.
Ooh, this is the thread to ask my question in. A few years ago I ran across a ... I think a video game walkthrough? maybe? which was written to be read in monospace font, and it was full justified perfectly all the way through (thousands of lines!) SOLELY through word choice.
Anyone know what I'm talking about and have a link?
On C64 the signs of puberty were usage of words like “lamer”, “loser/looser”
Loser vs looser was especially painful. “Haha, we know it’s loser but looser sounds cooler.” A lame cover up, somewhat contradicting the whole meaning.
90% of the scroll texts were about contrived stories of displaying superiority over lamers and losers.
The folks from Finland appeared to be a bit over the top with references to their weight lifting careers to appear like some sort of brutal fighting machine.
oh my god that person wrote "The Art of Unix Programming" I binge read it last week and it was exceptional. What a world. These are the kind of people that I look up to and aspire to be like.
I vaguely recall seeing a GameFAQs walkthrough that did this, and I think it might have been for a Final Fantasy game of some kind, but unfortunately I can't remember more than that.
Here is another ooh, this is the thread to ask my question in.
For years I wanted to make a Visual Studio [Code] extension that justifies comments as you type including hyphenation but accepting additional spaces as necessary. I never dared to really start beyond some research into relevant algorithms and libraries because it seems pretty complex. I tried to use things like fmt and par but mostly accepted that I can not have nicely formatted comments unless I do it manually, which I do sometimes but in general just costs to much time, especially as any small change often forces redoing several lines.
You have to deal with long identifiers that you preferably do not want to break across lines, [nested] lists, tables, code blocks, or ASCII art contained in comments, distinguish between hyphens as part of words and hyphens inserted by hyphenation, there might be structured comments like XML doc and Javadoc tags, ... When I saw Tom7's Badness 0, I considered throwing a LLM at the problem, but I think that this is not [yet] practical if you want it in real-time and without hallucinated comments.
Does something like this already exist or something to build on top that would make writing an extension not a year-long effort?
I use this extension extensively. It's not auto-wrapping, but you can bind it to an easy shortcut and wrap when you need to. I find it almost indispensable. I wrote a vscode extension to do the same thing, then discovered this one which does it far better.
Someone with their "retro" web site that, essentially, uses pre tags.
You get a wall of text, in a small font on the phone, reader view doesn't work, and if you tilt is sideways, you're as likely to get scrollbars as not.
Nowadays this is also my singular complaint with tech mailing lists. The hard line endings and rigid layout.
I was trying to read some RFCs on my phone, and a simple paragraph had me scrolling right and left constantly (or zooming out until I couldn't read the text).
I was watching a video today that called stuff like this the "indie web" where the philosophy is anti-algorithm and tries to embrace all of the things that made the web a great place in the past. Things like RSS, custom blogs, forums, web rings etc... I started my own as well, it feels really nice.
The section on microservices was an uncomfortable but cathartic read. We’re getting edicts from above that we need to go all in on microservices for new modules, and I’ve been trying (unsuccessfully) to steer us away from it for exactly the reasons the article outlines.
All I get in response is “we’ll just (it’s always “just”) solve that with <insert expensive AWS service here>”. No-one seems to acknowledge that that only makes things more complex.
It looks nice, and I'm glad that it's semantic and responsive, but the fundamental problem is that monospace just isn't great for body text. I've read blog posts on multiple sites with monospaced body text, it's okay, but proportional really is the way to go in my opinion.
I think any heavily stylized text (that includes terminalesque sites) takes extra cognitive effort to read. Sometimes it's best to just leave it plain, and have it be elegant through being easy to read.
Out of curiosity, what font would you prefer for body text? I use monospace on my own blog because it plays nice with my poor vision and scaling settings, but I am always curious about improved readability for all, since accesability is important to me.
I think it depends on what you mean by "readability". Proportional squeezes more text into the same space. So you get more of it per eye fixation and as a result can read faster and/or exert less effort for the same amount of text. Monospaced puts everything in a grid and makes it easier to distinguish one character from another. So you get fewer errors due to the characters bleeding into one another. So mono works better when legibility is an issue.
So both have better "readability" in different ways. Faster/easier or more accurate. Which implies to me at least that mono is better for everything but body text even when things are ideal. I don't think it is possible to have a single proportional font that works for both definitions of the word "readability".
Most research points to sans serif fonts working best for large bodies of text on most screens. So simply good old Arial or Verdana actually is a very safe choice (though a bit boring) choice which will cover the greatest audience.
On modern high density displays serif fonts can also work fine. But not all displays out there are actually of that high density.
That's just one aspect though. There has been a lot of research over the years which for some reason is often ignored.
If nothing else, the tree ul-list css class is good enough that it should be part of the HTML spec (as in: a <tree> tag) imo. What an incredibly useful thing that is.
The tight line spacing has a negative impact on readability. It’s hard to read long paragraphs of dense body text like this. But the tables and other character graphics require this tight leading.
That’s the problem with using the same character grid for both graphics and text. It could be alleviated with a font that has a particularly low x-height (leaving more margin above and below the letters).
I thought you meant line width and was confused because it's in the generally accepted range (~70 characters).
The line height, I agree, is too tight. 19.2px at 16px font size is too cramped at only 1.2x. Making it 24px is a big improvement.
To my eye, however, a taller line height doesn't affect the tables and other character graphics. With some tweaks like this I think the monospace style comes across quite well.
* edit - I think I see your point; it does break the author's concept of the fixed grid (set line-height: 24px for p elements and turn on the author's "debug mode" to see the grid.
I can't stand monospace for reading, so I made a bookmarklet because all reader modes suck leaving font preference even though this site works fine just changing the normal text tags over to sans-serif.
Readit News
Spacing is a challenge. And you lose some legibility giving up proportional fonts. I think kerning in proportional fonts makes a big difference, letting your eyes recognize the shape of different letter groupings.
Monospace text is fine if you avoid long-form text, like when it's structured and highlighted in a code editor.
But it sure is pretty! Especially with Unicode charts and ASCII art.
15 space, 1 V, 3 U, 1 V
15 space, 5 U
12 space, 2 x, 5 U, 2 x
and then after 250 lines, a pic of Jordan dunking would show up once done and we could print it!
I agree, monospace without color and some formatting is like giving up a sense or spatial dimension. It's pointless austerity.
I gave this some thought in the past, and, since this is more of an artistic/crafting endavor than anything else I'd say we decide on some arbitrary rules (like "only monospace fonts, no external javascript, only static content", I don't know, I'm just spitballing here) and create our own certification to display at the top of the page (like the omnipresent top-right oblique ribbon of yesterdecade or, even better, the little badges we used at the turn of the century), then we make a central list where people can add their website.
Anyone know what I'm talking about and have a link?
[0] http://www.catb.org/esr/jargon/html/B/bricktext.html (Also wow Google has completely erased this concept from its search results.)
http://www.catb.org/esr/jargon/html/crackers.html
On C64 the signs of puberty were usage of words like “lamer”, “loser/looser”
Loser vs looser was especially painful. “Haha, we know it’s loser but looser sounds cooler.” A lame cover up, somewhat contradicting the whole meaning.
90% of the scroll texts were about contrived stories of displaying superiority over lamers and losers.
The folks from Finland appeared to be a bit over the top with references to their weight lifting careers to appear like some sort of brutal fighting machine.
Kids back then… ;)
For me, it replaces the search with "brick text", but allows you to change to "bricktext" again, at which point it does give the catb.org result.
I actually got an angelfire link in my search results a few days ago. Was related to quake 2
https://github.com/laravel/laravel/blob/11.x/config/database...
https://gamefaqs.gamespot.com/snes/588741-super-metroid/faqs...
For years I wanted to make a Visual Studio [Code] extension that justifies comments as you type including hyphenation but accepting additional spaces as necessary. I never dared to really start beyond some research into relevant algorithms and libraries because it seems pretty complex. I tried to use things like fmt and par but mostly accepted that I can not have nicely formatted comments unless I do it manually, which I do sometimes but in general just costs to much time, especially as any small change often forces redoing several lines.
You have to deal with long identifiers that you preferably do not want to break across lines, [nested] lists, tables, code blocks, or ASCII art contained in comments, distinguish between hyphens as part of words and hyphens inserted by hyphenation, there might be structured comments like XML doc and Javadoc tags, ... When I saw Tom7's Badness 0, I considered throwing a LLM at the problem, but I think that this is not [yet] practical if you want it in real-time and without hallucinated comments.
Does something like this already exist or something to build on top that would make writing an extension not a year-long effort?
I use this extension extensively. It's not auto-wrapping, but you can bind it to an easy shortcut and wrap when you need to. I find it almost indispensable. I wrote a vscode extension to do the same thing, then discovered this one which does it far better.
Deleted Comment
Is the hard line endings that bother me.
Someone with their "retro" web site that, essentially, uses pre tags.
You get a wall of text, in a small font on the phone, reader view doesn't work, and if you tilt is sideways, you're as likely to get scrollbars as not.
Nowadays this is also my singular complaint with tech mailing lists. The hard line endings and rigid layout.
Deleted Comment
All I get in response is “we’ll just (it’s always “just”) solve that with <insert expensive AWS service here>”. No-one seems to acknowledge that that only makes things more complex.
I definitely prefer this to the "beautiful" pages that try to capture the feel of old print magazines.
Conversely, for reading Markdown, I prefer a rendered version in a proportional font.
https://typora.io/
So both have better "readability" in different ways. Faster/easier or more accurate. Which implies to me at least that mono is better for everything but body text even when things are ideal. I don't think it is possible to have a single proportional font that works for both definitions of the word "readability".
On modern high density displays serif fonts can also work fine. But not all displays out there are actually of that high density.
That's just one aspect though. There has been a lot of research over the years which for some reason is often ignored.
I was about to write out a lot more and while looking up various sources stumbled upon a medium post that dives into things quite deeply: https://medium.com/@pvermaer/down-the-font-legibility-rabbit...
That’s the problem with using the same character grid for both graphics and text. It could be alleviated with a font that has a particularly low x-height (leaving more margin above and below the letters).
The line height, I agree, is too tight. 19.2px at 16px font size is too cramped at only 1.2x. Making it 24px is a big improvement.
To my eye, however, a taller line height doesn't affect the tables and other character graphics. With some tweaks like this I think the monospace style comes across quite well.
* edit - I think I see your point; it does break the author's concept of the fixed grid (set line-height: 24px for p elements and turn on the author's "debug mode" to see the grid.
https://caiorss.github.io/bookmarklet-maker/
Joke. Cheers! ;)
(due to monospace words have a more similar 'shape' than proportional type words)
It's a pity that there isn't a TrueType version.
https://github.com/fcambus/spleen
Can you use the OTF files instead? Their readme says there are OTF files in the release tarballs.