https://github.com/notwaldorf/font-style-matcher

⚡️🎨 Matches the x-heights and widths of two fonts
https://github.com/notwaldorf/font-style-matcher

Last synced: 3 months ago
JSON representation

⚡️🎨 Matches the x-heights and widths of two fonts

• Host: GitHub
• URL: https://github.com/notwaldorf/font-style-matcher
• Owner: notwaldorf
• License: mit
• Created: 2016-11-11T18:41:50.000Z (about 8 years ago)
• Default Branch: gh-pages
• Last Pushed: 2024-02-25T14:10:20.000Z (9 months ago)
• Last Synced: 2024-07-18T15:33:13.488Z (4 months ago)
• Language: JavaScript
• Homepage: https://meowni.ca/font-style-matcher
• Size: 61.5 KB
• Stars: 508
• Watchers: 13
• Forks: 43
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# font-style-matcher

If you're using a web font, you're bound to see a flash of unstyled text (or FOUC),

between the initial render of your websafe font and the webfont that you've chosen.

This usually results in a jarring shift in layout, due to

sizing discrepancies between the two fonts. To minimize this

discrepancy, you can try to match the fallback font and the intended webfont’s

x-heights and widths [[1]](http://helenvholmes.com/writing/type-is-your-right).

This tool helps you do _exactly_ that.

![fouc](https://cloud.githubusercontent.com/assets/1369170/20506300/ed61ebac-b007-11e6-8324-df0a90604acd.gif)