The Monospace Web

I&#x27;ve been keeping a list of monospace pages: <a href="https:&#x2F;&#x2F;wonger.dev&#x2F;posts&#x2F;monospace-dump#web" rel="nofollow">https:&#x2F;&#x2F;wonger.dev&#x2F;posts&#x2F;monospace-dump#web</a>. Currently have ~50.<p>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.<p>Monospace text is fine if you avoid long-form text, like when it&#x27;s structured and highlighted in a code editor.<p>But it sure is pretty! Especially with Unicode charts and ASCII art.

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 <i>full justified</i> perfectly all the way through (thousands of lines!) SOLELY through word choice.<p>Anyone know what I&#x27;m talking about and have a link?

Monospace doesn&#x27;t bother me.<p>Is the hard line endings that bother me.<p>Someone with their &quot;retro&quot; web site that, essentially, uses pre tags.<p>You get a wall of text, in a small font on the phone, reader view doesn&#x27;t work, and if you tilt is sideways, you&#x27;re as likely to get scrollbars as not.<p>Nowadays this is also my singular complaint with tech mailing lists. The hard line endings and rigid layout.

I was watching a video today that called stuff like this the &quot;indie web&quot; 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.

It looks nice, and I&#x27;m glad that it&#x27;s semantic and responsive, but the fundamental problem is that monospace just isn&#x27;t great for body text. I&#x27;ve read blog posts on multiple sites with monospaced body text, it&#x27;s okay, but proportional really is the way to go in my opinion.

If nothing else, the tree ul-list css class is good enough that it should be part of the HTML spec (as in: a &lt;tree&gt; 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.<p>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).

OpenBSD started setting the console font to &quot;Spleen&quot; several years ago.<p>It&#x27;s a pity that there isn&#x27;t a TrueType version.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;fcambus&#x2F;spleen">https:&#x2F;&#x2F;github.com&#x2F;fcambus&#x2F;spleen</a>

An infamous C64 resource to this day is available in monospace, the so called “VIC article”:<p><a href="https:&#x2F;&#x2F;www.cebix.net&#x2F;VIC-Article.txt" rel="nofollow">https:&#x2F;&#x2F;www.cebix.net&#x2F;VIC-Article.txt</a><p>Main issue is printing.<p>The article uses a diagram that needs fixed references in a two dimensional space. That’s why monospace here is invaluable.<p>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.

I was thinking about changing my personal website&#x27;s font to a monospaced one.<p>Anybody know which ones are particularly good for long-form text readability?<p>Bonus points if it&#x27;s on Google Fonts.

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&#x27;t want to use Hugo and all they need is a simple CSS file.<p><a href="https:&#x2F;&#x2F;panr.github.io&#x2F;terminal-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;panr.github.io&#x2F;terminal-css&#x2F;</a>

Typography is so difficult on the web due to lack of support for things CSS textbox-trim<p><a href="https:&#x2F;&#x2F;github.com&#x2F;jantimon&#x2F;text-box-trim-examples">https:&#x2F;&#x2F;github.com&#x2F;jantimon&#x2F;text-box-trim-examples</a><p>You can see that even on this website, if you click &quot;Debug Mode&quot; (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).

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.

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 :)<p>I made a similar thing where I take semantic HTML and render it as old RFC documents: <a href="https:&#x2F;&#x2F;vladde.net&#x2F;blog&#x2F;rfc-css&#x2F;" rel="nofollow">https:&#x2F;&#x2F;vladde.net&#x2F;blog&#x2F;rfc-css&#x2F;</a> (not as readable though IMO)

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.

I love monospace. Has to be early computing experiences working a lot like music does in our early life.<p>Nice work. Many very readable examples for others to draw on.

Eh, I dunno.<p>Websites have definitely gotten over-complicated and quite annoying. But this retro “look like a terminal” style seems like the wrong direction.<p>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.<p>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.<p>But I mean, I’ll take this over a program trying to run in my browser, lol.

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

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.<p>The font is nice and I like the general concept, I have always liked monospace.

<p><pre><code> I built this page &#x27;cause I like to use Emacs&#x27; EWW and Lynx from terminal windows sometimes. It&#x27;s sort of thematically related: https:&#x2F;&#x2F;ohmeadhbh.github.io&#x2F;bobcat&#x2F; Greycoder.com had the same idea at around the same time: https:&#x2F;&#x2F;greycoder.com&#x2F;a-list-of-text-only-new-sites&#x2F; And this is the typeface I use for my xterms: https:&#x2F;&#x2F;github.com&#x2F;lalo&#x2F;VT220-mod-font Monospace is awesome. I love what Oskar has done here.</code></pre>

To the creator, can you please update your Github repository settings to include the final viewable URL. I would love people not to miss the final result if they stumble on the source.<p>btw, was reading the CSS, I smiled. Love it. :-)

While I haven&#x27;t officially launched <a href="https:&#x2F;&#x2F;lmno.lol" rel="nofollow">https:&#x2F;&#x2F;lmno.lol</a> blogging platform and not exactly monospaced, it shares much of the site&#x27;s simplicity. You can view my blog at <a href="https:&#x2F;&#x2F;lmno.lol&#x2F;alvaro" rel="nofollow">https:&#x2F;&#x2F;lmno.lol&#x2F;alvaro</a> (powered by a single markdown file). You can already play with the platform without signing in, but if you&#x27;re keen to start blogging today, ping help\at\lmno.lol and I&#x27;ll share an invite code.

At least it&#x27;s not green on black.

It looks nice and refreshingly light.

Alright, before I continue my comment. I love the look and overall feel of the website. From an aesthetics point of view, I think it looks awesome. However... this sentence<p>&gt; <i>Maybe we’re just brainwashed from spending years in terminals?</i><p>Made me go ... Ugh...<p>Yes, I very much think so. To be fair, they do a fairly good job with the monospaced font they are using on this website, which is fairly legible. They also seem to actually have put thought into it, other than just doing monospaced fonts for aesthetics.<p>But, if your main content is semi long form text, then a monospaced font is simply not a good choice. Certainly not when the majority of people who use it on their blog don&#x27;t give it nearly as much thought and attention as the author of this website.<p>I know many people on HN don&#x27;t see it as an issue, certainly not people responding in this thread. However, there are decades worth of research into typography and typesetting on displays that makes it clear that a sans serif font (or even a serif font on modern displays) works better for readability. ¯\_(ツ)_&#x2F;¯

I’m using monospace for my homepage and for many of my projects (I had a custom font made express for my ASCII experiments!).<p>But I disagree with the claim that monospaced fonts are easier to read, especially for longer texts and writings. The monotone rhythm will tire the eye, eventually.<p>Side note: the CSS “ch” unit can be handy to build monospaced layouts.

I&#x27;m on mobile right now, can&#x27;t inspect how they did the web fonts. Is it JS-based, or they used something similar to this <a href="https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;invisible-ink">https:&#x2F;&#x2F;github.com&#x2F;Y2Z&#x2F;invisible-ink</a>?

Very tasteful, well done. Having said that:<p>Monospaced fonts are harder to read in long form.<p>Using box-drawing characters when you have a web browser seems silly. I’d rather have minimalistic design with proper canvas, CSS, etc. You’re already using rounded borders, anyway.

I have some &quot;pattern glare&quot; issues. I find monospace fonts harder to read because it shimmers and glows. It happens with proportional fonts as well, just not as bad.

You might also want to apply some dithering[1] to your images for an extra retrocomputing effect.<p>[1]: <a href="https:&#x2F;&#x2F;ditherit.com&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ditherit.com&#x2F;</a>

It&#x27;s cool! Btw I would like to report that the charts will mess up if you use Google Translate for the page.

I love monospaced fonts. Please, fix your line-height in the paragraphs. You can open more space and make things even more legible.

This is good work. Monospace fonts are always attractive. We are definitely brainwashed while living our lives behind terminals.

TOM QVAXY I took industrial design back in the day where there was no cad. With had to space manually the letters above and crunch them to make the title pleasant to the eye. Steady hand a sense of proportion where key to pass the test with ratio rulers and Rotring mechanical pencils in hand.<p>My favorite font is Terminus for my code and whatever the New York Times Magazine font is for reading.<p>But when it comes to get the message across....Papirus.

graphic characters should not be copy-able

The presentation page dearly needs colour. Even if you emulate terminal feeling, you need to use colour.

If you want to experience pure monospaced web, try Carbonyl or Browsh in a Terminal.

2024 and no light mode?

It seems a good alternative to concrete.css

I wish textualize-web used this.

damn it looks good I like it

OMG! This is so beautiful! Am I crying, or did my eye sight just had an orgasm?

Nope, nope, and nope. Unless you are presenting code or some data in a tabular format, or require even spacing for some other reason, please don’t use a monospace font.

Looks nice, but I would prefer true minimalism. That is, something similar, but without necessaty to use additional 500-line CSS (God! Please, kill this format in the most painful way!) and other a d d i t i o n a l stuff that is used to get a minimalistic look-and-feel. What we really need is something like a POSIX standard for web. We don&#x27;t need to re-invent the wheel for this. Just take HTML4, CSS2, and so on.