Long gone are the days we had to adapt ourselves designing our websites with the same basic font families over and over again.

Nowadays, possibilities are as big as our personal font library. In fact, the increasing evolution of browsers performances, important popular free libraries such as Google Fonts, or even converter web font tools such as Fontsquirel*, are just new free doors opened for creative minds. We can surely say that there has never been a better moment to be a web designer!

Let’s focus in the main subject of this article : What makes a good font family a very good WEB font family? Well, to make it simple, it is all about eligibility requirements for every typeface.

In the first place – maybe the most important condition in the multimedia world – there is legibility. The font you use must be readable in every screen and display resolution. When you begin your multimedia project, be sure to chose a font that has been improved for screen display. Fonts that have gone through the process of «hinting » are more likely to display beautiful rendering in your desktop.

In a second place, we want flexibility and diversity. A good web font is a typeface that has at least 3 different styles to chose from. This will give you the possibility to hierarchize web sites that may contain massive amounts of information.

The efficiency of the font is also a requirement when you make your choice. Prefer always a font family that has a complete Glyphset. This is actually really important specially if you are working in very specific subjects with international clients for example. You must be careful because lot of free fonts only have limited number of basic glyphs.

Finally, we have compatibility. This term can be explained in two different ways :

The first one is to be sure that your web font can be opened in any browser. When you are working with web fonts you always have to anticipate the fact that some users still use older browser versions. It’s a nice tip to have your favorite « basic » web font as a replacement in your pocket.

The second meaning of compatibility is in an esthetic point of view. As designers, we often trend to stay fixed in the awesome render of our beautiful Mac retina display. Always check you design in lower resolutions screens and in other operative systems (Linux, Windows). Make sure to always chose a font face that looks good everywhere! Yet again the importance of well hinted fonts.

That being said here is my personal list of web fonts. Some of them are chosen by their performance and other only by their beautiful design:

1 .RespublikaFYLegible, playful and optimized for an amazing rendering on your browser, Respublika FY is a tasty font family of 10 weights.

2 . Colophon foundry started this awesome font in 2009. Aperçu has 9 weights and disposes an extended glyphs compatible with Cyrillic-based languages. This impeccable font will be just perfect on your library.

3 .MarianinaExtFYWhen your are looking for diversity, Marianina Extended FY is your perfect match! You actually have 24 weights to chose from, you can’t do wrong!

4 .OpenSansThis is actually a very good alternative as a web font if you are looking for an Helvetica alternative in your design. Open Sans is a very legible sans serif font. Clear, basic and free! Maybe the best part is that this is actually a Google font. Who says better?

5 .LatoWhen you are done using Open Sans, you can always count on Lato. This Google font offers you a catalog of 10 weights to chose from, and of course for free.

6.KarlaAnother Google font in my top ten but this time maybe one of the most underrated and obscure Google font. Karla is actually a really pretty and delicate font. It has just the charm necessary to be on this list, even though is limited by only 4 weights to chose from.

7 .HelvaticaNeueHelvetica Neue is necessary in every font collection. The web font version works actually really good.

8 .MuseoSlabMuseo Slab is one of the fonts that has being over-used over the past three years. Nevertheless this punchy font just works even though is a serif font.

9 .HansomSlabFYHansom Slab FY has just being released and it is a beauty! It has impact and character. It would easily had been in the top five of my list but it lacks of some fundamental weights.

10 .BoosterIf you like to some flavor and generosity in your design, just go after Booster FY. This font has only one weight available, but is so nicely hinted that the display in your screen is beautiful.

* The fact that you are now able to convert desktop fonts on to web fonts doesn’t mean that you have the licence to do it. Always be sure to contact the licence owner before using this tool.