14 ms·

Convincing-looking 90s fonts in modern browsers

774 points by hmhhcycbtsc557 6y ago

peterburkimsher 6y ago
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.
- akry 6y ago
  I didn't recongnize the scrollbar. It's very cool!
- amiga-workbench 6y ago
  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.
  - Stratoscope 6y ago
    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!
kick 6y ago
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 http://ep.yimg.com/ca/I/paulgraham_2202_166608
- brok3nmachine 6y ago
  Professional websites, yes. But they are specifically trying to replicate personal web pages, such as GeoCities.
- sp332 6y ago
  Lots more examples https://twitter.com/wayback_exe https://twitter.com/wayback_exe Edit: for contrast with more personal sites, try https://twitter.com/gifmodel/status/456761420319686656 https://twitter.com/gifmodel/status/456761420319686656
  - barbecue_sauce 6y ago
    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.
    - giantrobot 6y ago
      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.
      - barbecue_sauce 6y ago
        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.
saagarjha 6y ago
Ha, this website seems to trip up the WebKit layout code (https://bugs.webkit.org/show_bug.cgi?id=211679 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…
- kick 6y ago
  On Firefox the layout renders fine, but seems to anti-alias the font anyway, which I find funny.
  - seba_dos1 6y ago
    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.
- toothbrush 6y ago
  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™.
  - saagarjha 6y ago
    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 ;)
JMTQp8lwXL 6y ago
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!
plerpin 6y ago
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.
- heelix 6y ago
  I could format my table layout with the font to make it pixel perfect, assuming a white on white color scheme. /s
  - andai 6y ago
    The other day I discovered https://favicon.cc https://favicon.cc, "in beta" since 2007. Instead of canvas it uses a html table for drawing (as well as the 1:1 preview!)
    - notRobot 6y ago
      HTTPS is broken on non-www site. Try https://www.favicon.cc https://www.favicon.cc
    - swiley 6y ago
      Opening that on my iPhone redirects through some weird file:// URI. Is that normal for sites with self signed certs?
    - aasasd 6y ago
      I mean, I slapped together a table-based image renderer back around '04—the result was bloated but iirc could be displayed in Links.
- Stratoscope 6y ago
  > 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.
a-nikolaev 6y ago
I think, they might want to use this font editor: https://fontstruct.com/ https://fontstruct.com/
toothbrush 6y ago
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 ;)
- nodoodles 6y ago
  Great idea! One could embed windows 95 a la https://win95.ajf.me/ 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 :)
  - toothbrush 6y ago
    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 https://paschke-images-test.s3.amazonaws.com/welcome.html ;)
  - TazeTSchnitzel 6y ago
    http://charlie.bz http://charlie.bz accomplishes that idea but without a lengthy download by using a VNC session into QEMU.
- bichonnages 6y ago
  Would you consider sharing the .ttf?
jzer0cool 6y ago
This is nice and reminds me of the early/late 90's. Was curious what motivated you to bring back the past!
- con-cat 6y ago
  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.
DevX101 6y ago
Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.
skny 6y ago
My head hurts from just trying to read the first few paragraphs.
eyelidlessness 6y ago
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.
- toothbrush 6y ago
  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!
  - eyelidlessness 6y ago
    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.
  - rangibaby 6y ago
    This is probably the God of "just because we can" art projects: https://www.windows93.net https://www.windows93.net This is a cool project but the end result doesn't really look like it does on real hardware
- II2II 6y ago
  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.
pmiller2 6y ago
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.
sdwvitvit 6y ago
FontForge is awesome! Used it a couple of times
dhosek 6y ago
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.
- schrijver 6y ago
  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 https://www.fontshop.com/families/ff-autotrace
kccqzy 6y ago
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.)
- deleted 6y ago
  [deleted]
- andreareina 6y ago
  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).
- toothbrush 6y ago
  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 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!
  - beeforpork 6y ago
    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...
- himlion 6y ago
nonbirithm 6y ago
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 https://gitlab.gnome.org/GNOME/pango/issues/386
llacb47 6y ago
Cool project! When are the custom cursors? :)
longtom 6y ago
The font blurs slightly on my Windows 10 machine at 125% zoom.
- cellularmitosis 6y ago
  If you zoom to 200% it should look sharp again :)
nicetryguy 6y ago
<blink><marquee>this Web Site has been visited 1,337 times</marquee></blink>
- deleted 6y ago
  [deleted]
- _Microft 6y ago
  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.
kdrag0n 6y ago
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-4156ef00-9240-11ea-9142-8323c6f42704.png 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.
- toothbrush 6y ago
  Thanks for the report! I wonder if that only works on macOS...
  - xenonite 6y ago
    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).
msla 6y ago
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 http://ascii.textfiles.com/archives/3786
jsolson 6y ago
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/ 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.
- toothbrush 6y ago
  That is amazing. I'm adding them to the business directory!
- innocenat 6y ago
  I was disappointed when the guestbook link to Facebook.
- qubex 6y ago
  That’s a real “blast from the past” vibe. I’m absolutely impressed!
- phinnaeus 6y ago
  My god, they even have a working link to a zip file containing a Netscape Navigator exe. I hope that's on a CDN.
  - romwell 6y ago
    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)
    - arrayjumper 6y ago
      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/ https://www.dinostomatopie.com/ and http://www.dinostomatopie.com/ 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)".
atum47 6y ago
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
tobr 6y ago
Just in terms of creating a convincing 90’s look, the “blobby mess” actually wasn’t that bad!
Thorrez 6y ago
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.
- mappu 6y ago
  Here's my screenshot, 100% zoom, Debian/kwin_wayland; https://i.imgur.com/tu1V1pp.png 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.
  - toothbrush 6y ago
    Wow, that's not great – thanks for the report!
  - Liskni_si 6y ago
    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.
viler 6y ago
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/ 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 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. :(
- toothbrush 6y ago
  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!
  - viler 6y ago
    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 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-fonts-embedded-bitmaps/ https://int10h.org/blog/2016/01/windows-cleartype-truetype-f...)
jerome-jh 6y ago
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!
- jbverschoor 6y ago
  Get a hidpi screen.
- zwaps 6y ago
  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.
  - toyg 6y ago
    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.
    - zwaps 6y ago
      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.
      - toyg 6y ago
        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.
jbverschoor 6y ago
Sorry, but the font is way off. there are holes in the pixels
jcelerier 6y ago
non-antialiased fonts is still how I prefer fonts to render on my low-dpi screens by a large margin
- austinjp 6y ago
  I spent a bit of time yesterday installing Proggy fonts on my T420 to get crisper characters while cramming more on the small screen :)
badsectoracula 6y ago
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.
Springtime 6y ago
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.
- deleted 6y ago
  [deleted]
afandian 6y ago
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.
- MattBlissett 6y ago
  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 https://telcontar.net/Misc/GUI/RISCOS/#text [2] https://telcontar.net/Misc/GUI/RISCOS/Text--AA-sub-pixel.png https://telcontar.net/Misc/GUI/RISCOS/Text--AA-sub-pixel.png
nyanpasu64 6y ago
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.
- jansan 6y ago
  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.
garaetjjte 6y ago
Funny idea, but it failed: https://i.imgur.com/fXGEGCi.png https://i.imgur.com/fXGEGCi.png Strongly hinted fonts of win2k era looked quite nice, but this is just blurry mess.
DavidSJ 6y ago
Recently I came across https://512pixels.net/2014/04/aqua-past-future/ 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 https://www.versionmuseum.com/history-of/classic-mac-os Those folder and control panel icons just slay me.
- aasasd 6y ago
  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.
  - DavidSJ 6y ago
    I should probably do that. Actually, my Mac IIsi still works last I checked, but that was about ten years ago!
mhd 6y ago
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 https://i.imgur.com/v80wKdf.jpg
- toothbrush 6y ago
  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.
OldHand2018 6y ago
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).
ungzd 6y ago
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.
qwerty456127 6y ago
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.
- recursive 6y ago
  If that's how you like it, you can configure your user-agent as such and get that experience today.
lokedhs 6y ago
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.
aasasd 6y ago
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).
rhizome 6y ago
Does it switch between Bookman and Palatino based on User-Agent?
disillusion 6y ago
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.
8lall0 6y ago
Btw it's possible to get this font? I would love to use that on my personal blog :)

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.

akry 6y ago
I didn't recongnize the scrollbar. It's very cool!
amiga-workbench 6y ago
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.
- Stratoscope 6y ago
  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!

kick 6y ago

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 http://ep.yimg.com/ca/I/paulgraham_2202_166608

brok3nmachine 6y ago
Professional websites, yes. But they are specifically trying to replicate personal web pages, such as GeoCities.
sp332 6y ago
Lots more examples https://twitter.com/wayback_exe https://twitter.com/wayback_exe Edit: for contrast with more personal sites, try https://twitter.com/gifmodel/status/456761420319686656 https://twitter.com/gifmodel/status/456761420319686656
- barbecue_sauce 6y ago
  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.
  - giantrobot 6y ago
    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.
    - barbecue_sauce 6y ago
      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.

saagarjha 6y ago

Ha, this website seems to trip up the WebKit layout code (https://bugs.webkit.org/show_bug.cgi?id=211679 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…

kick 6y ago
On Firefox the layout renders fine, but seems to anti-alias the font anyway, which I find funny.
- seba_dos1 6y ago
  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.
toothbrush 6y ago
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™.
- saagarjha 6y ago
  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 ;)

JMTQp8lwXL 6y ago

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!

plerpin 6y ago

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.

heelix 6y ago
I could format my table layout with the font to make it pixel perfect, assuming a white on white color scheme. /s
- andai 6y ago
  The other day I discovered https://favicon.cc https://favicon.cc, "in beta" since 2007. Instead of canvas it uses a html table for drawing (as well as the 1:1 preview!)
  - notRobot 6y ago
    HTTPS is broken on non-www site. Try https://www.favicon.cc https://www.favicon.cc
  - swiley 6y ago
    Opening that on my iPhone redirects through some weird file:// URI. Is that normal for sites with self signed certs?
  - aasasd 6y ago
    I mean, I slapped together a table-based image renderer back around '04—the result was bloated but iirc could be displayed in Links.
Stratoscope 6y ago
> 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.

a-nikolaev 6y ago

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

toothbrush 6y ago

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

nodoodles 6y ago
Great idea! One could embed windows 95 a la https://win95.ajf.me/ 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 :)
- toothbrush 6y ago
  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 https://paschke-images-test.s3.amazonaws.com/welcome.html ;)
- TazeTSchnitzel 6y ago
  http://charlie.bz http://charlie.bz accomplishes that idea but without a lengthy download by using a VNC session into QEMU.
bichonnages 6y ago
Would you consider sharing the .ttf?

jzer0cool 6y ago

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

con-cat 6y ago
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.

DevX101 6y ago

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

skny 6y ago

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

eyelidlessness 6y ago

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.

toothbrush 6y ago
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!
- eyelidlessness 6y ago
  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.
- rangibaby 6y ago
  This is probably the God of "just because we can" art projects: https://www.windows93.net https://www.windows93.net This is a cool project but the end result doesn't really look like it does on real hardware
II2II 6y ago
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.

pmiller2 6y ago

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.

sdwvitvit 6y ago

FontForge is awesome! Used it a couple of times

dhosek 6y ago

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.

schrijver 6y ago
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 https://www.fontshop.com/families/ff-autotrace

kccqzy 6y ago

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

deleted 6y ago
[deleted]
andreareina 6y ago
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).
toothbrush 6y ago
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 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!
- beeforpork 6y ago
  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...
himlion 6y ago

nonbirithm 6y ago

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 https://gitlab.gnome.org/GNOME/pango/issues/386

llacb47 6y ago

Cool project! When are the custom cursors? :)

longtom 6y ago

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

cellularmitosis 6y ago
If you zoom to 200% it should look sharp again :)

nicetryguy 6y ago

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

deleted 6y ago
[deleted]
_Microft 6y ago
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.

kdrag0n 6y ago

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-4156ef00-9240-11ea-9142-8323c6f42704.png 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.

toothbrush 6y ago
Thanks for the report! I wonder if that only works on macOS...
- xenonite 6y ago
  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).

msla 6y ago

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 http://ascii.textfiles.com/archives/3786

jsolson 6y ago

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

toothbrush 6y ago
That is amazing. I'm adding them to the business directory!
innocenat 6y ago
I was disappointed when the guestbook link to Facebook.
qubex 6y ago
That’s a real “blast from the past” vibe. I’m absolutely impressed!
phinnaeus 6y ago
My god, they even have a working link to a zip file containing a Netscape Navigator exe. I hope that's on a CDN.
- romwell 6y ago
  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)
  - arrayjumper 6y ago
    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/ https://www.dinostomatopie.com/ and http://www.dinostomatopie.com/ 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)".

atum47 6y ago

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

tobr 6y ago

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

Thorrez 6y ago

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.

mappu 6y ago
Here's my screenshot, 100% zoom, Debian/kwin_wayland; https://i.imgur.com/tu1V1pp.png 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.
- toothbrush 6y ago
  Wow, that's not great – thanks for the report!
- Liskni_si 6y ago
  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.

viler 6y ago

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

toothbrush 6y ago
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!
- viler 6y ago
  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 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-fonts-embedded-bitmaps/ https://int10h.org/blog/2016/01/windows-cleartype-truetype-f...)

jerome-jh 6y ago

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!

jbverschoor 6y ago
Get a hidpi screen.
zwaps 6y ago
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.
- toyg 6y ago
  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.
  - zwaps 6y ago
    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.
    - toyg 6y ago
      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.

jbverschoor 6y ago

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

jcelerier 6y ago

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

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

badsectoracula 6y ago

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.

Springtime 6y ago

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.

deleted 6y ago
[deleted]

afandian 6y ago

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.

MattBlissett 6y ago
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 https://telcontar.net/Misc/GUI/RISCOS/#text [2] https://telcontar.net/Misc/GUI/RISCOS/Text--AA-sub-pixel.png https://telcontar.net/Misc/GUI/RISCOS/Text--AA-sub-pixel.png

nyanpasu64 6y ago

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.

jansan 6y ago
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.

garaetjjte 6y ago

Funny idea, but it failed: https://i.imgur.com/fXGEGCi.png https://i.imgur.com/fXGEGCi.png Strongly hinted fonts of win2k era looked quite nice, but this is just blurry mess.

DavidSJ 6y ago

Recently I came across https://512pixels.net/2014/04/aqua-past-future/ 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 https://www.versionmuseum.com/history-of/classic-mac-os Those folder and control panel icons just slay me.

aasasd 6y ago
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.
- DavidSJ 6y ago
  I should probably do that. Actually, my Mac IIsi still works last I checked, but that was about ten years ago!

mhd 6y ago

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 https://i.imgur.com/v80wKdf.jpg

toothbrush 6y ago
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.

OldHand2018 6y ago

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

ungzd 6y ago

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.

qwerty456127 6y ago

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.

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

lokedhs 6y ago

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.

aasasd 6y ago

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

rhizome 6y ago

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

disillusion 6y ago

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.

8lall0 6y ago

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