Join James Williamson for an in-depth discussion in this video Examining a font, part of Up and Running with Typekit.
- Comparing fonts side-by-side is great, but for many projects, you're going to want to take a closer look at the individual fonts themselves and examine them in a little bit more detail. I want to take a look at the options you have when examining fonts inside of Typekit. I've done a little refining on my search here. I'm looking for a serif font that's available for web and is appropriate for headings. This is a font that I'm going to use for the exercise that we're going to be doing a little bit later on. Looking through the fonts that I have here, I'm really intrigued by this Acta Display font.
I think this is a really nice-looking font. If I want to learn a little bit more about it, all I have to do is hover over the font and click on it. That's going to take you to a detail page for that particular font. Before we get to the particulars, I want you to focus your attention on the right-hand side of the page. There's a little column over there that gives you a lot of extra information about the font that I like. First, there is some information about the foundry that created the font. They're going to have a profile and the foundry site itself, if you want to browse out and learn more about them.
If I scroll down, I can see that they've got listings for the font's classifications, what it's recommended for, the different properties that that font boasts, and also the language support for the font. You can learn a lot about it just by looking through that quick list of information there on the right-hand side. Okay, now the main detail itself first shows you a display of all the weights and styles. This is extremely handy because, if you're looking for a font that can do a lot of things for your site, or if you're only looking for one particular thing, this will tell you whether the appropriate weights and styles are available.
I can scroll down through this, and I can see that there's a lot of variation in this font. It goes from light, 300, all the way down to a black italic. So this is font that's going to be very versatile if I use it on my site. I can also take a look at a type specimen. If I click on the specimens, notice that I can change the specimen for which weight of the font. Maybe I'm looking at extra bold, for example, and I can see how that looks. Notice that the font specimen has also body copy of varying shades of contrast, and it also places it on a black background, as well.
It really helps you get a feel for how well this font is going to read in certain situations. I want to go back to Book because there's a feature here that I really like that allows us to open this font in an expanded web font specimen. I'm going to open this up in a new tab, click over to the tab, and you can see, kind of, what this expanded specimen will do for you. There's a lot more in terms of font size and body copy. You can look through all the sample characters. But this is what I really like about it, right down here. It'll help you compare this font to normal system fonts, like Arial, Times, and Georgia.
You can get a feel for how this font might work with other fonts, or how the text might look if it has to fall back to a system font and whether or not there's going to be a huge change in the visual weight of the font. I really like this sample, and I'd recommend giving it a look when you're examining specific fonts. Now, in addition to the specimens, we have a type tester. You click on this, and this allows you to enter in your own custom text and see how it's going to look with this font. If I had a specific heading, which I actually do in this case ...
I'm going to use this font for Up and running with Typekit. I can type that in, choose the weight that I'm looking at, and then I can even play around with the size to see what it's going to look like at the targeted size I have in mind. So, extremely handy. Now, it also gives me this really nice feature of screenshots in specific browsers on specific platforms. This can be extremely helpful for those of you that are on one platform and don't have the ability to test on another.
I'm on a Mac. Even though it gives me screenshots for OSX and the different browsers, which is nice, I'm really more interested in the Windows version of it. Now, unfortunately, you're not going to get a screenshot returned for every single platform and every browser. They just haven't processed all of them. If I go over to Windows 7, for example, and click on Chrome, I can see a screenshot of what it looks like on that platform. I can even go down to say Opera, or Internet Explorer 9, older versions of it. But if I go over to Windows XP Vista, and I choose Chrome, notice that it "supports this browser, "but we're still processing its screenshot," which means, "Sorry.
We just don't have this screenshot available." You're going to find that from time to time on different platforms. But you should find enough screenshots to give you a good feel for what it's going to look like on the various platforms. So that's a quick look at the detail page for the individual fonts in Typekit. Being able to examine a font in that much detail is extremely helpful at making sure that you've chosen the right font for your site. I especially love how you can view the font in multiple browsers, on multiple platforms, since it helps remove some of the guesswork as to what the font is going to look like across platforms.
- What are web fonts?
- Understanding the Typekit setup requirements
- Browsing fonts
- Creating favorites
- Adding fonts to kits
- Using the Kit Editor
- Customizing selectors
- Defining fallback fonts
- Selecting fonts for desktop use