Preview and Compare Fonts in Browser with Flipping Typical

Every designer needs to know a little about fonts. They’re the building blocks of content and they can make or break a readable web page.

With the Flipping Typical web app, you can compare all fonts installed on your machine to see which ones pair up the best. You can type any phrase into the top box and see immediate updates for all the different fonts. This can be used for planning logos, print work, or of course structuring a web page.

flipping typical
15 Online Typography Tools For Web Designers and Developers

15 Online Typography Tools For Web Designers and Developers

Typography is the foundation of any design, because reading is one of the most basic things we do... Read more

It’s usually common to have a different font for page headers compared to the paragraphs and smaller bits of content. Choosing which fonts to use can become a struggle.

The unique part of this web app is how it checks the font library of your local computer to pull all available options. These are then rendered in the browser but they’ll only work for your computer because they’re already installed.

So keep in mind not all of these fonts will be web safe. If the font you like isn’t a default or hosted on Google Web Fonts then you may need to find a web-safe version.

To see all the fonts on your machine, scroll to the bottom of the page and look for a “Load more” link. This should only appear if you have 60 or more fonts. By default, the app loads a limited amount to save space and memory but when you click that link you should get a complete list of all fonts on your machine.

flipping typical fonts

If you like a particular font you can click the name to change between bold & slim styles. Many fonts don’t have different styles so you’ll get the best browser-rendered version.

css font stack

The site is totally free and will be free forever so it’s a nice little tool to compare & contrast font options. If you have any thoughts on the app or just want to share your thanks you can reach the creator Stuart Robinson on his Twitter @sturob.

Typograph 101: Serif vs. Sans-Serif

Typograph 101: Serif vs. Sans-Serif

At the stage of selecting fonts, a designer often asks himself, "to Serif or Sans-Serif"? Choosing the kind... Read more