Hacker News new | past | comments | ask | show | jobs | submit login
Convincing-looking 90s fonts in modern browsers (vistaserv.net)
774 points by hmhhcycbtsc557 28 days ago | hide | past | web | favorite | 172 comments



I need to send this to the people who designed the website for one of my favorite local pizza places, Dino's (https://www.dinostomatopie.com/) -- they did _really_ well, generally, but no matter how hard you try, some things come through: the fonts rendered as text are perfectly crisp at whatever absurd DPI this Chromebook has.


This is better than 50% of websites out there today. I can find all the buttons, the functions of things are clear, and I know how to contact the owner. The menu is text instead of PDF, and the whole thing appears to run properly without javascript enabled.


* No scroll-jacking

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


* No modal prompts to sign up for a useless newsletter

* No enormous overlay asking me to approve cookies


The brilliance goes beyond the web design. From that menu:

"DINO would like you to know that more than three toppings will be expensive and won't be any better."



That alone makes me want to order a pizza from them.


>the fonts rendered as text are perfectly crisp

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!


Ah, that's where it all went wrong, moving beyond Netscape 4!


This is glorious. The only way I could tell with any confidence it wasn't real was the clean, modern HTML and CSS (get with the program folks, this should be non-validating XHTML 1.1!)

Nice easter egg from the source code:

  <!-- <audio autoplay="autoplay" controls="controls"><source src="topgun.mid" type="audio/mpeg"></audio> -->


topgun.mid actually exists.


And I guess I've just found the most authentic and ridiculous way to play a midi file on somewhat modern macOS: run winamp in wine.


And now I have a new ringtone.

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.


using many apps with sound enabled is shocking after long periods of app silence. Social media apps sound like slot machines! So much pavlovian conditioning... Not sure how all that is still legal.


My god, they even have a working link to a zip file containing a Netscape Navigator exe. I hope that's on a CDN.


It's not, the download failed several times for me.

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)


I'm happy to report that I was able to download the zip file and run the executable on my Ubuntu box with Wine. It was quite surreal to see Netscape installer running on my 4k monitor. I was even able to open the browser and navigate to Google.

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


You have to run the old browsers through a local proxy you configure yourself a lot of times these days if you're really interested in surfing the web with it.

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.


When you wake up, I'd love to hear more about this. I've searched for https ==> http proxies before and didn't find much.

I'm aware of https://github.com/tenox7/wrp but converting everything to a gif is quite a bit more destructive!


Not the original commenter, but mitmproxy (https://mitmproxy.org/) can do this out-of-the-box for a single site with its reverse proxy:

    mitmdump --mode=reverse:https://news.ycombinator.com
And then visiting http://localhost:8080 will direct to the site.

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


back in the day I used RabbIT which handled both the https/http and the png problem but it looks like it hasn't been updated in years. It looks like squid can do the https problem (https://wiki.squid-cache.org/Features/HTTPS).

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.


While this is useful for people with out of date browsers, a slightly more sophisticated use-case is where you render the entire web page remotely in a sandbox for certain classes of links, eg email links. This prevents a whole class of phishing attacks.

There are companies who will sell this to you but essentially it’s really headless Chrome running in the cloud somewhere.


What's the point of forcing HTTPS? It's a pizza place, not a bank.


It stops Comcast selling your topping preferences to other pizzerias


It stops a man-in-the-middle attacker from trying to exploit your browser/extensions/password manager by injecting code into that site (once the cert is pinned).

It might also help with SEO? Google's been pushing for https everywhere.


encryption works much better when it's setup without discrimination. I mean not the encryption itself; in the end, it's a tool not the aim.


That needs to be part of our webring! I contacted the webmaster.


https://www.lingscars.com/ Also comes to mind as too perfect on the font rendering side of things



My favourite part of that website is the position:fixed ceiling fan GIF

https://www.dinostomatopie.com/dinostomatomenu.html


This place is great. A few commenters seem to think this is a joke or not a real pizza place. I assure you all, it is!

http://www.seattlemag.com/article/three-impressions-dino-s-t...


This is the greatest website I have ever seen. It even looks good on mobile. That’s a major achievement with their stylings.


The funny part is that it was a pretty common look for 1997. They even tastefully refrained from the "under construction" image.

The other common look was the simple document, such as https://cr.yp.to/djb.html


That is amazing. I'm adding them to the business directory!


I was disappointed when the guestbook link to Facebook.


That’s a real “blast from the past” vibe. I’m absolutely impressed!


The “Cocktails” section goes straight from one Springsteen reference to another (“Racing in the Street” and “The River”). I love it.


Holy crap, you can download Netscape 4.7.2 from that site..


And the Netscape download link still works :D


Ligatures are missing :(

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


Actually, IE5 didn't do automatic ligatures; what you see in "finibus" is simply an "f" glyph and an "i" glyph which are close enough that the dot of the "i" nestles into the top-right of the curve of the "f", and the serifs at the base run together... just like they do for the "in" and "ni" pairs following.

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


> Actually, IE5 didn't do automatic ligatures; what you see in "finibus" is simply an "f" glyph and an "i" glyph which are close enough that the dot of the "i" nestles into the top-right of the curve of the "f", and the serifs at the base run together.

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.


Yep, we deliberately didn't convert the full set of glyphs from each of the fonts we support, mostly just because it was quite laborious (not to mention CPU time-consuming) to generate our relatively small range of weights, sizes, and font families as-is, so missing ligatures are a known issue.

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!


Well, you don't need to do much for this, because there are only two ligatures that were commonly supported: 'fi' and 'fl'.

For the kerning, ok, that's more work...


For concrete examples, take a look at any word where a 'd' is followed by a letter with a vertical stroke on the left side (e.g. "did", "middle", etc).


Agreed, the terrible kerning on this page hurts my eyes.


Hello! Co-founder here – wow, front page, that's flattering!

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


Great idea! One could embed windows 95 a la https://win95.ajf.me/ just to run IE within the page with all the right rendering. Or a subset of custom font rendering to a canvas :)


http://charlie.bz accomplishes that idea but without a lengthy download by using a VNC session into QEMU.


We were actually just talking about compiling something like FreeType to JavaScript, but then you'd find yourself re-implementing a browser with layout engine etc...

However, your other idea is great! You might enjoy https://paschke-images-test.s3.amazonaws.com/welcome.html ;)


Would you consider sharing the .ttf?


Impressive research work (and results)!

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. :(


Oh wow, i've stumbled on your site before. It's a masterpiece, and was definitely an inspiration for the work we talk about in this blog post.

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!


Thanks, appreciated! I'm planning an update soon - speaking of which, I might take a page from your own site with the custom scrollbars. :)

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


Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.


Ha, this website seems to trip up the WebKit layout code (https://bugs.webkit.org/show_bug.cgi?id=211679) and cause large spaces to appear randomly in the middle of paragraphs that go away when you select the text…


We had noticed this early on indeed, but no idea what's going on. Thank you for reporting it — we didn't think of raising it against WebKit since we assumed they'd be Doing The Right Thing™.


It's not just your website, mind you. I've been seeing it for quite a while even on other website but I've just been too lazy to report it ;)


On Firefox the layout renders fine, but seems to anti-alias the font anyway, which I find funny.


They both seem to do some kind of anti-aliasing on a hidpi screen for me, and Firefox is actually slightly sharper here. The screenshot is nicely pixelated and somewhat easier to read, but the font itself on the page is a bit blurry.

Kerning seems to be very browser dependent as well, seems like Blink does better job there.


LOL! Funny how doing something in 2020 takes ten times the resources for doing the same thing in 1995. Every pixel on these fonts is now a complex vector path.


I could format my table layout with the font to make it pixel perfect, assuming a white on white color scheme. /s


The other day I discovered https://favicon.cc, "in beta" since 2007. Instead of canvas it uses a html table for drawing (as well as the 1:1 preview!)


I mean, I slapped together a table-based image renderer back around '04—the result was bloated but iirc could be displayed in Links.


HTTPS is broken on non-www site. Try https://www.favicon.cc


Opening that on my iPhone redirects through some weird file:// URI. Is that normal for sites with self signed certs?


> ten times the resources for doing the same thing

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.


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

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.


My experience of responsiveness agrees with you, and so does this guy's:

https://danluu.com/input-lag/


I remember text editing UIs struggling when the machine was otherwise overloaded.

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.


Emacs has always been written in Lisp, and it's possible for badly written code to make it lock up. Not a new complaint on low RAM machines where the gc and paging interact badly. But you need very low RAM by today's standards.


Carefully worded with "more often" because I knew emacs was an outlier. I was never an emacs person myself so I don't know it first hand, but in do know people used to call it a resource hog a long time ago.


Emacs is largely written in e-lisp. Does it have problems with lag? I don't think so.

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.


I regularly experience typing lag in Slack on a modern Macbook Pro.


Well at least this retro experience is back with Javascript laden apps, that feel like they pull ui elements from a 56k connection


It almost sounds like they used a machine with the wrong graphics drivers installed...


> I don't intend to insult

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! :-)


I happen to have an experience with Pentium at 75 MHz, where text in Borland Pascal on DOS appeared slower than I could type (long before learning touch-typing), and pressing backspace after spotting an error required some patience.

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.


I find that hard to believe. Borland IDEs ran extremely well on the 386 and 486 machines of the day. If you're having trouble with them on a Pentium you probably misconfigured something.


Wasn't my call, as it was a uni machine.


This is bullshit because DOS applications wrote to the VGA registers directly.


You mean slow scrolling in Windows/Linux due to wrong drivers is bullshit because DOS apps wrote to VGA registers?


No, scrolling under DOS was really fast. And Windows 98 run much faster than X on a machine with similar specs.


Watching text repaint line by line is a feature of 9600 baud serial terminals, not of 90s PC GUIs.


He must be a kid faking it, he looks ridiculous. W98 on a Pentium II was so low level that scrolling was several times faster than any composite based OS from today, even faster under NT4.


You are internet famous now because of this comment.


I hate antialiasing. I absolutely cannot stand blurry fonts. First thing I do on a Linux box is install the ambiguously licensed "mscorefonts" and disable antialiasing everywhere possible. That is explained in the font-howto that may be a bit outdated now.

Verdana for the interface, Times New Roman, Courier New for monospace ... aaaaahhhhh!


The first thing that comes to my mind is: Are you joking? But I wonder to myself: what does he call blurry fonts. Anti-aliased fonts, of course. But I've never seen them as blurry and I guess most other people don't, otherwise we'd not like them better. Don't you think there could be a sight specificity? Do you have extremely sharp eyesight?


Windows does antialias in a special way. MacOS and Linux are usually configured to respect the font shapes, using subpixels as needed. Windows font rendering prefers to snap to the nearest pixel, increasing sharpness but not being as faithful to the letter shapes.

Some people don't care, some people get used to both, but for some people going from Windows to anything else is difficult.


This is called hinting, it's configurable on Linux (don't know about MacOS).


There is certainly a taste specificity, but no sight specificity. I must admit none of the laptops at home are very new, and at work I still use the 2 monitors I received when I arrived 8 years ago.

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.


It's taking time to get used to. Windows did and still does very strongly hinted fonts. When I first started using Linux blurriness annoyed me greatly, but after few years I don't care anymore.


You can get strong hinting by changing hintstyle to hintstrong in fontconfig. It doesn't match Windows completely, but for some fonts it's close.

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.


I fell in love with MacOS when I discovered I can scale text or web pages to arbitrary values—without letters losing their shapes unless I stick to certain numbers.


Get a hidpi screen.


Ah, a kindred spirit. I do pretty much the same thing, and also use Terminus 9 in the terminal, where I spend most of my time these days.

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.


I can remember years ago trying to get Pidgin (the MSN Messenger client for Linux) to compile _with_ anti-aliasing enabled. This was not default for TCL/TK based programs at the time. Horrible! :)


I'm the opposite. First thing I do on a Linux box if I don't have a HiDPI screen is that I'll turn off hinting everywhere. Without hinting antialiasing truly shines.


And I do the exact opposite. I load gnome-tweaks and set hinting to none, so I can get the full anti aliasing effect.

Isn't freedom nice?


I also never understood why people like blurry fonts so much. To me, win2k fonts were much better than the ones we have today.

I guess it‘s because Apple did it.


There are no blurry fonts if you use the right screens for 2020 - i.e. HiDPI / "retina" etc.

If your pixels are visible then yeah, nothing beats fonts designed for big pixels.


There are blurry fonts on 1080p screens, which are the default to this day and essentially required if you seek high refresh rates on a budget.

Everyone without a retina screen is wrong, according to you. And yet, fonts used to look just fine on our terrible screens.


I didn’t say that - I said that if your screen is not retina-like, then you have to adjust operating systems that are now developed for retina-like 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.


Ah, the usual "you're using it wrong".

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.


This is really weird. I've stuck to Apple as much as possible since 2012 precisely because their handling of text is consistently top-notch on good screens without having to do anything. But according to you and the other guy above, that's wrong, because the default experience should be "old tech first". It's a bit like saying that tablets and phones should have a serial port instead of USB-C because "not everyone can afford a better cable".


The naïve potrace output looks very 90s in a grunge typography sort of way. I donated the archives of Serif magazine to the Scripps College library a decade ago which included a large collection of 1990s type specimens but I'm pretty sure that there was a T-26 face that looked very much like the sample that they showed from potrace.


Not quite the same, but in the 1990s Neville Brody released a font called ‘Autotrace’ that consists of several variations of a badly traced sans-serif https://www.fontshop.com/families/ff-autotrace


As a fun little Easter egg, you can get the classic Mac font Chicago (the system font all the way up to Mac OS 9 and early iPods) in HiDPI glory on all current Apple devices. Use Latin characters with the Thai-language font Krungthep.

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


You can still use bitmap fonts on the WWW.

That said, most of the 90s webpages didn't look like that. Images were used instead. For example:

http://ep.yimg.com/ca/I/paulgraham_2202_166608


Lots more examples https://twitter.com/wayback_exe

Edit: for contrast with more personal sites, try https://twitter.com/gifmodel/status/456761420319686656


I'm always amazed at how universally terrible graphic design was during the 90s, and I mean at the level of big-name corporations (not GeoCities laypeople). In-house Designers at these businesses (or contractors at the equally big-name firms they hired out to) were presumably well-educated and steeped in the history of the medium, but churned out nearly unintelligible, ugly garbage. Most of the design principles that have given us the mostly tasteful (if bland/inoffensive) modern web were solidified in print by the 1960s. I know the tooling wasn't there yet browser-wise to do anything crazy, but even the image-based graphical elements are just so foreign and weird, like the product of a generation so enamored with the capabilities of Photoshop that they didn't question unnecessary filters, drop shadows, and the placement of text.


Many elements were owed to CRT displays and larger pixel sizes, so rather domain specific. E.g., the mandatory drop shadow typography wasn't to be seen in print. On the other hand, I wouldn't like to witness modern screen design on a CRT. Moreover, the 1990s came just after a massive retro design trend in the 1980s and there were still some informal reference to 1950s design around, countered by a rather blocky "who cares" trend (probably rooting in free-style/low-end design as featured by April Greiman in screen design and new electronic trends in print as by Emigre Graphics), even featuring illegibility. At the same time any custom elements had to match the few "probably installed" type faces (Times/Times New Roman, Helvetica/Arial, Verdana, Courier/Courier New, maybe Symbol). Moreover, fonts rendered in sizes relative to OS presets, most probably what was 12px on a Mac rendered like 14px on Windows (which is huge on a CRT in 72dpi standard resolution), and custom elements had to provide visual stabilization to accommodate the design to the various forms of rendering. Last, but not least, the entire environment of the presentation was rather blocky, from OS elements to the housing of the CRT, and you had to accommodate to this, as well.


Yes, the drop shadows introduced in Win98 (IIRC) really helped readability of filenames on top of desktop wallpapers. It was a much nicer method than just backgrounding the text with a fixed colour like Win95 did.


New tools. Same as today. Ui designers have been replaced by algos generating nr of clicks, and programmers by JavaScript frameworks and libs.

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 plenty of good graphical design on the web in the 90s. There was also a lot of bad graphical design which usually gets highlighted today.

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.


My issue is mostly with the raster graphics themselves that companies used to try and enhance their sites, rather than the layout or typography of the sites, which is pretty easy to explain away due to the technical limitations of the time. Just lots and lots of head-scratchers from otherwise competent organizations.


Professional websites, yes. But they are specifically trying to replicate personal web pages, such as GeoCities.


An admirable effort. Looking at the IE5 screenshot, compare the kerning of 'ff' in the word "efficitur" (first line) to the 'ff' in "different" in the sentence following the image. It's slightly different. But still, a job well done!


Converting bitmap fonts to TrueType is far, far too hard in 2020. I've tried to do the same on numerous different occasions with FontForge and gave up every time through things just not working or hard crashes. I either got lucky by finding someone else who had already converted the font to TrueType somehow, or used a different font altogether. Since bitmap fonts are starting to become deprecated[0] in some window managers like i3 this process is starting to become a necessity.

Maybe there should be a library-based approach that provides the same functionality as potrace.

[0] https://gitlab.gnome.org/GNOME/pango/issues/386


In both Chrome and Firefox On Windows 10 at 100% zoom in the browser and 100% screen scaling this looks blurry; the pixels in the font don't line up with the pixels of my monitor unfortunately.


Here's my screenshot, 100% zoom, Debian/kwin_wayland; https://i.imgur.com/tu1V1pp.png

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.


Quite likely this is because Firefox 68 didn't support subpixel positioning so it aligned all glyphs to full pixels. Chrome 80 (and Firefox 76 in some configurations, or if gfx.text.subpixel-position.force-enabled is enabled) uses subpixel positioning if possible, which improves kerning of normal fonts, but in the case of these "retro" fonts, it's harmful. Maybe it's possible to adjust the glyph metrics so they're aligned to full pixels even if subpixel positioning is used, but I'm not sure if this can be really be done so it works everywhere.


Wow, that's not great – thanks for the report!


Amusingly, i have antialiasing disabled in Windows 10 (though sadly not everything respects the setting - but Firefox does) and it took me a while to realizing what was going on :-P.

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.


The next step is emulating a CRT monitor to get the fundamentally analog nature of the display right: Even if the computer thinks in pixels, it was still ultimately controlling a complex analog waveform being sent to some number of electron guns steered by magnets. Higher-resolution later computer monitors came closer to imitating pixels, but analog TV didn't try; it just had lines and interlaced fields. Old games took advantage of the analog nature of TVs to smooth over their graphics:

http://ascii.textfiles.com/archives/3786


Most (but not all) of the text is slightly blurry for me on Linux with a HiDPI display at 200% scale, using grayscale antialiasing: https://user-images.githubusercontent.com/7930239/81491203-4...

I'm using Chromium, but the "-webkit-font-smoothing: none" style doesn't appear to be changing anything.


Thanks for the report! I wonder if that only works on macOS...


Firefox on macOS also gives me a blurry result on a retina display. However it seems to work great on macOS in Safari and Opera (Chromium).


I switched to Safari as I've got my default browser set up to ignore all fonts (right now using Computer Modern for everything), but the display gets a bit weird -- while fonts are rendered the way they're meant to, it seems the line breaks in the code cause some whitespace in the text.

https://i.imgur.com/v80wKdf.jpg


Wow, thank you for putting 2 and 2 together! We have been bothered by these weird spacing artefacts, but we never figured out that they correlated to line breaks in our source code! That's insane. This gives us a lead to investigate.

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.


I think, they might want to use this font editor: https://fontstruct.com/


Very cool.

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.


I know in the Blink engine (eg: Chromium) I've seen it render various Asian typefaces without any anti-aliasing, eg: Dotum (including the Latin characters). I've often wondered why that is.

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.


As a child of the $PAST in the UK, I lived in three overlapping Internet worlds. Acorn RISC OS 3, Mac OS 7.5 at home and increasing amounds of Windows 95/98.

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.


Here are some screenshots of RISC OS 3, including the anti-aliased fonts [1].

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


Regarding the complaints on both kerning and blurriness that you're getting in the thread: the original font likely included a ton of kerning and hinting info, but it might've been all stripped when going through the conversion process. Seeing as character metrics should be practically identical to the original, you might want to copy that info into your result font—if that's possible (I think it should be, but dunno about tool support).

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


Recently I came across https://512pixels.net/2014/04/aqua-past-future/ and was overcome with nostalgia for System 7.

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.


You can run it in emulators. I was doing that on Android recently, to play Deja Vu.

However, you probably cherish more your memory of the system than the actual thing, and emulators don't help with that.


I should probably do that.

Actually, my Mac IIsi still works last I checked, but that was about ten years ago!


Funny idea, but it failed: https://i.imgur.com/fXGEGCi.png

Strongly hinted fonts of win2k era looked quite nice, but this is just blurry mess.


But font antialiasing was available starting from Windows 95 with Microsoft Plus!. I don't remember for sure, but I doubt browsers were exception and didn't use system-wide font antialiasing.


Anti-aliasing isn't enough, because of hinting. So they had to use FontForge to recreate old-looking fonts! I really like the retro scrollbar as well.


The scrollbars are done properly using CSS pseudo selectors too. I was half expecting to find some javascript sludge but there's none to be found.


And they are almost spot on, very nice work.

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 didn't recongnize the scrollbar. It's very cool!


It's a nice exercise, but please be aware that using that font in your website makes it terribly hard to read for users who need to zoom in. As in, enlarged pixelated letters are even harder to read then blurry ones. Bitmap fonts are only good on exactly the original size they're designed at.


Cool project! When are the custom cursors? :)


This is nice and reminds me of the early/late 90's. Was curious what motivated you to bring back the past!


Thank you! We're both lovers of retrocomputing, and I think especially right now it's easy to feel nostalgic for simpler times. We wanted to capture a bit of the wonder and weirdness of the early web, before corporate walled gardens took over and made everything look the same.


non-antialiased fonts is still how I prefer fonts to render on my low-dpi screens by a large margin


I spent a bit of time yesterday installing Proggy fonts on my T420 to get crisper characters while cramming more on the small screen :)


This font looked perfect on Firefox on Android, but when I read it on my desktop (Firefox on Linux) it looks wrong. It seems as though the scale is wrong, and the character 'o' gets a white line though it.


scaling up a font just so autotrace won't create curves out of the pixels? sounds like a hack compared to finding a program which converts pixels into squares.


Autotrace is the wrong apporoach here imo. Yes, fonts usually consist of quadratic curves, but they perfectly well support straight lines (and as a result the files will become pretty small, too). There is no reason why the original pixels cannot be converted with full precision using horizontal and vertical lines. Maybe the tool that can do this was not available.


Btw it's possible to get this font? I would love to use that on my personal blog :)


Just in terms of creating a convincing 90’s look, the “blobby mess” actually wasn’t that bad!


I can appreciate all sorts of tech nostalgia, but reading the intro my first thought was "wow this is cognitively impairing me" and then "please don't". Achieving it is surely a feat, but the actual effect is to make it as hard now to use my computer as it was over 20 years ago, because the type is illegible.


That's fair enough, i think it's a matter of taste, really. For me, it evokes a warm sense of nostalgia for a simpler time. Not that it necessarily was, and definitely not that it was better – i was a kid back then, so that has definitely coloured my memory of it all.

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!


I have a ton of respect both for font design in any constraints and the reverse engineering effort required to produce old pixelated text in modern web browsers. But it still made it significantly harder for me to read, and I hope this isn’t something anyone will try to reproduce for real world use, because it’s not just a matter of taste at that point, it’s a matter of accessibility.


This is probably the God of "just because we can" art projects: https://www.windows93.net

This is a cool project but the end result doesn't really look like it does on real hardware


I found it interesting due to the amount of effort it took to produce an inaccurate and barely legible approximation, at least on my web browser. Then I dug around the Fontconfig documentation and tried a couple of things. Changing 'hintstyle' to 'hintfull' produced much better, albeit imperfect, results.

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.


Does it switch between Bookman and Palatino based on User-Agent?


My head hurts from just trying to read the first few paragraphs.


The font blurs slightly on my Windows 10 machine at 125% zoom.


If you zoom to 200% it should look sharp again :)


FontForge is awesome! Used it a couple of times


great read. I recently turned my website into a windows 95 clone, but I haven't done anything special for the fonts yet (it's a work in progress) but this made think about it. thanks


Sorry, but the font is way off. there are holes in the pixels


<blink><marquee>this Web Site has been visited 1,337 times</marquee></blink>


It is not the earliest time of the web but marquee text, loud colours, visible separators ("hr"), grey color gradients to give a 3d-look, elaborate page visit counters, "cgi" in urls, guest books and "under construction" gifs are what I remember of the web of times long past indeed.


WWW should never have enabled use of custom fonts or colours. The fonts and the colours used for particular elements of a page should be configured system-wide. I always block web fonts anyway.


If that's how you like it, you can configure your user-agent as such and get that experience today.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: