11 ms·
The Monospace Web
- Animats 2y agoAt least it's not green on black.
- kibwen 2y agoYes, amber on black would be far superior.
- dredmorbius 2y agoWe'll always have Paris ^W jwz.org.
- 082349872349872 2y agoAt least it's not black on green bar continuous feed.
- Narishma 2y agoI'd rather green on black than the light gray on white (or dark gray on black) that modern websites seem to be fond of.
- alberth 2y agoTypography is so difficult on the web due to lack of support for things CSS textbox-trim https://github.com/jantimon/text-box-trim-examples 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).
- naet 2y agoThat 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.
- spartanatreyu 2y agoWell it's actually the font designers at fault here and not a CSS issue. See more here: https://tonsky.me/blog/centering/ 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.
- rahkiin 2y agoWow something Safari has already built and others haven’t.
- swiftcoder 2y agoTypography improvements are always pretty high on Apple's priority list
- whartung 2y agoMonospace 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.
- deleted 2y ago[deleted]
- vbernat 2y agoThat's not the case for this website. It is fully responsive.
- marcus_holmes 2y agowhat's the thing with scroll bars? (curious)
- rendaw 2y agoI 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).
- julienreszka 2y agodamn it looks good I like it
- bee_rider 2y agoEh, 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 2y agofor dercuano my stylistic reference was medieval and early modern humanist manuscripts and incunabula, though without blackletter font, scribal abbreviations, and scriptio continua
- abotsis 2y agoI wish textualize-web used this.
- pavlov 2y agoThe 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).
- alberth 2y agoIs 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)
- cpach 2y agoIMHO it’s the latter.
- 16bytes 2y agoI 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.
- miohtama 2y agoThe presentation page dearly needs colour. Even if you emulate terminal feeling, you need to use colour.
- 0xEF 2y agoThe 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.
- michelledepeil 2y agoIf 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.
- daliusd 2y agoIt looks nice and refreshingly light.
- rchaud 2y agoThe 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.
- kragen 2y ago[flagged]
- bee_rider 2y agoExtra annoying given that any fixed size font will have the same column alignments. Might as well use the user’s built in fixed font.
- deleted 2y ago[deleted]
- KronisLV 2y agoThe 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=swap 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/ 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.
- usually 2y agoIt 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.
- layer8 2y agoAgreed. It has started bothering me for authoring Markdown documents as well, where it’s often impractical to avoid monospace.
- cpach 2y agoSome 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/
- notpushkin 2y agoI 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 https://ia.net/topics/in-search-of-the-perfect-writing-font) Conversely, for reading Markdown, I prefer a rendered version in a proportional font.
- marcus_holmes 2y agoI 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.
- pistoleer 2y agoI 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.
- 2y ago
- prmoustache 2y agoMain 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.
- taeric 2y agoWhile 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.
- greenmartian 2y agoFirefox 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.
- prmoustache 2y agoGood point.
- wonger_ 2y agoI've been keeping a list of monospace pages: https://wonger.dev/posts/monospace-dump#web 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.
- jareklupinski 2y agohere's one more for the list :) https://jarek.lupin.ski/tape-deck/ https://jarek.lupin.ski/tape-deck/
- dspillett 2y agoOne of your examples is now a for sale domain. Still on WBM though: https://web.archive.org/web/20230216225350/https://kary.us/nota/ https://web.archive.org/web/20230216225350/https://kary.us/n...
- wonger_ 2y agoThanks! I've updated the list with more archived links.
- kristopolous 2y agomaybe there needs to be a gopher protocol refresh. some 2024 approach of the same idea.
- klez 2y agoThe 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.
- dmd 2y agoOoh, 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?
- CM30 2y agoI 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.
- dmd 2y agoGameFAQ was enough! FOUND IT! Thank you! https://gamefaqs.gamespot.com/snes/588741-super-metroid/faqs/10114 https://gamefaqs.gamespot.com/snes/588741-super-metroid/faqs...
- tvchurch 2y agoThis is why the internet exists. Incredible catharsis. Love it.
- 5- 2y agothis gets discussed, or at least mentioned, often on hn, e.g. https://news.ycombinator.com/item?id=28651093 https://news.ycombinator.com/item?id=28651093 (this very faq) https://news.ycombinator.com/item?id=40773880 https://news.ycombinator.com/item?id=40773880 (jart's commit) https://news.ycombinator.com/item?id=40605970 https://news.ycombinator.com/item?id=40605970 (tom7's gnujpl) and bonus: recently i've been enjoying http://arlyle.sdf.org/ http://arlyle.sdf.org/ (unfortunately, links do not work in preformatted text on hn)
- immibis 2y ago"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 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 https://suno.com/song/536fe16f-079c-4cce-921c-c2518f6dedb6 )
- bobajeff 2y agoI 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.
- Brajeshwar 2y agoThe 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.
- Brajeshwar 2y agoTo 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. :-)
- owickstrom 2y agoThanks, will do!
- sweeter 2y agoI 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.
- veeblevee 2y agoAlso sometimes called the small web. See The small web is beautiful by Ben Hoyt https://benhoyt.com/writings/the-small-web-is-beautiful https://benhoyt.com/writings/the-small-web-is-beautiful
- deergomoo 2y agoThe 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.
- chasil 2y agoOpenBSD 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 https://github.com/fcambus/spleen
- codetrotter 2y ago> 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.
- mxstbr 2y agoI 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.
- sampullman 2y agoIBM Plex Mono is pretty good, with a reasonable license. It's on Google Fonts, and the repo is here: https://github.com/IBM/plex https://github.com/IBM/plex
- mroche 2y agoI'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
- kiennt26 2y ago[dead]
- daemonologist 2y agoI'm partial to Drafting Mono - https://indestructibletype.com/Drafting/ https://indestructibletype.com/Drafting/ - for paragraph display. Not on Google Fonts but it's free (or very cheap for the variable version).
- mikae1 2y agoIts SIL licensed. Free and open source.
- notpushkin 2y agoAside, but please consider using https://fontsource.org/ https://fontsource.org/ instead of Google Fonts: just as easy to use, and no tracking (at least from Google).
- timetraveller26 2y ago2024 and no light mode?
- klez 2y agoIt uses your browser settings for light/dark mode. I'm seeing a light mode version on my machine.
- nsonha 2y agographic characters should not be copy-able
- _the_inflator 2y agoAn infamous C64 resource to this day is available in monospace, the so called “VIC article”: https://www.cebix.net/VIC-Article.txt 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.
- deafpolygon 2y agoMy 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.
- nbzso 2y agoI love monospaced fonts. Please, fix your line-height in the paragraphs. You can open more space and make things even more legible.
- ddingus 2y agoI 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.
- vladde 2y agoSuper 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/ https://vladde.net/blog/rfc-css/ (not as readable though IMO)
- agys 2y agoI’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.
- creesch 2y agoAlright, 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. ¯\_(ツ)_/¯
- 082349872349872 2y agoOTOH, 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...
- creesch 2y ago> 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.
- 082349872349872 2y agoThey 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_memoranda/2008/RM704.pdf https://www.rand.org/content/dam/rand/pubs/research_memorand... p13
- jslakro 2y agoIt seems a good alternative to concrete.css
- abdujabbar 2y agoThis is good work. Monospace fonts are always attractive. We are definitely brainwashed while living our lives behind terminals.
- deleted 2y ago[deleted]
- panr 2y agoVery 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/
- myfonj 2y agoNice. 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: /* 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. */ Interestingly, what cannot be turned off are the "programming ligatures". Personally I don't like them lately, and I think for a regular webpage content can be odd, especially the triple equals (===) that in JetBrains Mono and other "coding" font produces three parallel lines (like two glyphs wide Identical to : `≡`, if it passes HN character filter). 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-monospace-web https://userstyles.world/style/17888/owickstrom-github-iothe...
- jsx2 2y agoLooks 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.
- systems_glitch 2y agoCame 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.
- xenodium 2y agoWhile I haven't officially launched https://lmno.lol 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 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.
- javier_e06 2y agoTOM 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.
- juliend2 2y agoYou might also want to apply some dithering[1] to your images for an extra retrocomputing effect. [1]: https://ditherit.com/ https://ditherit.com/
- adr1an 2y agoOMG! This is so beautiful! Am I crying, or did my eye sight just had an orgasm?
- tambourine_man 2y agoVery 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.
- bool3max 2y agoNope, 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.
- snshn 2y agoI'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 https://github.com/Y2Z/invisible-ink?
- OhMeadhbh 2y agoI 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.
- PinkMilkshake 2y agoI 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.
- niutech 2y agoIf you want to experience pure monospaced web, try Carbonyl or Browsh in a Terminal.
- tianqi 2y agoIt's cool! Btw I would like to report that the charts will mess up if you use Google Translate for the page.