Metro-like font for website use [closed]

Question

What font would you advise (free for commercial use) for a website styled like Metro Windows 8? Would be best if it's on Google Fonts etc.

Answer 1

The font used with the 'Metro' branding is Segoe UI. Unfortunately, as others have mentioned, it isn't available as a free download.

Though, even if you happen to have Segoe, other users of your webapp might not. Consequently, for it to display consistently to your users you would need to @font-face it. But, alas, due to licensing, it'd be against the law to simply host it on your server and font-face it. The only legal way to use Segoe UI is to purchase a license to use it.

But you want a free option, so let's look at some Segoe lookalikes.

Segoe UI is incredibly similar to Frutiger – so similar, in fact, that Microsoft was taken to court by Linotype over it – but, of course, that font isn't free either.

If you specifically wanted to use a Google Font, the popular Open Sans might be your best bet, though there are a few noticeable differences between it and Segoe.

You might have more luck finding fonts that aren't all that well-known but are heavily inspired by the famous, expensive ones (some might call them shameless rip-offs). Two examples are CartoGothic Std and WeblySleek UI. For most users, you'll find that the differences between these fonts are imperceptible. And you're in luck, as, at the time of writing this, it happens that you're free to host these fonts yourself to provide them via @font-face (Disclaimer: I recommend you read the licenses for details before doing this. They are subject to change).

Want a quick comparison? Here are some images, as rendered in Photoshop on OSX. The font sizes are all about 10pt. And they're all set to normal or book weight.

As you can see, the biggest difference between the first three fonts and Open Sans is the lower case g. I'm sure there are more differences between the upper case letters, and I encourage you to explore those details.

Segoe UI

Segoe UI http://jmeas.com/stackoverflow/segoe.jpg

Frutiger

Segoe UI http://jmeas.com/stackoverflow/frutiger.jpg

CartoGothic STD

Cartogothic STD http://jmeas.com/stackoverflow/cartogothic.jpg

WeblySleek UI

Cartogothic STD http://so.jmeas.com/weblysleek.jpg

Open Sans

Open Sans http://jmeas.com/stackoverflow/open-sans.jpg

I hope one of those fits your needs.