Full stack web developer, interested in all the things, but especially the web, code, design, Linux, OS X, PHP, WordPress, JavaScript & robots.

Tagged: fonts

Font style matcher image/svg+xml

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]. This tool helps you do exactly that.

Very nifty.

Google Fonts Redesign image/svg+xml

Screenshot of Google Fonts website

The redesigned Google Fonts site.

I think the redesigned Google Fonts site looks fab and I love that you can now change the background/foreground colours, very nifty! That said, there do appear to be some rendering issues on browsers other than Chrome, which is unfortunate as I’m a Firefox user. I hope the developers fix these issues soon as I much prefer the new design.

Also, see Reimagining Google Fonts for more information about the redesign.

UPDATE: The rendering issues appear to be fixed now.

Stop Feeling Dumb About Pairing Fonts image/svg+xml

You know you need to pick typefaces that will work well together, but it seems like there’s a lot more to it than meets the eye, and you don’t have a year to get up to speed on the ins and outs of typography.

Relax! You don’t need to know all the rules. A few simple guidelines and basic type knowledge will have you making great type choices in no time.

If I can get away with it, I tend to opt for a single font family in my designs. I’m not sure if that’s because I’m terrible at pairing fonts, or because I’m indecisive, or because I just prefer the simplicity/minimalism of a single font. Anyhow, this is a nice guide to font pairing.