In this roundup, we are going to look at the best fonts available through the TypeKit service. I am a huge fan of this service and truly believe that any real blogger or webmaster should be using TypeKit for their fonts instead of Google Fonts, which have become the defacto.
Of course, the confusion comes with choosing which font is best for your site. There are over 100,000 fonts to choose, how will you ever narrow it down to the best? Lucky for you, I have created a list of the best TypeKit fonts. The style of fonts available on TypeKit are everywhere between more standard fonts to fancy, cute, and curly fonts. The purpose of this roundup though, is to find fonts that will look good for your main content on your site. We are focusing on clean and readable font selections.
Best TypeKit Fonts for Body Text
Let’s start by looking at the best fonts for the main content of your site. To me this is the most important font to master as it is what most people have to read and the wrong font can effect how long someone reads your content before getting annoyed.
Adriane Text
This is not a standard font that you see very often, but it sure is a very legible font. I particularly like it for the web becuase it is a transitionary font between serif and sans-serif. While it still maintains serifs that help lead the eye to make it easier to read, it has a blocky structure to the letters more like a sans-serif font which really pops out on monitors. For this reason it makes a great font for a blog.
Another interesting idea is to try this font if you have lighter text colors like a light gray. This high contrast font looks good even without making it completely black. One of my favorite techniques to make your text stand out is to use a gray color instead of flat black, and this font works very well with that technique.
Site Link:
https://typekit.com/fonts/adriane-text
Example Site:
Proxima Nova
This is the number one most popular TypeKit font, and for very good reason. I see it popping up all over now. My favorite characteristic of this font is the spacing between characters (called Kerning). It is a very “standard” font style, comparable to the class Helvetica which means it doesn’t scream for any attention, but just looks good sitting there on the screen. It also has an extremely generous x-height which means that the lowercase characters are about 3/4 of the height of the uppercase characters instead of around 1/2 the height which is considered standard.
Proxima Nova is also available in tons of different weights and varieties. You can find it as thin as 100 or 300. It is also available in Extra Bold and Black, plus everywhere in between. There are also italic versions of every weight available. With all these options however, it can also be a bad thing. Some newer web designers will naturally load all versions of this font onto their site, which comes in at a Whopping 351K download. The font I use on this site is Proxima Nova and I choose to download the Thin (100), Regular (400), Regular Italic, and Bold (700). This is a more reasonable size, but still a bit on the heavy side.
Site Link:
https://typekit.com/fonts/proxima-nova
Example Site:
http://jacurtis.com (I use it as the main font in this article and all articles)
Freight Text Pro
This is another font gaining extreme popularity. In fact in 2014 I have seen a number of large blogs switch to this font and for good reason. It is extremely readable. This is also an extremely unique font. It is a serif font that meets a monospace font (like courier). It is not quite monospace, but very close. There are a good variety of font weights as well and the italic versions of this font are some of my most favorite italicized fonts ever. The serifs are extremely playful on the italics, leading directly from one character to the next.
The Book weight is 400 and it comes across as very bold in my opinion. This shows a lot of contrast and shoots itself off the page. To me, this font does not hide in its content it really makes a statement for itself. This font also has several varieties including a sans serif option.
Site Link:
https://typekit.com/fonts/freight-text-pro
Example Site:
Nimbus Sans
When it comes to a sans serif font, we haven’t seen any yet. This is because traditionally you use serif fonts for body text and sans-serif for headlines. However, I have seen several great examples of using Nimbus Sans as body text and it always looks amazing. Here is the kicker though, this font has extremely high contrast. In fact, when you use black as the font color, it is probably too much contrast for my taste. But if you tastefully tone it down to a light gray, wow does this font read very nicely. Its extremely easy on the eyes and gives your site a sense of uniqueness.
Site Link:
https://typekit.com/fonts/nimbus-sans
Example Site:
http://heckhouse.com/book-review-graphic-design-before-graphic-designers/
Museo Slab
This is possibly my favorite font family of all time. Museo, Museo Sans, Museo Sans Round, and Museo Slab all perfectly compliment each other and you can use them in conjunction with each other to build captivating typographic marvels on a website. The entire font family is available on TypeKit and this is normally a very premium font. We paid over $1,000 to use this at one of the companies I used to consult with.
The original Museo is my favorite of all the fonts, but it works better as a Headline font or title font. For body font, the award goes to Museo Slab which offers a blocky serif font. The liberal spacing makes them read particularly well with black font on white backgrounds.
Site Link:
https://typekit.com/fonts/museo-slab
Example Site:
http://www.makingit.co/2014/08/national-stationery-show-2014-budget-and-expenses/
That sums up our roundup of TypeKit fonts for body copy. You might also be interested in checking out my roundup of TypeKit fonts for Headlines. If you are looking for how to get started with TypeKit, then I recommend my TypeKit plugin for WordPress which makes it very easy for anyone to add TypeKit functionality to their themes without modifying any code.
Do you have any favorite TypeKit fonts that I missed? Let me know in the comments.
