Comment by SquareWheel | Hacker News Reader

Comment by SquareWheel | Hacker News Reader

Parent Full thread

Great website. There's really no concept of "web safe" fonts today when you mix in mobile operating systems. At best you can choose similar-looking fonts and hope for the best, and this site seems useful in that aim.

One tool I'd love, though would clearly be out of scope here, would be a way to find safe fallbacks for popular webfonts. For example I recently created a site in Montserrat. After some testing I found a close fallback font was Verdana, with a size-adjust[1] of about 99.5%. That resulted in minimal document reflows when the font was slow to load.

Picking the top 10 or 20 popular Google Fonts and finding nearby fonts with good scaling tweaks would be very useful. I could see a sister project to this site offering something like that.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/...

https://meowni.ca/font-style-matcher/

Is a tool that lets you play around to discover good fallback settings.

Thanks for the link. I've actually used this one before, but it's not quite what I was hoping for.

These settings (font-size, line-height) are defined in the content CSS, not the @font-face rule, so they won't be automatically applied when the font is swapped. Properties like size-adjust or ascent-override are better for matching like-fonts as it's all automatic.

Also, while it is very useful to have a tool to come up with your own pairings, I think a list that covers some of the most popular fonts and creates perfect settings would be very useful for quick implementations. Something like the submitted site above that has done the legwork for you.

Maybe this is more what you're looking for? https://screenspan.net/fallback

Much closer to what I had in mind! Thanks, this one is new to me. It would've saved me time in my previous testing.

Hopefully one day the existing CSS properties like letter-spacing can be supported in @font-face to allow for even better matching. That would make techniques like this even more powerful.

Loved this, thanks for sharing

Reply on news.ycombinator.com