Font does not match 8pt Tahoma

[pwmarcz]

I see there's a letter-spacing: -0.03ch. I'm not sure if that's what you were going for:

(this is Firefox on Windows 10)

I think that because Windows uses pretty aggressive hinting, the spaces between letters become more uneven, sometimes snapping to 1 pixel and sometimes to 2 pixels. I can only speak for myself but the end result looks... broken.

Maybe using another, narrower font would have a better effect than this tweak?

Now that I think of it, turning off ligatures could also help: some of the "tt", "ti" and so on look like a big part of the problem.

Great project, by the way :)

[jdan]

Going to co-opt this for a larger discussion about fonts!

I tried integrating MsSansSerif here (thx @soylentgraham on twitter for the tip): https://github.com/jdan/98.css/compare/jdan/ms-sans-serif

Gets us almost there but:

• We now have to inline a font (which is pretty big)
• Bold glyphs don't look good
• Had to use Arial for headings to prevent the following:

[fireattack]

Also consider mark the page as lang="en". Some of the font-family (namely monospace) will fall back to nonoptimal fonts for users using non-English language preference.

[hedgehog-online]

Maybe it's a good idea to just leave fonts as they are (Arial 12)? It appears that between browsers like Firefox not supporting disabling font smoothing, issues with raster fonts, along with potential high DPI problems, this isn't a problem that can very easily be solved with CSS alone.

Plus, I feel like this might push this from being a surprisingly usable and logical design system (though actually that's entirely not surprising given that there was a lot more HCI research put into Windows 95 than into your average modern web design system) to something a bit more gimmicky.

[theandrewbailey]

Going to co-opt this for a larger discussion about fonts!

I tried integrating MsSansSerif here (thx @soylentgraham on twitter for the tip): https://github.com/jdan/98.css/compare/jdan/ms-sans-serif

Gets us almost there but:

* We now have to inline a font (which is pretty big)

* Bold glyphs don't look good

* Had to use Arial for headings to prevent the following:

Modern Windows and MacOS ship with a Truetype version of MS Sans Serif. It looks awesome with your project! It might be a good idea to use that, and fallback to Arial. Using Tahoma instead would make the UI look more Windows 2000 than 98, which might be more appropriate than Arial.

[padraigfl]

Fonts are a pain in general cos the whole way Windows done fonts back there was different. I don't see how different sizes can be done other than having totally different font sets for the different sizes unfortunately. There is a bold variant of the standard size MSSansSerif pixel font out but scoping beyond that seems like an awful lot of hassle. Someone could probably do a bold ~24px one for headings and that'd be enough to work off for the general vibe of windows (the "Explorer" view setting for the file explorer had it on the left side with the folder name, that size/weight), but avoiding the pixel fonts altogether is probably the best option as a design system?

MSSansSerif bold https://github.com/padraigfl/packard-belle/blob/master/src/_scss/w98/fonts/MSSansSerifBold.woff2 Notepad font https://github.com/padraigfl/packard-belle-desktop/blob/master/src/assets/FixedsysStripped.woff2

[jdan]

@kaytwo got bold looking so sharp in https://github.com/jdan/98.css/pull/27.

I'm a little turned off by how this font looks written in prose though, and am almost inclined to keep 12px Arial around.

Maybe there's a good compromise to use this for interactive elements, but keep it away from paragraphs and headings?

[blipdrifter]

I think having Sans Serif for the dialogs/library itself but using either Arial or Tahoma for the copy is a good compromise, imho.

[jdan]

@kaytwo totally crushed this one in #27. He rules.

Feel free to comment with anything looking off, but in the meantime I'm going to close this.