Hacker News new | ask | show | jobs
by SquareWheel 1194 days ago
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/...
1 comments
ZeroGravitas 1194 days ago
https://meowni.ca/font-style-matcher/

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

link
SquareWheel 1194 days ago
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.

link
corny 1194 days ago
Maybe this is more what you're looking for? https://screenspan.net/fallback
link
SquareWheel 1194 days ago
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.

link
airstrike 1194 days ago
Loved this, thanks for sharing
link