Font upscaling / new font discussion #6960
Replies: 1 comment
-
Posted at 2023-01-25 by @thyttan Looks pretty good! If it becomes available I'll try it in my personal flavor of BW Clock. 👍 I don't really have any more constructive feedback I'm afraid. 😛 Off topic: Personally I would be interested to try storing custom fonts in storage as mentioned in this GitHub comment to see how that affects loading times. Posted at 2023-01-29 by HughB Definitely interested. Even if we ended up with an alternative Vector font it would be worthwhile. Even though I wear prescription glasses anything less than 20 height is fairly difficult for me to read. I used to have 20/20 vision 20 years ago. Posted at 2023-03-01 by @gfwilliams I've just been having another stab at building this into the firmware. In the screenshot below, I'm showing items in 2x and 3x scales:
The scaling algorithms tend to smooth out the edges a bit so the 1px wide (non-bold) fonts don't scale up that well. My thinking is:
Right now, I'm feeling like what we need is to move away from having these weird font types like 6x4, 6x15, 12x20, and instead be able to say: "I want a bitmap font 20px high" and let Espruino choose? Any maybe to allow us to migrate, we just map Then maybe we have some way to override that, so that it's easy to upload a custom font for the whole OS? I know everyone says: "You should allow the font size to be configurable" but we can't do that with the current apps without breaking 90% of them, but I guess changing the font (eg being able to make it bold, or more interesting, while being the same size) might still be good. Attachments: Posted at 2023-03-01 by @gfwilliams Yes, we 100% need an 'inbetween' font, ideally that'll just fit in the 24px widget bar: Attachments: Posted at 2023-03-07 by @gfwilliams Does anyone have thoughts on this, particularly making the built-in fonts substantially more bold? I'm a bit concerned I'm going to spend a bunch of time on the new fonts and then I'll get a load of complaints because it's different. Posted at 2023-03-07 by rigrig For me it's always kind of hard to tell from pictures instead of the real watch, but I think it looks good in the menu bar.
This would be nice to have. (And people could customize fonts globally without messing up layouts.) Posted at 2023-03-08 by @gfwilliams Thanks!
Yes - that's the ~12px high font, and that is my feeling too. I think as a just-readable 'small' font it's ok, but then if you double-size it, it's too big. For the 'normal' font I think we need something bigger the doesn't need size-doubling. If anyone would like to experiment, you can use this as a test - the 'font' is just written with
Right now that font is:
What does everyone think? Looking at it on a watch on my desk with the backlight off, it feels:
I'm trying to work out why it's that much less readable - whether it's the spacing between the letters, the spacing inside them, or it being more 'square'. ... but it's looking to me a little like font doubling isn't really going to work (2x, 3x increments are just to coarse), and maybe the only sensible way to do fonts is just to have a bitmap for each scale level. Attachments: Posted at 2023-03-08 by @gfwilliams Second test with two sizes:
Attachments: Posted at 2023-03-08 by Sir_Indy I like the sound of new fonts, particularly a nice range of sizes. typically I use the Vector font, it's easy to use for large sizes though not as good for small text. It would be nice to have the option for Bold text too.
This is a paid for font, but the Rebble team has had a go at making a similar font and releasing it on Github: https://github.com/pebble-dev/renaissance Attachments: Posted at 2023-03-08 by @gfwilliams Thanks! That is very interesting indeed! I think that's the only bitmap font in useful sizes I have ever seen! (apart from https://github.com/Tecate/bitmap-fonts - but those tend to be too small) There does seem to be some documentation about the font format at https://github.com/pebble-dev/wiki/wiki/Firmware-Font-Format but actually the most useful seems to be the textual source files: https://github.com/pebble-dev/renaissance/blob/master/files/renaissance_18.pbff I just bodged something up - this is what 18 bold looks like:
Posted at 2023-03-08 by Sir_Indy
Fabulous, thanks Gordon! Your bodges look like finely honed works of art next to mine! At first glance these look promising, some of the characters have gone a bit wonky, but very readable in the emulator and on a JS2. Using an existing font has got to be easier than designing a new one (or multiple for different sizes) from scratch, question is are we happy to do that? Also, is it possible to adjust the spacing between letters? When I made the mockup above I thought it was much more readable with just an extra pixel of space between each letter. Attachments: Posted at 2023-03-08 by @gfwilliams Ahh, thanks - yes, it seems It looks like the pebble font format allows characters to actually overlap, which we don't handle yet. So there's a bit of a question I guess about whether we use it as an opportunity to improve the font rendering/format as well.
Definitely true! Well, assuming there are no legal problems I feel like the font itself looks better than my attempts so could be a good idea. I don't see an explicit license there so if we decided to go that route I'd have to contact the author - but it looks from what he's written in the README that he'd probably be fine with it.
Right now that's up to the font converter, so yes it could be tweaked - however one of the reasons for changing font was to have something narrower (getting enough text horizontally is always an issue), so if we could get away with 1px space I think that might be preferable. Posted at 2023-03-08 by @gfwilliams 28px Attachments: Posted at 2023-03-08 by @gfwilliams 18px bold: Attachments: Posted at 2023-03-08 by @gfwilliams It definitely feels like an improvement... The only gotcha is 28px is the maximum size we have a font for, but we could get 36px by 2x upscaling the 18px font (we'd probably want to use the non-bold one for that) edit: I just dumped the code I used in https://github.com/espruino/Espruino/tree/master/libs/graphics/font Attachments: Posted at 2023-03-08 by @gfwilliams Quick update, I just heard back from Jay Neubrand who made the font, and he's more than happy for it to be used in Espruino and has added a very permissive license to it. Personally, seeing it in the menu above it feels clear to me it's a huge step up from what we currently have. I might have liked the capitals to be a bit more narrow, but beggars can't be choosers :) So now I guess the questions really are:
There's quite a lot to think about there unfortunately :( Posted at 2023-03-08 by rigrig A new font format seems interesting, especially if you could add e.g. emojis. I guess sometimes you still want to pick an exact font, for e.g. clock layouts? Maybe add Posted at 2023-03-08 by @halemmerich I think the Renaissance font looks very nice and well readable. Having a way to get a font fitting into a given height would be great for layouts for both B1/B2 since something like As for the different width glyphs I think that would be very beneficial for rendering more text. The problem of watchfaces or similar stuff could be solved by having Posted at 2023-03-09 by @gfwilliams
It's not just variable width, but variable height too since virtually no characters fill the whole area.
A new function is a great idea! And then we can provide a polyfill for older firmwares. Potentially we could just have
That's a good thought - and not too hard to do. I had been wondering about how to do monospaced fonts nicely... I guess there's a question about whether we try and have Posted at 2023-03-09 by rigrig
That seems like a good idea (maybe also add
That looks good. (and font packs could override
On the one hand: that seems overly complicated. I think messages should just use a fixed size and handle overflow: that will happen anyway, and showing short messages in a larger font doesn't seem worth the hassle. (with variable character size, I think we'd need to "try all sizes until one fits", not sure that is a good idea¹) ¹ even though I wrote that code myself, regretting it now 😉 Posted at 2023-03-09 by Sir_Indy Great news that the font is available with a 'very permissive' license (having read the license I see why you didn't spell it out here!) Very glad to see that others also think Renaissance would be a suitable font. I don't know enough about how Espruino works with fonts to comment on a new font renderer, or packaging. Since some of the Renaissance fonts are bold though it would be nice to be able to use that. Since they're already packaged up as PBF files could we use them directly? Would people be able to make new fonts in the same format? In terms of how we use the fonts, I'd be happy specifying the font and size directly, especially if there was a wiki page or tutorial with examples of the different fonts and sizes. Alternatively listing them as I really like Gordon's idea of working out the best size of font to fit the text in a space, I agree it would be great for messages. I'm actually less keen on letting the Bangle pick the 'best' font size in other situations though, I already find it slightly odd that menu items can have 2 sizes of font, I can imagine some very strange looking screens with multiple different sized bits of text looking very messy. Posted at 2023-03-10 by @gfwilliams
I was wondering about that. It feels like maybe it's not as compact a format as it could be (even our naively stored 28px renaissance font is 8.5k, whereas the pbf is 10k), but maybe that doesn't matter if a lot of the time it'll be in external flash anyway. It does handle non-ascii chars though which is potentially very useful. I'd feel happier if there were a bunch of tools out there for working with the format, but it doesn't seem like there's a great deal at the moment... So I'm still on the fence a bit. Maybe for the size picking, we just make that code a library for now if it is needed at all, and then see if it gets used a lot? Posted at 2024-07-07 by Chriz I did some experiments with replacing fonts in the run app and the menu and using the pebble font. See espruino/BangleApps#3109 Maybe it would be better to discuss it here? One issue with the pebble font is that it has much top spacing:
What do you think? To me it looks like we couldn't use the fonts like they are. It should be possible to remove the high glyphs and only use the characters of e.g. the 6x8 font and move the regular glyphs up. I think it could be automated. Otherwise it would be lot of work. Attachments: Posted at 2024-07-07 by Chriz Here I am using the 24 bold font for "GPSS", etc and removed the top spacing. It looks much better than the original one and might also be better readable. But the largest available pebble font, the 28, has only a visible size of a 20/22 font. That is too small. Maybe we could talk to the author if he would create some more sizes... Edit: I did a little experiment and doubled glyphs from the pebble 18 font using nearest neighbour. And then adjusted the edges using the 28 size as reference. Would be some hours of work but I think it should be possible to create a 36 size version. Attachments: Posted at 2024-07-08 by @gfwilliams I think it's probably best to discuss this on the GitHub issue as you've posted on there and I already replied: espruino/BangleApps#3109 |
Beta Was this translation helpful? Give feedback.
-
Posted at 2023-01-25 by @gfwilliams
Hi!
I've just been having a quick play at trying to sort out the font situation on Bangle.js.
Basically, it's almost impossible to get a bitmap font in the same style and different sizes, so right now we have different types of fonts for each size, and it doesn't look great. Many folks seem to resort to just upscaling 6x8 to a bigger blocky font.
It was suggested before that a font could be upscaled, and I thought I'd give it a try with the AdvMAME scale algorithms:
This isn't ideal, but it seems like it could be a possibility - specifically if I made a custom font in higher detail than 6x8 (maybe 8x12) then that would likely upscale a lot better, and we could have acceptable quality 12, 24 and 36 pixel high fonts in the same style.
Any thoughts?
Beta Was this translation helpful? Give feedback.
All reactions