I need to send this to the people who designed the website for one of my favorite local pizza places, Dino's (<a href="https://www.dinostomatopie.com/" rel="nofollow">https://www.dinostomatopie.com/</a>) -- 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.
Ligatures are missing :(<p>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.<p>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.)
Hello! Co-founder here – wow, front page, that's flattering!<p>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.<p>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 ;)
Impressive research work (and results)!<p>I actually went through the same experimentation when I worked on the fonts and the website at <a href="https://int10h.org/oldschool-pc-fonts/" rel="nofollow">https://int10h.org/oldschool-pc-fonts/</a>. 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: <a href="https://github.com/kreativekorp/bitsnpicas" rel="nofollow">https://github.com/kreativekorp/bitsnpicas</a>.<p>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. :(
Ha, this website seems to trip up the WebKit layout code (<a href="https://bugs.webkit.org/show_bug.cgi?id=211679" rel="nofollow">https://bugs.webkit.org/show_bug.cgi?id=211679</a>) and cause large spaces to appear randomly in the middle of paragraphs that go away when you select the text…
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 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.<p>Verdana for the interface, Times New Roman, Courier New for monospace ... aaaaahhhhh!
The naïve potrace output looks <i>very</i> 90s in a grunge typography sort of way. I donated the archives of <i>Serif</i> 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.
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.<p>Maybe there should be a library-based approach that provides the same functionality as potrace.<p>[0] <a href="https://gitlab.gnome.org/GNOME/pango/issues/386" rel="nofollow">https://gitlab.gnome.org/GNOME/pango/issues/386</a>
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.<p>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.<p>That said, most of the 90s webpages didn't look like that. Images were used instead. For example:<p><a href="http://ep.yimg.com/ca/I/paulgraham_2202_166608" rel="nofollow">http://ep.yimg.com/ca/I/paulgraham_2202_166608</a>
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!
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.
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.<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.<p>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:<p><a href="http://ascii.textfiles.com/archives/3786" rel="nofollow">http://ascii.textfiles.com/archives/3786</a>
Most (but not all) of the text is slightly blurry for me on Linux with a HiDPI display at 200% scale, using grayscale antialiasing: <a href="https://user-images.githubusercontent.com/7930239/81491203-4156ef00-9240-11ea-9142-8323c6f42704.png" rel="nofollow">https://user-images.githubusercontent.com/7930239/81491203-4...</a><p>I'm using Chromium, but the "-webkit-font-smoothing: none" style doesn't appear to be changing anything.
I think, they might want to use this font editor:
<a href="https://fontstruct.com/" rel="nofollow">https://fontstruct.com/</a>
Very cool.<p>I know this is a tad off-topic, but, it's sort of related since it's about fonts.<p>I've been looking for a good "serial killer typewriter" typeface, similar to what's used in the credits of the TV show <i>Supernatural</i>, 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 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.<p><a href="https://i.imgur.com/v80wKdf.jpg" rel="nofollow">https://i.imgur.com/v80wKdf.jpg</a>
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.<p>Perhaps whatever causes that rendering might be of use in cases like this, since it would also allow zooming/higher font sizes.<p>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.<p>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.
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).<p>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 <a href="https://512pixels.net/2014/04/aqua-past-future/" rel="nofollow">https://512pixels.net/2014/04/aqua-past-future/</a> and was overcome with nostalgia for System 7.<p>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.<p>Some more images here: <a href="https://www.versionmuseum.com/history-of/classic-mac-os" rel="nofollow">https://www.versionmuseum.com/history-of/classic-mac-os</a><p>Those folder and control panel icons just slay me.
Funny idea, but it failed: <a href="https://i.imgur.com/fXGEGCi.png" rel="nofollow">https://i.imgur.com/fXGEGCi.png</a><p>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.
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.
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.
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.
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
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.