The Monospace Web

[wonger_]

I've been keeping a list of monospace pages: https://wonger.dev/posts/monospace-dump#web. Currently have ~50.

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.

[aversis_]

Kerning makes such a huge difference in proportional fonts. Proper kerning allows your brain process word shapes much faster.

[andirk]

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!

[dspillett]

One of your examples is now a for sale domain. Still on WBM though: https://web.archive.org/web/20230216225350/https://kary.us/n...

[Razengan]

> Monospace text is fine if you avoid long-form text, like when it's structured and highlighted in a code editor.

I agree, monospace without color and some formatting is like giving up a sense or spatial dimension. It's pointless austerity.

[jareklupinski]

here's one more for the list :) https://jarek.lupin.ski/tape-deck/

[kristopolous]

maybe there needs to be a gopher protocol refresh. some 2024 approach of the same idea.

[dmd]

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?

[macleginn]

Cf. also http://tom7.org/bovex/ (a layout engine that tries to achieve a similar effect by rephrasing the input using an LLM).

[jtolmar]

That's called bricktext[0], it used to be a thing you'd occasionally see on usenet and places like GameFAQs.

[0] http://www.catb.org/esr/jargon/html/B/bricktext.html (Also wow Google has completely erased this concept from its search results.)

[aarreedd]

Laravel does something similar. Each line of multi-line comments are exactly 3 characters shorter than the previous line.

https://github.com/laravel/laravel/blob/11.x/config/database...

[CM30]

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.

[danbruc]

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?

[whartung]

Monospace doesn't bother me.

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.

[vbernat]

That's not the case for this website. It is fully responsive.

[rendaw]

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).

[marcus_holmes]

what's the thing with scroll bars? (curious)

[sweeter]

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.

[usually]

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.

[marcus_holmes]

I think I prefer monospaced. I certainly prefer the white-on-black colour scheme.

I definitely prefer this to the "beautiful" pages that try to capture the feel of old print magazines.

[layer8]

Agreed. It has started bothering me for authoring Markdown documents as well, where it’s often impractical to avoid monospace.

[michelledepeil]

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.

[pavlov]

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).

[16bytes]

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.

[unraveller]

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.

   javascript: (function() {
    (function() {
        const textElements = document.querySelectorAll('p, span, h1, h2, h3, h4, h5, h6, li, td, th');
        textElements.forEach((element) => {
            const textColor = getComputedStyle(element).getPropertyValue('color');
            element.style.fontFamily = 'system-ui, -apple-system, sans-serif';
            element.style.WebkitTextStroke = `0.4px ${textColor}`;
        });
        location.hash = "";
        history.replaceState("", "", location.pathname);
    })();

})();

https://caiorss.github.io/bookmarklet-maker/

[evanjrowley]

How does it compare to the tightness of comments here in HN?

[alberth]

Is it the tight line-height, or just the fact that monospace fonts a more difficult to read than proportional fonts

(due to monospace words have a more similar 'shape' than proportional type words)

[corytheboyd]

Had the same instant turn off.

[chasil]

OpenBSD started setting the console font to "Spleen" several years ago.

It's a pity that there isn't a TrueType version.

https://github.com/fcambus/spleen

[codetrotter]

> It's a pity that there isn't a TrueType version.

Can you use the OTF files instead? Their readme says there are OTF files in the release tarballs.

[_the_inflator]

An infamous C64 resource to this day is available in monospace, the so called “VIC article”:

https://www.cebix.net/VIC-Article.txt

Main issue is printing.

The article uses a diagram that needs fixed references in a two dimensional space. That’s why monospace here is invaluable.

The article is the single most important technical reference for the C64. 99% of all technical demo effects can be broken down to fundamental tricks found here.

[mxstbr]

I was thinking about changing my personal website's font to a monospaced one.

Anybody know which ones are particularly good for long-form text readability?

Bonus points if it's on Google Fonts.

[panr]

Very nice! I like how bold and monolithic it looks (I just fell in love with that JetBrains Mono font). I did something similar (but fully based on HTML semantics) for people who like the style of my theme for Hugo, but don't want to use Hugo and all they need is a simple CSS file.

https://panr.github.io/terminal-css/

[alberth]

Typography is so difficult on the web due to lack of support for things CSS textbox-trim

https://github.com/jantimon/text-box-trim-examples

You can see that even on this website, if you click "Debug Mode" (top right) and notice that later in the page, the headings and body copy begin to drift out of vertical alignment (against the background grid).

[Brajeshwar]

The web is beginning to come back home. There are going to be more and more pockets of satellite communities of the early web. It is becoming more and more interesting to be a traveler visiting different parts of the web again.

[vladde]

Super cool! Love how nice the tree-list looks! Readability with monospace is always a bit troubling, but I think this is a great take on it :)

I made a similar thing where I take semantic HTML and render it as old RFC documents: https://vladde.net/blog/rfc-css/ (not as readable though IMO)

[prmoustache]

Main problem is I guess the website would be broken the moment the user choose the setting to use his preferred font on the browser and do not use a monospace one.

[ddingus]

I love monospace. Has to be early computing experiences working a lot like music does in our early life.

Nice work. Many very readable examples for others to draw on.

[bee_rider]

Eh, I dunno.

Websites have definitely gotten over-complicated and quite annoying. But this retro “look like a terminal” style seems like the wrong direction.

I like fixed width fonts in a terminal where it is very likely that I’ll have to interact with columns of text as a thing.

For reading, I mean, LaTeX was invented a million years ago, and can produce nicely formatted text. That should be the target IMO. If you want to copy something retro, copy an old magazine, they were nicely designed.

But I mean, I’ll take this over a program trying to run in my browser, lol.

[kragen]

for dercuano my stylistic reference was medieval and early modern humanist manuscripts and incunabula, though without blackletter font, scribal abbreviations, and scriptio continua

[bobajeff]

I think this is a great experiment. It is readable on my phone but I probably wouldn't want to read everything like this though. I think it's worth looking at old visual designs (like this person did) and seeing how they can be used in design and UX.

[deafpolygon]

My issue with the page is; the white and black contrast is way too high for me. I have astigmatism, and I prefer a slightly lower contrast with a not-so-black background color.

The font is nice and I like the general concept, I have always liked monospace.

[OhMeadhbh]

   I built this page 'cause I like  to use Emacs' EWW and Lynx from
   terminal windows sometimes.  It's sort of thematically related:

      https://ohmeadhbh.github.io/bobcat/

   Greycoder.com had the same idea at around the same time:

      https://greycoder.com/a-list-of-text-only-new-sites/

   And this is the typeface I use for my xterms:

      https://github.com/lalo/VT220-mod-font

   Monospace is awesome.  I love what Oskar has done here.