search

curiousdannii / parchment

The Interactive Fiction web app
https://iplayif.com
MIT License
429 stars 60 forks source link

Use a narrow mono font for mobile #111

Closed curiousdannii closed 2 years ago

curiousdannii commented 2 years ago

Source Code Pro is nice, but if we could find a similar narrow font then mobiles would have better status windows. As it is now, status windows on my phone are only 44 characters wide, too narrow for many games to handle properly.

We could make the font smaller, but it's not big to start with. If we could find a font that's 66% as wide, that would make a big difference.

Could look at reducing the window paddings too? Probably not though, they're already slim.

Should also try letter spacing.

curiousdannii commented 2 years ago

Iosevka could be an option, though the hundreds of variants is confusing. https://typeof.net/Iosevka/

Here's a demo page with Iosevka: https://curiousdannii.github.io/parchment-testing/fonts/

Raises the number of characters that fit in a line on my phone from 44 to 53, each character being 83% as wide, for 20% more characters. Not quite as condensed as the 66% I wrote above, but that's probably way too unrealistic. 53 characters in a line is readable, but already getting very thin. If I reduce the font to 13px, then it goes up to 56 characters.

It also has an Extended variant, which is as wide as Source Code Pro, which we could use in buffer windows if we wanted the same font for consistency. And for grid windows in devices with a wide enough screen.

The main downside is that Iosevka is a really big font, file size wise. 683KB compared to 60-80KB for SCP (and keep in mind that is the file size per variant - each italics/weight option is the same again.) I think a lot of that is because of all the fancy font features it has. We might be able to manually build the font without them?

Yes, I was able to manually build Iosevka, which brings each file down to around 220-240KB. So about 3 times as big as SCP. But that might be because it supports more scripts?

So Iosevka Narrow is much better for mobile screens. Is it attractive enough, compared to SCP? I think it's broadly as attractive as SCP. Individual taste varies of course, but it's not bad.

If we really wanted to, we could use those variants to choose alternate character forms. But do we care that much? Probably not.

curiousdannii commented 2 years ago

Okay, I put Iosevka on the testing site: https://curiousdannii.github.io/parchment-testing/?story=https://ifarchive.org/if-archive/games/zcode/Savoir-Faire.zblorb

Is 13px too small?

I should also try reducing the grid window padding when on mobile.

The quotes in Photopia now fit! (though there's no colour yet... it will come) Compare https://curiousdannii.github.io/parchment-testing/?story=http%3A%2F%2Fwww.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5 https://iplayif.com/?story=http%3A%2F%2Fwww.ifarchive.org%2Fif-archive%2Fgames%2Fzcode%2Fphotopia.z5

curiousdannii commented 2 years ago

The narrow font is good for mobile, but reducing the font size may not be good by default. We could add a user option to reduce the font size to allow for more spaces per line.