Font style matcher
Posted by Cătălin on Wed, 15 Nov 2017
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. This tool helps you do exactly that.
The fox jumped over the lazy dog, the scoundrel.
Download from Google Fonts
The fox jumped over the lazy dog, the scoundrel.
Overlapped
In the default example, Merriweather is taller and wider than Georgia, so if you bump Georgia's font size up to 18px, and its letter spacing to 0.1px you'll get a pretty close match!
The fox jumped over the lazy dog, the scoundrel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The fox jumped over the lazy dog, the scoundrel.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Credit: notwaldorf github
Archives
- May 2023 1
- April 2023 1
- March 2023 3
- January 2020 1
- November 2019 1
- September 2019 1
- April 2018 2
- February 2018 1
- January 2018 3
- December 2017 2
- November 2017 2
- October 2017 2
- September 2017 1
- July 2017 2
- June 2017 2
- May 2017 1
- March 2017 2
- February 2017 2
- January 2017 2
- November 2016 1
- October 2016 4
- August 2016 1
- April 2016 1
- June 2015 1
- May 2015 2
- April 2015 1
- December 2014 1
- October 2014 2
- September 2014 1
- July 2014 2
- June 2014 1
- March 2014 1
- February 2014 2
- January 2014 2
- December 2013 2
- October 2013 2
- September 2013 2
- July 2013 2
- June 2013 1
- March 2013 1
- February 2013 3
- January 2013 1
- December 2012 1
- November 2012 1
- September 2012 1
- August 2012 2
- April 2012 1
- August 2011 2
- July 2011 2
- January 2011 1
- October 2010 5
- August 2010 2
- July 2010 3
- May 2010 1
- April 2010 5
- March 2010 3
- February 2010 2