Anyone using SDF fonts, and if yes, how do you deal with the quality? Do use specific rasterized sizes for certain ranges? Does it work for sub-pixel (not not clear type, but to avoid the usual blurriness for pixel perfect glyphs rendered off-pixel)? - ThreadSky

mikkomononen.bsky.social • 69 days ago

Anyone using SDF fonts, and if yes, how do you deal with the quality? Do use specific rasterized sizes for certain ranges? Does it work for sub-pixel (not not clear type, but to avoid the usual blurriness for pixel perfect glyphs rendered off-pixel)?

Comments

villeruusutie.bsky.social•68 days ago

I use MSDF 32px fonts and icons in my home engine. Quality is good when size is higher than 20px even in motion. When size is around 13px or lower it gets bit blurry. Haven’t investigated if some other size or generator settings would work better.

mikkomononen.bsky.social•67 days ago

Thanks! The blurriness could be also due to the age old "to gamma correct or not".

villeruusutie.bsky.social•64 days ago

I investigated it and it was actually issue with quad rendering. I had to shift it 0.5 pixels and now it’s lot more precise and works in smaller sizes. Bigger font was hiding this issue.

mikkomononen.bsky.social•64 days ago

Nice! Another thing that I came across was that in some cases people have had too small range in the SDF texture, which can cause blurriness too. Been bitten by off by 0.5 so many times, let it be textures or the AA gradient.

gargaj.umlaut.hu•69 days ago

@aras-p.bsky.social had a great article about SDF fonts although he didn't go into that much detail: https://aras-p.info/blog/2017/02/15/Font-Rendering-is-Getting-Interesting/

mikkomononen.bsky.social•69 days ago

That was a good one, thanks. On a Lithuanian tangent, this Decima engine UI presentation was really interesting.

The tiled SDF rendering for UI bit is cool, and it also shows how they use their font atlas.

https://www.youtube.com/watch?v=U_MnhTuT_l

mikkomononen.bsky.social•69 days ago

I think I cut some letters off the link, this one should work:
https://www.youtube.com/watch?v=U_MnhTuT_l8

sebdegraff.bsky.social•68 days ago

Very cool, thanks for sharing!

sebdegraff.bsky.social•68 days ago

Also not SDF, but I found this series of article extremely interesting: https://superluminal.eu/16xaa-font-rendering-using-coverage-masks-part-i/

flohofwoe.bsky.social•64 days ago

It's been a while, but we used a single font size and texture for all display sizes (don't remember the texture size though but, only that we had to go to 4096x4096 for the Chinese localization - size for international latin + kyrillic was probably 512x512).

mikkomononen.bsky.social•64 days ago

Thanks for the info!

I think there's a size that works well for most cases, plus multi-channel SDF probably stretches a bit further with scaling.

I think this is one of those cases where I get trapped by the generalization, where I think I need to handle everything :)

mikkomononen.bsky.social•64 days ago

I was even thinking something like allowing to define a set of sizes that we'd rasterize. Larger ones usually don't need all the glyphs, etc.

mikkomononen.bsky.social•64 days ago

SDF seems to handle the grey-scale sub-pixel case nicely. You start to get issues (a little simmering) when the stem sizes are < 1px, but that is expected.

nothings.bsky.social•64 days ago

FWIW, conventional wisdom is to supersample inside the pixel shader.

(Though I don't have personal experience; I've never used SDF in anger, which is why I haven't replied to your substantive questions.)

flohofwoe.bsky.social•64 days ago

...we didn't do any fancy subpixel / kerning stuff, but used effects that come "for free" with SDF font rendering (like bold and outlines). In general we tried to avoid too small display font sizes because that looked ugly. Bigger is better...

flohofwoe.bsky.social•64 days ago

...also we just accepted the rounded corners noticeable when the display font size gets very big.

Random representative screenshots from the interwebs:

Comments

Posting Rules

Reply