-
Notifications
You must be signed in to change notification settings - Fork 299
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Font does not match 8pt Tahoma #10
Comments
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:
|
Also consider mark the page as |
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. |
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. |
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. MSSansSerif bold https://github.com/padraigfl/packard-belle/blob/master/src/_scss/w98/fonts/MSSansSerifBold.woff2 |
I think having Sans Serif for the dialogs/library itself but using either Arial or Tahoma for the copy is a good compromise, imho. |
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 :)
The text was updated successfully, but these errors were encountered: