Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Join Justin Seeley, lynda.com staff author and design enthusiast, each week for a new 5-minute, self-contained tutorial that you can use to instantly improve your design workflow. This series covers techniques for print, digital, and web design, addressing the tools that creative professionals like you use most. Learn new ways to leverage layer styles and vector shapes in Adobe Photoshop, work more efficiently with text in Illustrator, and embed videos and even tweets in WordPress posts, and much more. Check back each week for a new installment, and a new design hack.
- Hi there, Justin Seeley here once again with another edition of Creative Quick Tips. Today, I'm going to be talking about five lightweight fonts that you could use for your next web design project using Adobe's Typekit service. In order to find these fonts, you're going to have to go to Typekit.com. If you're already an Adobe Creative Cloud subscriber, it's actually really easy to use these fonts, because all you have to do is, click Use Fonts and build yourself a kit and then implement them on your website. If you need more information on how to use Typekit fonts, be sure to check the lynda.com online training library for one of our Typekit courses by James Williamson.
Now, let's go ahead and take a look at the fonts. First and foremost is something called Omnes Pro. This is a really interesting font. As you can see here, it comes in many different weights and sizes, but mostly the one that I'm interested in is the hairline, which is this one right here. That's the great thing about Typekit. It gives you great examples of the font in action in everyday sentence form. You can see all the different weights and styles and sizes of the service that it offers. And you can also go in here and check out different specimens. So I could come and actually look at the hairline here, I could come in here and type with the hairline font.
That way, I can see how it works. And then I can browse other samples, as well. So again, this is called Omnes Pro. The second one is called Proxima Nova Alt, and this is a pretty interesting one, as well, because it comes in many different forms. The 100 weight is the one that I'm talking about in this movie, though. So let's go over here to the specimens and let's just look a the thin. That comes with all these different specimen examples. Here, you can see it on both white backgrounds and black backgrounds, at large and small sizes, as well -- pretty interesting.
Third font is going to be Azo Sans, which is also available on the Typekit service. Again, this time, the thin is going to be a 200 weight. You can also see on some of these fonts if they're available for both desktop and web. If they're available for both desktop and web, you can actually synch these desktop fonts to your computer, and that way you could use them in a mockup, let's say in Photoshop or Illustrator. The next font that I'm talking about is Brandon Grotesque. Also comes in a 100 weight thin font, up here at the top.
And it is only available for web, unfortunately, but it is a great font to use. You can then go to the type tester, if you wanted to, and you could type out something inside of here, just to see how it looks and what it's going to look like on your website. Then you can adjust the size here, as well. So you could see a big for headings or a small for body copy, totally up to you. And the last font that we're going to talk about is Activ Grotesk. And, again, it comes as a hairline, example here, at 200 weight. If you want to browse samples of this, you can do so from here.
And you could switch it up and see what it looks like in Safari or maybe Firefox, and you can also see it rendered down in Chrome. All of these different windows here allow you to see exactly what it's going to look like on that particular browser, using that particular operating system. So, in this case, it tells you Activ Grotesk in Chrome on Windows Vista, taken on the date that it's recorded, Typekit.com. It's a great way for you to check these fonts on multiple systems before you get going.
So there you go, five fonts that I think you should consider for your next web design project. They're all really lightweight and flexible. They're also all sans serif, if you didn't catch that, which makes them ideal for body copy, I think. But it's totally up to you how you use them. So start putting them into your kits and see what you come up with.
Find answers to the most frequently asked questions about Creative Quick Tips .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.