Convincing-looking 90s fonts in modern browsers(vistaserv.net) |
Convincing-looking 90s fonts in modern browsers(vistaserv.net) |
The only issue I noticed is that the up/down buttons don't have a "pressed" state as they should. The arrow should move down and to the right by one pixel (with some appropriate redrawing of the border - I would have to look up the details on that). But even with that one nit, very nicely done!
I see this more as a "just because we can" art project, than anything else.
EDIT: it also occurs to me that i have tons of respect for the hours of effort that would've gone into making fonts back then be beautiful at such small DPI. I think it's a good example of constraints producing interesting/good/impressive art. But i should avoid waxing too philosophical!
This is a cool project but the end result doesn't really look like it does on real hardware
Why go to this effort? I find the sharpness and contrast of screen fonts much more readable than anti-aliased fonts, at least under ideal circumstances (e.g. the screen font supports a given font size at a given resolution). Unfortunately, those ideal circumstances are incredibly rare these days.
* browser history actually works
* middle-click or ctrl+click on a link actually opens links in a new tab.
* No loading spinners, content is rendered immediately.
This site performs better than most SPAs.
"DINO would like you to know that more than three toppings will be expensive and won't be any better."
Didn't you read the note at the bottom?
"This site is best viewed with Netscape. Download v4.7.2 by clicking here."
Clearly, you didn't follow the instructions for best viewing experience!
Nice easter egg from the source code:
<!-- <audio autoplay="autoplay" controls="controls"><source src="topgun.mid" type="audio/mpeg"></audio> -->When it finally worked, I was disappointed to see that I couldn't get it to run on Win 10 (64-bit).
(It does appear to be a Windows executable, though)
http://www.seattlemag.com/article/three-impressions-dino-s-t...
The other common look was the simple document, such as https://cr.yp.to/djb.html
Look at the IE5 screenshot. The second last line has the word "finibus" and notice how the "f" and the "i" seem to be combined together. That's a ligature. In contrast in the body text of the website I don't see any. The word "file" in the paragraph right above the screenshot is missing that ligature.
Kerning is, well, also wrong. So wrong that I literally trouble reading the body text, but I have no trouble reading the text in the IE5 screenshot. (Bad kerning: once you see it you can't unsee it.)
We have indeed still got a bunch of visual glitches we couldn't iron out, including the one ~saagarjha has reported to WebKit! We had assumed it was our font being broken, but i'm keen to follow that one.
Otherwise getting hinting right on all browsers in high-DPI has basically been impossible. Maybe we should simply recommend everyone use a Windows 98 User Agent ;)
However, your other idea is great! You might enjoy https://paschke-images-test.s3.amazonaws.com/welcome.html ;)
I actually went through the same experimentation when I worked on the fonts and the website at https://int10h.org/oldschool-pc-fonts/. I ended up with a slightly different solution - the Bits'N'Picas converter, which works very much like potrace-pixelperfect, and takes either .png or actual bitmap fonts as input: https://github.com/kreativekorp/bitsnpicas.
What would be ideal is if the bitmap strikes themselves could be rendered in the browser - not really a tall order since they're part of the TrueType specs, and a rasterizer is supposed to use them when they exist. Unfortunately, it turned out that most browsers run the OpenType Sanitizer on the webfonts they parse, and it removes certain tables including the ones that specify the bitmaps. :(
Super interesting, what you're saying about the OpenType Sanitizer – i'd wondered why it appears you can't use bitmapped fonts in browsers (although another commenter claims you can – i don't know either way).
I'll have a look at Bits'N'Picas, thanks for the heads up!
AFAIK bitmapped fonts can be rendered in-browser, but only if they're installed on the host (aka the 'old' way), not as css webfonts. Embedding bitmap strikes in a TrueType font is a neat trick used by e.g. Terminus, and by many CJK fonts shipped with Windows, etc., but the browser sanitizer thing just strips them - more info here: https://stackoverflow.com/a/57930594
(Unfortunately this type of font has its pitfalls even outside of the browser. E.g. Windows makes you jump through a completely unreasonable series of hoops to make them work: https://int10h.org/blog/2016/01/windows-cleartype-truetype-f...)
Kerning seems to be very browser dependent as well, seems like Blink does better job there.
Is it really ten times the resources, and really doing the same thing?
My computer today uses much less power than what I had in the '90s, and cost less too. It has an internal 4K display and two external 4K displays.
My '90s computer had a single 1280x1024 CRT where I always had to tweak the focus and alignment to get readable text. With no GPU, scrolling in an editor was always an exercise in patience, watching the text repaint line by line.
Today all my monitors are high-DPI, everything scrolls instantly, and those vector fonts are what allow for crisp, detailed, and readable text on each display.
Don't get me wrong, I think this '90s font site is a wonderful exercise in nostalgia and CSS ingenuity and is very cool!
But you couldn't get me to go back to those days.
I don't intend to insult, but to me this came across to me as a kid larping as someone who used computers in the 90s.
Computers have improved by hardly imaginable magnitudes, but latency and interactive responsiveness for simple tasks like text editing is not generally one of them.
Whenever I go into the attic to dig out a really old machine to pull something off it, I am immediately struck by how much more responsive the interface is compared to current systems.
I respect that your experience is different but I can't figure out how that could possibly be.
Verdana for the interface, Times New Roman, Courier New for monospace ... aaaaahhhhh!
Maybe there should be a library-based approach that provides the same functionality as potrace.
Putting it in your CSS works out of the box, but to use it in your terminal or word processing app, you have to go to the fonts app and enable non-latin fonts and then select it (but it is already installed).
That said, most of the 90s webpages didn't look like that. Images were used instead. For example:
Edit: for contrast with more personal sites, try https://twitter.com/gifmodel/status/456761420319686656
Firefox 68esr (left) is crisp but has too tall characters(?) resulting in a gap in lowercase 'o'.
Chrome 80 (right) has this problem and is blurry in addition.
But then i thought to try enabling it and it turns out it looks blurry here (100% scaling in case anyone wonders, since i saw others mentioning non-100% scaling). Firefox, Windows 10.
I wonder if it has anything to do with cleartype settings or whatever.
I'm using Chromium, but the "-webkit-font-smoothing: none" style doesn't appear to be changing anything.
I know this is a tad off-topic, but, it's sort of related since it's about fonts.
I've been looking for a good "serial killer typewriter" typeface, similar to what's used in the credits of the TV show Supernatural, but I haven't found anything that looks particularly good. Does anybody have any recommendations? Free fonts would be preferred, but I'm willing to pay a bit for the right look.
And here i was thinking HTML was a bit like LaTeX – mostly whitespace-agnostic! Just shows you what spending too long in academia will do to you.
Perhaps whatever causes that rendering might be of use in cases like this, since it would also allow zooming/higher font sizes.
Edit: although it may only display as such on Windows only, come to think of it.
The Acorn ecosystem was way ahead until it suddenly wasn't. But my first webppage in about 1996 was made on an Acorn machine and, as far as I recall, the text was antialiased back then.
In 1992, on a 640x480 CRT, fonts rendered on RISC OS were excellent. Losing this when I switched to Windows around 1995 was a big step backwards.
NB if viewing on a HiDPI screen, the browser will blur the image at it scales it for the webpage. Instead, look at [2] and zoom the page to 50% -- that's exactly how I remember it, except half the size.
[1] https://telcontar.net/Misc/GUI/RISCOS/#text
[2] https://telcontar.net/Misc/GUI/RISCOS/Text--AA-sub-pixel.png
However, there will probably still be a problem if the intended font height doesn't match the actual one in the user's browser—and you can't control that with accuracy to a pixel (CSS pixels aren't screen pixels).
Maybe it’s just that a Mac IIsi running System 7 was my first computer when I was seven years old, but I think there’s a timeless beauty to the operating system that no later release has really captured.
Some more images here: https://www.versionmuseum.com/history-of/classic-mac-os
Those folder and control panel icons just slay me.
However, you probably cherish more your memory of the system than the actual thing, and emulators don't help with that.
Actually, my Mac IIsi still works last I checked, but that was about ten years ago!
Strongly hinted fonts of win2k era looked quite nice, but this is just blurry mess.
(It was possible to render a real fi glyph, but only by using the Unicode presentation-form code point U+FB01; IE5 didn't do automatic ligatures in Latin script, and even if it did, Times New Roman did not have the OpenType support for that.)
It does appear that the IE5 screenshot shows significantly tighter letter spacing in general than the body text, which is why we see the "fi" glyphs touching in IE5 whereas they're separate in the text of the page. I guess that's probably related to size-specific glyph metrics or hinting that is snapping the glyph advances to a narrower width than the "fake-bitmap" font produces.
That's actually a really neat solution in the absence of explicitly defined ligatures... since there is no antialiasing, it only needs a little care when designing the font at the pixel level and choice of kerning and the result will be indistinguishable. fi is a very geometrically natural ligature though, i wonder if it doesn't work so well for others that are too dissimilar to their components.
If it's really illegible, i wonder if there isn't some other rendering bug happening – we admittedly didn't do much testing other than Chrome/Safari/Firefox on latest macOS. And i've seen some pretty weird glitches with this kind of custom font, e.g., https://github.com/jdan/98.css/issues/13. If something is truly that broken feel free to hit us up at webmaster@ with a screenshot, we'd appreciate the bug reports!
For the kerning, ok, that's more work...
Some people don't care, some people get used to both, but for some people going from Windows to anything else is difficult.
I like my fonts sharp (and pixelated if required) and I truly think e.g. Verdana 8 and 10 are a marvel of legibility, without antialiasing but with hinting, as explained below or in the font-howto.
There is one of my daughter's laptop, Windows 10, where I never succeeded in having the fonts right, whichever Cleartype setting or without Cleartype. This is so disappointing when tech that used to work so good gets broken.
I might eventually adopt antialiased fonts when I get a monitor with high enough resolution. For now, on a 96-dpi monitor, it's sharp fonts all the way. I can tell the difference after a day's work. Sharp fonts are easier on my eyes.
Isn't freedom nice?
I guess it‘s because Apple did it.
If your pixels are visible then yeah, nothing beats fonts designed for big pixels.
* No enormous overlay asking me to approve cookies
Infinality-fontconfig used to be the thing for emulating the font rendering of other operating systems, I haven't kept up since freetype merged the various interpreter tweaks that used to be proprietary. I'm sure you can pass options to fontconfig/freetype to tweak it to your liking.
I stick to hintslight now and I'm perfectly happy with the results.
Finally, I can wear my love for top gun on my sleeve and—for the first time in a decade—take my phone off vibrate.
Edit: why is this so hard to do on an iPhone? Guess I shouldn’t be surprised.
Remember there was a time, a sweetspot, when browsing was something that would never tax any modern computer?
Nowadays, with my work issued laptop, many web pages (especially apps) load slow or are laggy. They even continue to load stuff while I scroll, which makes everything worse.
And we got used to that, just because each week a new tool, tracker or framework comes out that just needs to be out on the page post haste.
The stuff that web developers get away with through the ages would have gotten other devs fired. Look at how crisp and usable the Win2k UI was, while web pages looked like that.
Web devs today are the same people who put font gifs, colorful backgrounds, flash intros and midi files on websites back then.
There was an underlying issue that web design was difficult before browsers supported CSS 2.1 well. You really couldn't get HTML elements to fit a graphical design reliably. CSS 1 didn't really have the ability and table layouts were pretty coarse. Using raster graphics was pretty much the only way to get fancy designs to look right across browsers.
Everyone without a retina screen is wrong, according to you. And yet, fonts used to look just fine on our terrible screens.
I have not seen a blurry font on Mac since 2012 - with the exception of legacy programs that don’t use modern libraries, because (again) modern libraries and modern screens simply don’t give you blurry fonts. If you have some legacy tech in your stack, then you have to do some work to compensate.
Apple can tweak their font rendering and favor hi-DPI screens if they want, but there's no excuse for messing up with settings that worked well in the past. Is it that hard for mac OS to automatically adjust these settings?
Apple sold their awfully shiny 27" Thunderbolt display until 2016 after all.
Sadly https://www.dinostomatopie.com/ and http://www.dinostomatopie.com/ failed to open with a message saying "Netscape and this server cannot communicate securely because they have no common encryption algorithm(s)".
I'm about to go to sleep but there's ones that forward https as http, convert webp and png to gif, strip JavaScript to prevent the browser from locking up, etc.
There's a real world use for this in crazy companies where people are forced on some old browser. This makes them not go down in glorious flames at every site.
I'm aware of https://github.com/tenox7/wrp but converting everything to a gif is quite a bit more destructive!
There are companies who will sell this to you but essentially it’s really headless Chrome running in the cloud somewhere.
It might also help with SEO? Google's been pushing for https everywhere.
mitmdump --mode=reverse:https://news.ycombinator.com
There's also a nice (though under-documented) scripting interface, so you could probably write a script that does this for all sites in regular proxy mode. I found an example of this here, though I didn't test it: https://groups.google.com/forum/#!topic/mitmproxy/IAJ0-MHVC0...
This actually doesn't looks as easy to do in 2020 as it was in 2009. I also had luck at chaining proxies that did different features as well so one would do a certain transformation and pass it off to another etc.
I've also done partial implementations just using php ... you can preg_replace most things and it more or less works.
But yes I had assumed things had gotten easier but apparently they've actually become more difficult.
Although that started happening much more when text editors started to be written in garbage collected languages more often, which I put in the current century.
I still get that today if I use an old machine and/or a fancy text editor.
I think what made (makes) those editors laggy is a heavyweight representation of text and a creating a lot of garbage when processing said text.
Then don't? ;-)
> but to me this came across to me as a kid larping as someone who used computers in the 90s.
Ah, my friend, you are far too kind. I had to look up "larping", as I had never heard the word before. Do I have it right, it means "live action role playing"?
I can only wish that I were a larping kid, but alas, I have been programming for over 50 years. I started in 1969 on Teletype machines and punched cards. Now that's latency.
You couldn't just interact with a computer directly like you can today. Oh, you could, but online time was $30/hour, or $210/hour in today's dollars.
So you would punch your program on paper tape, print it out, and carefully hand check it. After a few revisions, you punch a final tape, dial in, quickly run your tape through, wait for the printout, and hang up fast.
With any luck you could complete your online session in two minutes or less. So about $1 in 1969 dollars, or $7 in today's dollars for one run of your simple BASIC or FORTRAN or Algol-60 program.
Punch cards were a step down from that. You would punch your deck, print it out and hand check it, put a rubber band around the deck and drop it off at the inbox in the computer center. Come back the next day and you would usually have your printout waiting. With a core dump where your code crashed. On a good day you might get your core dump in as little as a few hours. Just keep dropping by the computer center to check the outbox window until you see a printout with your name on it.
So back to modern times! Yes, I definitely share your disappointment at the latency in some of today's systems. As one example, I have often wanted to try OneNote because I've heard so many good things about it, and when I have tried it out it seems great...
Except for the typing latency. It drives me nuts every time I try it. It feels like nearly a half second for a character to appear on the screen - both on Windows and Android. How can it be so messed up? It's almost as bad as the full duplex Teletype connection I grew up on. (Maybe it has gotten better, it's been a while since the last time I gave up on it.)
In any case, this is rather orthogonal to the font rendering I was talking about. I'm pretty sure the improved font rendering isn't what causes that kind of latency, as there are plenty of apps I use that have beautiful fonts and very low latency.
Thank you for the interesting comment and conversation! :-)
Scrolling in GUIs is known to be sorta expensive: it's normally offloaded to the graphics system to be done wholesale as just a shift of the image, but if your GPU drivers suck then you're in for a crappy time (which was normally a thing in a fresh installation of Windows or Linux).
Basically, don't do much on a weak CPU.