The Monospace Web(owickstrom.github.io)
owickstrom.github.io
The Monospace Web
https://owickstrom.github.io/the-monospace-web/
158 comments
Kerning makes such a huge difference in proportional fonts. Proper kerning allows your brain process word shapes much faster.
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
I'm curious about this too. Is this just preference/taste and the way everyone does things, or is there evidence to back it up. What could a modern study look like? There are so many aspects like the font, size, width or how much fixed width spacing between chars, screen/page size, background color, type of content. And are there other metrics than reading speed? Like information retention, or psychological effects like do people feel positively or negatively about the content/topic/reading experience.
I found this https://ux.stackexchange.com/questions/48753/does-the-use-of...
- > In Universal Principles of Design, the entry on legibility states: Proportionally spaced typefaces are preferred over monospaced.
- It's unclear if that book provides further evidence to this statement
- > One famous research on this is Beldie I. P., Pastoor S. & Schwarz E, 1983, “Fixed versus variable letter width for televised text”, Human Factors, 25, pp.273-277, where part of the results include: The reading time (Task 1) with the variable-matrix character design was 69.1 s on the average, and the mean reading time with the fixed-matrix character set was 73.3 s, t (8) = 2.76, p < 0.02. The difference is 4.2 s or 6.1% (related to fixed-matrix characters).
- I couldn't find a pdf of that one in particular. The difference seems small
- https://www.tandfonline.com/doi/abs/10.1080/0144929021014673...
- > Comic Sans MS, Arial and Times New Roman typefaces, regardless of size, were found to be more readable (as measured by a reading efficiency score) than Courier New.
- small sample size 27 children. also the children preferred comic sans... we could pick a cooler monospace font than courier new
- https://link.springer.com/article/10.1007/s10209-015-0438-8
- > It was found that larger text and larger character spacings lead the participants with and without dyslexia to read significantly faster
- unclear if those were monospaced
- https://www.researchgate.net/publication/20925173_Reading_wi...
> We compared the effects of fixed and variable (proportional) spacing on reading speeds and found variable pitch to yield better performance at medium and large character sizes and fixed pitch to be superior for character sizes approaching the acuity limit.
I found this https://ux.stackexchange.com/questions/48753/does-the-use-of...
- > In Universal Principles of Design, the entry on legibility states: Proportionally spaced typefaces are preferred over monospaced.
- It's unclear if that book provides further evidence to this statement
- > One famous research on this is Beldie I. P., Pastoor S. & Schwarz E, 1983, “Fixed versus variable letter width for televised text”, Human Factors, 25, pp.273-277, where part of the results include: The reading time (Task 1) with the variable-matrix character design was 69.1 s on the average, and the mean reading time with the fixed-matrix character set was 73.3 s, t (8) = 2.76, p < 0.02. The difference is 4.2 s or 6.1% (related to fixed-matrix characters).
- I couldn't find a pdf of that one in particular. The difference seems small
- https://www.tandfonline.com/doi/abs/10.1080/0144929021014673...
- > Comic Sans MS, Arial and Times New Roman typefaces, regardless of size, were found to be more readable (as measured by a reading efficiency score) than Courier New.
- small sample size 27 children. also the children preferred comic sans... we could pick a cooler monospace font than courier new
- https://link.springer.com/article/10.1007/s10209-015-0438-8
- > It was found that larger text and larger character spacings lead the participants with and without dyslexia to read significantly faster
- unclear if those were monospaced
- https://www.researchgate.net/publication/20925173_Reading_wi...
> We compared the effects of fixed and variable (proportional) spacing on reading speeds and found variable pitch to yield better performance at medium and large character sizes and fixed pitch to be superior for character sizes approaching the acuity limit.
NN group might have some resources, like this related article about all-caps: https://www.nngroup.com/articles/glanceable-fonts/
Or maybe more resources here: https://fonts.google.com/knowledge/readability_and_accessibi...
People tend to apply results from proportional font studies to monospace fonts. I guess monospace text isn't popular enough to get its own studies.
We need more readability A/B tests in general.
Or maybe more resources here: https://fonts.google.com/knowledge/readability_and_accessibi...
People tend to apply results from proportional font studies to monospace fonts. I guess monospace text isn't popular enough to get its own studies.
We need more readability A/B tests in general.
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!
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!
One of your examples is now a for sale domain. Still on WBM though: https://web.archive.org/web/20230216225350/https://kary.us/n...
Thanks! I've updated the list with more archived links.
> 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.
I agree, monospace without color and some formatting is like giving up a sense or spatial dimension. It's pointless austerity.
Why must monospace give up color?
here's one more for the list :) https://jarek.lupin.ski/tape-deck/
maybe there needs to be a gopher protocol refresh. some 2024 approach of the same idea.
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.
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.
> 'd say we decide on some arbitrary rules (like "only monospace fonts, no external javascript, only static content",
I think that's a great idea. You can go a long way with just Unicode these days: https://gwern.net/utext
All you need HTML/CSS for in an ordinary Gemini/gopher/Markdown-style document is clickable hyperlinks, really, and you can hack that by alternating a bit of HTML or by client-side convention.
I think that's a great idea. You can go a long way with just Unicode these days: https://gwern.net/utext
All you need HTML/CSS for in an ordinary Gemini/gopher/Markdown-style document is clickable hyperlinks, really, and you can hack that by alternating a bit of HTML or by client-side convention.
>"only monospace fonts, no external javascript, only static content"
So most of the Japanese amateur internet? :V
(CJK fonts are mostly monospace.)
So most of the Japanese amateur internet? :V
(CJK fonts are mostly monospace.)
Have you heard about https://geminiprotocol.net/ ?
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?
Anyone know what I'm talking about and have a link?
Cf. also http://tom7.org/bovex/ (a layout engine that tries to achieve a similar effect by rephrasing the input using an LLM).
Wow that was… such an amazing ride. Thank you for sharing!
CSI pun payoff at the end was worth it.
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.)
[0] http://www.catb.org/esr/jargon/html/B/bricktext.html (Also wow Google has completely erased this concept from its search results.)
Funny guide, different scene.
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… ;)
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… ;)
> Also wow Google has completely erased this concept from its search results
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.
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.
Google may have, but kagi still shows it prominently
I actually got an angelfire link in my search results a few days ago. Was related to quake 2
I actually got an angelfire link in my search results a few days ago. Was related to quake 2
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.
That person (Eric S. Raymond) also wrote "The Cathedral and the Bazaar"[0], a seminal work for the Open Source movement.
[0] http://www.catb.org/~esr/writings/cathedral-bazaar/
[0] http://www.catb.org/~esr/writings/cathedral-bazaar/
See also, "In the Beginning Was the Command Line", which I seem to recall was also monospace presented in the good ol' days ...
https://en.wikipedia.org/wiki/In_the_Beginning..._Was_the_Co...
Or maybe it was just a plain ol' textfile, I forget.
https://en.wikipedia.org/wiki/In_the_Beginning..._Was_the_Co...
Or maybe it was just a plain ol' textfile, I forget.
just came here to say your post makes me feel old. esr was a classic a cool 20 years ago. enjoy!
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...
https://github.com/laravel/laravel/blob/11.x/config/database...
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.
GameFAQ was enough! FOUND IT! Thank you!
https://gamefaqs.gamespot.com/snes/588741-super-metroid/faqs...
https://gamefaqs.gamespot.com/snes/588741-super-metroid/faqs...
this gets discussed, or at least mentioned, often on hn, e.g.
https://news.ycombinator.com/item?id=28651093 (this very faq)
https://news.ycombinator.com/item?id=40773880 (jart's commit)
https://news.ycombinator.com/item?id=40605970 (tom7's gnujpl)
and bonus: recently i've been enjoying http://arlyle.sdf.org/
(unfortunately, links do not work in preformatted text on hn)
https://news.ycombinator.com/item?id=28651093 (this very faq)
https://news.ycombinator.com/item?id=40773880 (jart's commit)
https://news.ycombinator.com/item?id=40605970 (tom7's gnujpl)
and bonus: recently i've been enjoying http://arlyle.sdf.org/
(unfortunately, links do not work in preformatted text on hn)
"I could totally hear the first one in singing form"
Thanks to AI, now you can.[1]
[1] https://suno.com/song/22f52bca-7119-4aac-8f0a-5daf9afa509d
(Also an amusing waste of time. Here's "a religious folk song in the format of a Cisco configuration file": https://suno.com/song/536fe16f-079c-4cce-921c-c2518f6dedb6 )
Thanks to AI, now you can.[1]
[1] https://suno.com/song/22f52bca-7119-4aac-8f0a-5daf9afa509d
(Also an amusing waste of time. Here's "a religious folk song in the format of a Cisco configuration file": https://suno.com/song/536fe16f-079c-4cce-921c-c2518f6dedb6 )
> unfortunately
Don't worry; I pasted your words
into vi just to experience their
fully justified bricktext glory.
Don't worry; I pasted your words
into vi just to experience their
fully justified bricktext glory.
Wow, this is wild! Maintaining perfect justification solely through word choice is... quite a writing constraint, lol. I don't think I've seen this done before.
I betcha it wasn’t perfectly through word choice alone as I can think of a few “tricks” that could be deployed undetectably.
Like what? I would think you could hide much in mono ASCII.
This is why the internet exists.
Incredible catharsis. Love it.
Incredible catharsis. Love it.
I would be even more impressed if the TOC and changelog followed the same layout.
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?
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?
https://marketplace.visualstudio.com/items?itemName=stkb.rew...
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.
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.
I will give that one a try, might at least speed up things, but it still misses hyphenation and justification. Hitting enter when reaching the guide line takes the least effort but this might be really handy when editing existing comments, especially with auto wrap enabled.
[deleted]
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.
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.
That's not the case for this website. It is fully responsive.
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).
[deleted]
what's the thing with scroll bars? (curious)
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.
Also sometimes called the small web. See The small web is beautiful by Ben Hoyt https://benhoyt.com/writings/the-small-web-is-beautiful
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.
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 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.
I definitely prefer this to the "beautiful" pages that try to capture the feel of old print magazines.
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.
Agreed. It has started bothering me for authoring Markdown documents as well, where it’s often impractical to avoid monospace.
I like monospace for writing Markdown. I can't point finger on why exactly, but it feels like a manuscript or something. (Although iA folks have quantified this a bit: https://ia.net/topics/in-search-of-the-perfect-writing-font)
Conversely, for reading Markdown, I prefer a rendered version in a proportional font.
Conversely, for reading Markdown, I prefer a rendered version in a proportional font.
Some Markdown editors defaults to using a proportional type face for body text. Quite nice! Typora is one of them, there are probably others.
https://typora.io/
https://typora.io/
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".
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.
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...
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...
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).
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.
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.
https://caiorss.github.io/bookmarklet-maker/
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/
Doesn’t work in Netscape Navigator.
Joke. Cheers! ;)
Joke. Cheers! ;)
How does it compare to the tightness of comments here in HN?
Looks like HN uses `line-height: normal`, so it would be the same factor of 1.2 times font-size that's used on the Monospace page.
Had the same instant turn off.
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
It's a pity that there isn't a TrueType version.
https://github.com/fcambus/spleen
> 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.
Can you use the OTF files instead? Their readme says there are OTF files in the release tarballs.
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.
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.
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.
Anybody know which ones are particularly good for long-form text readability?
Bonus points if it's on Google Fonts.
I'm partial to Drafting Mono - https://indestructibletype.com/Drafting/ - for paragraph display.
Not on Google Fonts but it's free (or very cheap for the variable version).
Not on Google Fonts but it's free (or very cheap for the variable version).
Its SIL licensed. Free and open source.
IBM Plex Mono is pretty good, with a reasonable license. It's on Google Fonts, and the repo is here: https://github.com/IBM/plex
I'm a fan of the Red Hat font family, i.e. Red Hat Display, Red Hat Text, and Red Hat Mono. They are available via CDNs, font providers, and directly from Red Hat:
https://www.redhat.com/en/about/brand/standards/typography
https://www.redhat.com/en/about/brand/standards/typography
Aside, but please consider using https://fontsource.org/ instead of Google Fonts: just as easy to use, and no tracking (at least from Google).
To be fair, the person could still use Google Fonts, but just download the font and host it themselves. The font licenses allow this.
You get the upsides of being able to pick a nice font from Google Fonts while not having the downside of tracking. It also helps with caching! And also prevents the font from disappearing for no reason.
You get the upsides of being able to pick a nice font from Google Fonts while not having the downside of tracking. It also helps with caching! And also prevents the font from disappearing for no reason.
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/
https://panr.github.io/terminal-css/
Nice. Interestingly, the JetBrains Mono OP uses has many opt-in OpenType feature variants that can make more like Fira Code that you use. Some highly opinionated changes I would personally do to like The Monospace Web more would be enabling more serif-y variants and less blockiness, i.e. something like:
I've put it into [1] along with some rules that makes it slightly easier to my eyes.
[1] https://userstyles.world/style/17888/owickstrom-github-iothe...
/*
Character Variants settings for JetBrains Mono
(All are off by default, left them here all for reference.)
H/T https://wakamaifondue.com/ for the inspect!
This set is pretty much like "ss01" but with "cv07" on
or like "ss02" but with "cv05" off
"id" state `affected glyphs` effect when enabled (my pref/note)
*/
font-feature-settings:
"zero" off, /* `0` slashed, instead of dotted */
"cv01" on, /* `l` flat serif bottom instad of curve (on!!)*/
"cv02" off, /* `t` bottom curve instead of hook */
"cv03" off, /* `g` double-storey (sadly not nice) */
"cv04" off, /* `j` rounded bottom hook */
"cv05" off, /* `l` rounded bottom hook */
"cv06" on, /* `m` smaller middle apex (on!) */
"cv07" on, /* `W` smaller middle apex (on!) */
"cv08" off, /* `K Ж` straight without horizontal joint */
"cv09" on, /* `f` slab serifs (on!!) */
"cv10" on, /* `r` slab serifs (on!!) */
"cv11" on, /* `y λ` rounded tails (on!) */
"cv12" on, /* `u` spur (on!) */
"cv14" on, /* `¢ $` broken strikes (on?) */
"cv15" off, /* `&` like 'ET' */
"cv17" off, /* `f` curved */
"cv18" off, /* `2,6,9 curved diagonals */
"cv19" off, /* `8` symmetrical halves */
"cv20" off, /* `5` rounded bow */
"cv99" off, /* `С с` (cyrillic es) inverted‽‽ */
"liga" off, /* Sadly, not. */
"ss00" off !important; /* // just a terminating bogus without comma. */
I've put it into [1] along with some rules that makes it slightly easier to my eyes.
[1] https://userstyles.world/style/17888/owickstrom-github-iothe...
EDIT: disabling ligatures is possible through disabling Contextual Alternates (calt), neat! And it is also possible to keep them on and change only appearance of aforementioned equal sign sequences back to "normal", using ss19. Turns out all features are nicely documented at GH Wiki [1]:
calt – Contains all ligatures. Substitution for : between digits.
ss19 – Adds gaps in ≠ ≠= == ≡≡ ligatures.
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).
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).
That type of font/textbox issue is my #1 gap in modern CSS.
Honestly I'm surprised that it wasn't addressed long ago, seems like such a foundational issue for rendering text.
Honestly I'm surprised that it wasn't addressed long ago, seems like such a foundational issue for rendering text.
Well it's actually the font designers at fault here and not a CSS issue.
See more here: https://tonsky.me/blog/centering/
But so much time is being wasted on developers fine tuning magic numbers that the browsers are extending CSS to automatically fix the font developer's mistakes.
See more here: https://tonsky.me/blog/centering/
But so much time is being wasted on developers fine tuning magic numbers that the browsers are extending CSS to automatically fix the font developer's mistakes.
Wow something Safari has already built and others haven’t.
Typography improvements are always pretty high on Apple's priority list
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 :)
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)
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)
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.
While this was certainly a promise of the early ideas in CSS, is this something that is actually done? I'm guessing more people run without javascript than pick their own fonts.
Firefox allows users to choose a global preferred font, but also individual Serif, Sans-Serif, and Monospace preferred fonts. Which means this site, which correctly specifies `monospace` as a font fallback, does show correctly in my preferred monospace font.
Good point.
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.
Nice work. Many very readable examples for others to draw on.
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.
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.
for dercuano my stylistic reference was medieval and early modern humanist manuscripts and incunabula, though without blackletter font, scribal abbreviations, and scriptio continua
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.
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.
The font is nice and I like the general concept, I have always liked monospace.
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.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.
btw, was reading the CSS, I smiled. Love it. :-)
btw, was reading the CSS, I smiled. Love it. :-)
Thanks, will do!
While I haven't officially launched https://lmno.lol blogging platform and not exactly monospaced, it shares much of the site's simplicity. You can view my blog at https://lmno.lol/alvaro (powered by a single markdown file). You can already play with the platform without signing in, but if you're keen to start blogging today, ping help\at\lmno.lol and I'll share an invite code.
At least it's not green on black.
I'd rather green on black than the light gray on white (or dark gray on black) that modern websites seem to be fond of.
We'll always have Paris ^W jwz.org.
At least it's not black on green bar continuous feed.
Yes, amber on black would be far superior.
It looks nice and refreshingly light.
The page loads a webfont (Jetbrains Mono) with 4 different weights, for a total payload of 725KB. Looking light and being light are 2 different things.
The problem is mostly with how fonts are packaged, because even if you serve WOFF and WOFF2 in addition to fallbacks like TTF, then the font will most likely include a whole bunch of symbols that you won’t actually display.
A way around this would be to split the font into multiple subsets based on unicode-range, like how Google Fonts do it: https://fonts.googleapis.com/css2?family=Open+Sans&display=s...
Sadly, I never quite figured out how to do it for arbitrary fonts easily, so for example I still serve comparatively large PT Sans, PT Serif and PT Mono fonts just because I like how they look. Maybe some day I’ll figure it out and will be able to automate converting all of the fonts I want.
Here’s something silly: you could probably put GNU Unifont on some page, the OpenType version of which is like 5 MB alone: https://unifoundry.com/unifont/
All that said, the JetBrains Mono font is a pleasure to look at on the site, as long as I’m not on a limited data cap.
A way around this would be to split the font into multiple subsets based on unicode-range, like how Google Fonts do it: https://fonts.googleapis.com/css2?family=Open+Sans&display=s...
Sadly, I never quite figured out how to do it for arbitrary fonts easily, so for example I still serve comparatively large PT Sans, PT Serif and PT Mono fonts just because I like how they look. Maybe some day I’ll figure it out and will be able to automate converting all of the fonts I want.
Here’s something silly: you could probably put GNU Unifont on some page, the OpenType version of which is like 5 MB alone: https://unifoundry.com/unifont/
All that said, the JetBrains Mono font is a pleasure to look at on the site, as long as I’m not on a limited data cap.
Or he could have just used "font-family: monospace;" and let the user's system font stack render it.
Sure, except:
Instead, nobody cares and the only options we have are to either use the crappy web safe fonts, or waste bandwidth to make websites look better. Luckily, if you prefer the former approach, then you can untick "Allow pages to choose their own fonts, instead of your selections above" in Firefox options or the equivalent in other browsers.
- those fonts will have different sizes (not guaranteed to be metrically compatible), which would make working with UI harder
- sometimes the built in fonts look pretty unpleasant (Courier New, anyone?)
- it will look different on every OS, which in most cases will also complicate testing and hurt branding (in actual projects)
Instead, nobody cares and the only options we have are to either use the crappy web safe fonts, or waste bandwidth to make websites look better. Luckily, if you prefer the former approach, then you can untick "Allow pages to choose their own fonts, instead of your selections above" in Firefox options or the equivalent in other browsers.
Absolutely. People like to lie in this way: skeleton loaders, make-up and etc
kragen(2)
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
> Maybe we’re just brainwashed from spending years in terminals?
Made me go ... Ugh...
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.
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't give it nearly as much thought and attention as the author of this website.
I know many people on HN don'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. ¯\_(ツ)_/¯
> Maybe we’re just brainwashed from spending years in terminals?
Made me go ... Ugh...
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.
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't give it nearly as much thought and attention as the author of this website.
I know many people on HN don'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. ¯\_(ツ)_/¯
OTOH, I spend way more time per week reading typewritten mss (some with handwritten greek) that have something to say, than I do reading typographically best-practiced word salads...
> typewritten mss (some with handwritten greek)
Not sure what you mean by that.
Also, just because you spend a lot of time reading information formatted with monospaced fonts doesn't mean they are the best way for you to receive that information.
Not sure what you mean by that.
Also, just because you spend a lot of time reading information formatted with monospaced fonts doesn't mean they are the best way for you to receive that information.
They may not be the theoretical best way, but let's not let the perfect be the enemy of the good.
If you have something to say, I have nothing against improving its typography.
If not, I'd argue for concentrating on spending effort finding, not a better typography, but better words.
:: :: ::
> Not sure what you mean by that.
Older research papers were often written with typewriters, leaving blank spots on the page for formulae, which were then (to a greater or lesser degree) put in in a second pass, with methods ranging from straight freehand to using drafting tools for lettering them.
eg (1951) https://www.rand.org/content/dam/rand/pubs/research_memorand... p13
If you have something to say, I have nothing against improving its typography.
If not, I'd argue for concentrating on spending effort finding, not a better typography, but better words.
:: :: ::
> Not sure what you mean by that.
Older research papers were often written with typewriters, leaving blank spots on the page for formulae, which were then (to a greater or lesser degree) put in in a second pass, with methods ranging from straight freehand to using drafting tools for lettering them.
eg (1951) https://www.rand.org/content/dam/rand/pubs/research_memorand... p13
> They may not be the theoretical best way, but let's not let the perfect be the enemy of the good.
Sure, but this being the web and the font choice literally being one line of CSS it is not that hard to make things slightly better for everyone involved.
Even more so when a lot of the blogs I have in mind also try to appeal to a slightly broader audience than just the nerds used to monospaced fonts.
> Older research papers were often written with typewriters, leaving blank spots on the page for formulae,
Well, if you read them on paper it is a slightly different story. That is one of the main issues, fonts work differently on displays than on paper.
If you mean that you read these scanned papers, then I'd say that your argument mostly boils down to you being used to it by now. People can get used to a lot of things, to the point that they think they prefer it out of habit. That doesn't mean that they are actually better and can't be made better for other people starting out who are not used to these things.
Sure, but this being the web and the font choice literally being one line of CSS it is not that hard to make things slightly better for everyone involved.
Even more so when a lot of the blogs I have in mind also try to appeal to a slightly broader audience than just the nerds used to monospaced fonts.
> Older research papers were often written with typewriters, leaving blank spots on the page for formulae,
Well, if you read them on paper it is a slightly different story. That is one of the main issues, fonts work differently on displays than on paper.
If you mean that you read these scanned papers, then I'd say that your argument mostly boils down to you being used to it by now. People can get used to a lot of things, to the point that they think they prefer it out of habit. That doesn't mean that they are actually better and can't be made better for other people starting out who are not used to these things.
See sibling https://news.ycombinator.com/item?id=41383534
For instance, in this very convo what matters is that we're talking past each other, and I think that'd likely happen regardless of whether our comments were in fixed or proportional fonts, regardless of what other typographical choices might be made.
For instance, in this very convo what matters is that we're talking past each other, and I think that'd likely happen regardless of whether our comments were in fixed or proportional fonts, regardless of what other typographical choices might be made.
Well, you presented your use case as an "on the other hand" counter argument for me saying what sort of fonts generally work better. Which it isn't, it is just a specific use case where monospaced fonts happen to be used and it is difficult to change them.
That doesn't change the fact that in environments where there is control over all that monospaced fonts rarely are the best choice for large bodies of text.
That doesn't change the fact that in environments where there is control over all that monospaced fonts rarely are the best choice for large bodies of text.
I'm not sure what you're trying to say about TFA.
Where monospace was pragmatic for the typewriter era because of the limitations of the technology, proportional is the pragmatic _and default_ styling of the web.
Choosing monospace today for prose is an opinionated, and in my opinion suboptimal, choice.
Where monospace was pragmatic for the typewriter era because of the limitations of the technology, proportional is the pragmatic _and default_ styling of the web.
Choosing monospace today for prose is an opinionated, and in my opinion suboptimal, choice.
For what I read, the limiting factor is how quickly and easily I can grok what they are trying to communicate, not how quickly and easily I may be able to apprehend the letterforms.
Sure, there are better typographical choices than monospace, but even bothering with that decision is like optimising a 2*x to an x<<1 in code that's hitting disk anyway.
(on the flip side: it doesn't matter how easy it is to read a sequence of words, or how beautiful they may be, if they don't communicate anything; the code analogy is that it doesn't matter how much faster a buggy change runs)
Does that make sense?
Sure, there are better typographical choices than monospace, but even bothering with that decision is like optimising a 2*x to an x<<1 in code that's hitting disk anyway.
(on the flip side: it doesn't matter how easy it is to read a sequence of words, or how beautiful they may be, if they don't communicate anything; the code analogy is that it doesn't matter how much faster a buggy change runs)
Does that make sense?
Maybe decades worth of research aren't worth anything and it all comes down to personal preferences and what you are used too (i.e. resistance to change)? ¯\_(ツ)_/¯
Your comment is a perfect example of why the wheel gets reinvented so often.
Part of it is preference, sort of. A specific crowd of people, many of who visit HN, are used to looking at monospaced fonts. So, they have effectively been trained to be able to deal with it more.
That still doesn't mean that, even for them, the text done with best practices wouldn't be easier to read.
Finally, as you might have noticed I also explicitly mentioned writing for a broader audience. Because people that are not working with code, terminals, etc all are not used to monospaced fonts.
Part of it is preference, sort of. A specific crowd of people, many of who visit HN, are used to looking at monospaced fonts. So, they have effectively been trained to be able to deal with it more.
That still doesn't mean that, even for them, the text done with best practices wouldn't be easier to read.
Finally, as you might have noticed I also explicitly mentioned writing for a broader audience. Because people that are not working with code, terminals, etc all are not used to monospaced fonts.
[deleted]
I’m using monospace for my homepage and for many of my projects (I had a custom font made express for my ASCII experiments!).
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.
Side note: the CSS “ch” unit can be handy to build monospaced layouts.
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.
Side note: the CSS “ch” unit can be handy to build monospaced layouts.
I'm on mobile right now, can't inspect how they did the web fonts. Is it JS-based, or they used something similar to this https://github.com/Y2Z/invisible-ink?
Very tasteful, well done. Having said that:
Monospaced fonts are harder to read in long form.
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.
Monospaced fonts are harder to read in long form.
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 "pattern glare" 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.
[1]: https://ditherit.com/
[1]: https://ditherit.com/
It'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.
My favorite font is Terminus for my code and whatever the New York Times Magazine font is for reading.
But when it comes to get the message across....Papirus.
My favorite font is Terminus for my code and whatever the New York Times Magazine font is for reading.
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.
The content is text. I know we've gotten used to the general clown-vomit look of the modern web, but come on. This site is more of an ebook than anything, no sense in over-complicating it.
If you want to experience pure monospaced web, try Carbonyl or Browsh in a Terminal.
2024 and no light mode?
It uses your browser settings for light/dark mode. I'm seeing a light mode version on my machine.
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't need to re-invent the wheel for this. Just take HTML4, CSS2, and so on.
Came here to say this. Believe we've had it all along, since Nestcape won on <H1> being the big size :P
Specifically, I want a monospaced site to display in the monospace font I choose for my browser. Because that's what I like reading.
Specifically, I want a monospaced site to display in the monospace font I choose for my browser. Because that's what I like reading.
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.