Typefaces is one of the most fundamental (but sadly, the most underrated) design element. A legible and clear readibility of typefaces is a key to make audience feels comfortable with our design.
All of desktop version fonts are OpenTypeTM, a cross-platform format that provides richer linguistic support through widely expanded character sets and advanced layout features.
PF Handbook Pro
It is carefully picked for header, headline, big caption, hero, title, etc..
While using this typeface, always remember to make it uppercased.
In most cases, Adobe Clean would dominate any typography elements. It should be picked as body elements.
Use Monaco on numeric data type, code snippets, etc..
Not only its modern look that distinguish on its class, Monaco was designed with better legibility. As you can see on given cases above, the difference that it made between lowercase 'L', uppercase 'I', and number '1' are all nicely done.
Use Roboto Slab for quote & conversation sentences only.
For the sake of web page loading time, you can use *.woff file only. Currently, the browsers support for *.woff is pretty good, as long as our project does not require support for IE8, Opera Mini, and older versions of Android, then it will be just fine.