IntroductionWelcome| 00:04 | Hi, I'm James Williamson, senior author
at lynda.com, and I want to welcome you
| | 00:08 | to Up and Running with Typekit.
| | 00:11 | In this course we'll be exploring Typekit,
a popular online font-hosting service.
| | 00:16 | We'll start by going through an
overview of web fonts, font hosting, and how to
| | 00:21 | get started with Typekit.
| | 00:22 | Next, we'll explore how to use Typekit
to choose fonts and how to build font
| | 00:27 | kits for your sites.
| | 00:28 | From there, we'll tackle using Typekit
to deploy fonts for your sites and go
| | 00:32 | through the various ways you can
modify your CSS to control how fonts are
| | 00:37 | applied throughout your site.
| | 00:39 | Finally, I'll discuss how you can stay
current with Typekit and suggest some
| | 00:43 | additional resources that can increase your
ability to control typography for your websites.
| | 00:47 | So if you're ready to get up and
running with Typekit, let's get started.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're Premium member of the
lynda.com Online Training Library or if you're
| | 00:05 | watching this tutorial on a disc, you
have access to the demonstration files that
| | 00:09 | I'll be using for this title.
| | 00:11 | Now Up and Running with Typekit is a
little different than most of my titles
| | 00:15 | in that there aren't
really any true exercises.
| | 00:18 | Now throughout the title I demonstrate using
Typekit through the use of a few sample files.
| | 00:23 | I've made these files available to you
in the Exercise_Files folder, with the CSS
| | 00:28 | and the main.CSS file starting
out exactly as you'll see in the title.
| | 00:32 | If you want to follow along with me,
feel free to start with this file and
| | 00:35 | simply mirror the changes
that I'll make to the CSS.
| | 00:38 | I've also included a version of the
finished files as well, in case you want to
| | 00:43 | explore the finished code.
| | 00:45 | If you do choose to follow along
with me, you'll need a few tools.
| | 00:48 | First, you'll need a code
editor to make changes to the CSS.
| | 00:52 | For this title, I'll be using
Dreamweaver, but the code editor that you
| | 00:55 | use doesn't matter.
| | 00:57 | Just use the one that
you're most comfortable with.
| | 00:58 | Second, you'll need an FTP client.
Once again I'll be using Dreamweaver's
| | 01:03 | built-in FTP features, but you really
should feel free to use any FTP client
| | 01:07 | you want; it does not matter.
| | 01:09 | Finally, you'll also need a hosted site.
| | 01:12 | Typekit works with a specific domain
that you provide, so unless you establish a
| | 01:17 | local server to test on, you won't be
able to test locally and you're going to
| | 01:21 | need to upload your files to your
host and test within the browser.
| | 01:25 | Now speaking of browsers, depending
upon your platform, I recommend making sure
| | 01:29 | that you have the latest versions of
Internet Explorer, Chrome, Firefox, Safari,
| | 01:34 | and Opera, and make a habit of testing
your pages within multiple browsers.
| | 01:39 | Web fonts are supported in all recent
versions, but you still want to make sure
| | 01:43 | that you're testing for
rendering differences and font support.
| | 01:46 | Now that that's taken care of,
let's get up and running with Typekit.
| | Collapse this transcript |
|
|
1. Getting StartedWhat are web fonts?| 00:01 | Since Typekit is a service that hosts
web fonts, it's probably best to start out
| | 00:05 | by discussing exactly what web fonts are.
| | 00:08 | Generally speaking, it's the term used
to describe fonts for web sites that aren't
| | 00:13 | installed on client machines,
| | 00:15 | meaning by using them, you don't have
to rely on the standard system fonts like
| | 00:19 | Arial, Georgia, or Times.
| | 00:22 | On the service, using web
fonts seems relatively simple.
| | 00:26 | Using CSS, you point to an external
font resource that the browser then
| | 00:30 | downloads and displays for your site.
| | 00:33 | While this sounds simple, there have been a
few issues that have slowed their adoption.
| | 00:37 | Most font vendor end user license
agreements contain clauses that prevent users
| | 00:41 | from distributing the
fonts without prior approval.
| | 00:44 | The simple mechanics of @fontface
would put most web designers in violation
| | 00:48 | of these agreements. And for the most
part, font foundries haven't been exactly
| | 00:52 | crazy about the idea of having
browsers and possibly end users download their
| | 00:57 | fonts without permission either.
| | 00:59 | Combining these concerns with the
increased overhead of downloading large fonts
| | 01:02 | and the specific needs of onscreen
font rendering and you can see that there's
| | 01:06 | a lot more to using web
fonts than at first glance.
| | 01:09 | Thankfully, over the past few years
there have been many developments that now
| | 01:12 | make web fonts a viable
choice for web designers.
| | 01:15 | Browser manufacturers have worked
hard to support web fonts, and new font
| | 01:19 | formats have been designed that both
reduce file size and make the fonts
| | 01:23 | themselves more secure.
| | 01:24 | In fact, most font foundries have been
at the forefront of the advancement of
| | 01:27 | web fonts and they've created new
licenses that's specifically addressed the needs
| | 01:31 | of web fonts as well, as refining
font outlines for onscreen usage.
| | 01:36 | The development of font-hosting
services like Typekit also makes it easier for
| | 01:40 | designers to use web fonts.
| | 01:41 | By using a hosted service, web
designers don't have to worry about syntax
| | 01:45 | changes, browser support
issues, or font licensing.
| | 01:49 | They also allow designers to pick
from a large library of fonts rather than
| | 01:53 | having to purchase all the fonts individually.
| | 01:55 | Perhaps the best thing that web
fonts offer designers is freedom.
| | 01:59 | With the maturation of web fonts, web
designers finally have the same freedom
| | 02:04 | when selecting type that print
designers have enjoyed for years.
| | Collapse this transcript |
| Who is Typekit for?| 00:00 | Typekit is perfect for web designers
who are looking to enhance their site's
| | 00:04 | typography through the use of web fonts.
| | 00:06 | As a font-hosting service, TypeKit
allows you to choose the fonts you want for
| | 00:10 | your site and then handles the
hosting of serving those fonts for you.
| | 00:14 | This makes Typekit ideal for designers
who want more control over their site's
| | 00:18 | typography but don't want the
additional hassle of keeping up with the evolving
| | 00:22 | syntax of web fonts or all of the
related browser-compatibility issues.
| | 00:28 | To integrate Typekit into your site, all
you need to do is add a couple of lines
| | 00:32 | of JavaScript into the head of your documents.
| | 00:35 | Typekit even generates this code for
you, which means that you don't have to
| | 00:38 | worry about writing a single line
of code in order to add Typekit's
| | 00:42 | functionality to your site.
| | 00:44 | Typekit is also a good choice for designers
who want a wide variety of fonts to choose from.
| | 00:49 | Typekit has a huge font library,
featuring dozens of respected foundries.
| | 00:54 | Rather than having to purchase the
fonts individually, you pay a flat
| | 00:57 | subscription fee to gain access to as
many fonts as you want. Yet in many ways
| | 01:02 | you could kind of compare Typekit to
many of the online music subscription
| | 01:05 | services: just as you don't own a
music with these services, you don't own the
| | 01:09 | fonts with Typekit, but based on your
subscription plan, you'll get to use as
| | 01:14 | many as you'd like.
| | 01:15 | It frees you from having to worry about
licensing issues and adds an extra layer of
| | 01:19 | security to the fonts that you're going to use.
| | 01:22 | It's also important to note that many
of the foundries that work with Typekit
| | 01:25 | have created or modified fonts
specifically for onscreen rendering.
| | 01:29 | This means that the overall quality
of fonts that you're going to find on
| | 01:32 | Typekit are generally higher than you'll
find while searching for fonts on your own.
| | 01:37 | Typekit was also a recently acquired
by Adobe. While this shouldn't change the
| | 01:41 | online service drastically, you'll find
increased integration of Typekit into
| | 01:45 | Adobe's authoring tools, and Typekit will be a
big part of Adobe's creative cloud offering.
| | 01:50 | This means that if you're currently
using Adobe's authoring tools, using Typekit
| | 01:54 | will become even easier.
| | 01:56 | Of course that doesn't mean
that Typekit is right for everyone.
| | 02:00 | Using Typekit means you're adding
another third-party resource to your
| | 02:03 | pages' requests and you're dependent
on Typekit servers to make sure that
| | 02:07 | your fonts display correctly.
| | 02:09 | You also can assume that using
Typekit frees you from having to know CSS.
| | 02:14 | In order to get Typekit's fonts to work
properly, you're still going to need to
| | 02:17 | understand basic CSS typography.
| | 02:20 | The good news is that Typekit features
several tiered pricing plans, including
| | 02:24 | a free option, so it's easy to try it
out for a month or two and see if it's
| | 02:27 | right for you.
| | Collapse this transcript |
| Typekit requirements| 00:00 | Typekit is an online service, so the
only thing you really need in order to use
| | 00:05 | it is the current version
of your favorite browser.
| | 00:08 | Typekit works well in Firefox, Chrome,
Opera, Safari, and Internet Explorer.
| | 00:14 | Although it is designed to work in older
versions of those browsers, I recommend
| | 00:19 | making sure that you're going to be
using the latest version in order to ensure
| | 00:22 | compatibility with some of
Typekit's font-browsing options.
| | 00:25 | You may also find the Typekit site
incompatible with several mobile browsers, but
| | 00:31 | a simple test in the browser and
platform of your choice will quickly reveal
| | 00:35 | whether the site will work in
that particular platform or not.
| | 00:38 | Of course you'll still need an HTML and
CSS authoring tool to really use Typekit.
| | 00:45 | Typekit is designed to work with an
existing site and is not a site-creation tool.
| | 00:51 | You'll still need a code editor to
write your site and, as we'll see later on,
| | 00:55 | modify your styles in order to
take advantage of targeted fonts.
| | 01:00 | You'll also need a hosted site to use Typekit.
| | 01:02 | Typekit's fonts cannot be downloaded
locally, so in order to use them, you'll
| | 01:08 | need to tell Typekit which domain you'll
be using for a particular set of fonts.
| | 01:12 | You can test locally if you have a
local server set up, but in the end you'll
| | 01:16 | deploy the fonts to your hosted site.
| | 01:19 | As far as browser and platform
compatibility for Typekit's hosted fonts goes,
| | 01:24 | Typekit offer support for Internet
Explorer 6 and higher, Firefox 3.5 and higher,
| | 01:30 | Safari 3.1 and higher, Chrome 4.02 and
higher, Opera 10.54 and above, iOS 4.2
| | 01:40 | and above, and Android 2.2 and higher,
| | 01:42 | although recent testing suggests support
issues with certain Android devices. If
| | 01:47 | you have questions about support for a
specific platform, be sure to check out
| | 01:51 | Typekit's browser and OS support page,
which you can see here, or contact their
| | 01:56 | customer support directly if you
don't see the platform you're looking for.
| | 02:00 | If you plan on using Typekit, I
recommend bookmarking this page.
| | 02:04 | It's status.typekit.com.
| | 02:07 | This is Typekit's status page and
it shows their current status of
| | 02:11 | Typekit's servers and marks any
maintenance or troubleshooting issues that
| | 02:15 | they're encountering.
| | 02:16 | Now this is a really good page to
watch in terms of determining the uptime of
| | 02:20 | your hosted fonts and is probably the
first page you should check in terms of
| | 02:24 | troubleshooting in case your
fonts are not appearing as expected.
| | Collapse this transcript |
| How Typekit works with a site| 00:00 | So we know that Typekit is a font-
hosting service and we know that we can use it
| | 00:04 | to serve fonts to our sites,
but how does it actually work?
| | 00:09 | Let's take a closer look at the
workflow that you'll use with Typekit and how
| | 00:12 | the service works behind the scenes.
| | 00:14 | First you create kits that contain the
fonts that you want to use for a specific site.
| | 00:19 | Typekit then generates a couple of lines
of JavaScript, which you will then embed
| | 00:23 | on any pages where you want to use those fonts.
| | 00:26 | At runtime the page sends a request to
the fonts to Typekit's servers, which then
| | 00:30 | returns the fonts to the browser to
display. This approach allows Typekit to add
| | 00:34 | layers of security to serving the font
and improve performance by controlling
| | 00:38 | how the font is served.
| | 00:40 | First the generated code is registered
to a specific domain, so if the request
| | 00:44 | for the fonts should come from another
domain, the fonts wouldn't be served.
| | 00:48 | Second, the fonts are subsetted, with only
the requested character sets being served.
| | 00:53 | This creates a smaller resource by
preventing the entire font from being
| | 00:57 | downloaded and also adds an
additional layer security.
| | 01:00 | It's also worth mentioning that the
fonts themselves aren't really served at all.
| | 01:04 | The character sets are encoded as
data URLs, which is another way of saying
| | 01:09 | they're converted to strings of text
and then served inline within the CSS.
| | 01:13 | If all that seems a little technical,
well that's the reason for Typekit. While
| | 01:18 | you can certainly host your own
properly licensed fonts without too much
| | 01:21 | trouble, Typekit eliminates a layer of
complexity from the process and gives you
| | 01:26 | access to a much wider library of fonts
than you could probably get on your own.
| | 01:29 | With that being said, you do need to
keep in mind that if you use Typekit,
| | 01:34 | you're relying on their servers for your
fonts. While their uptime is impressive,
| | 01:39 | no one's is 100%, so you should be
prepared for the occasional outage.
| | 01:43 | Also, if you're using Typekit for
client work, you need to factor in how a
| | 01:48 | Typekit account could affect pricing
and decide how you want to approach long-
| | 01:52 | term control and maintenance with your clients.
| | Collapse this transcript |
| Signing up for a Typekit account| 00:00 | To use Typekit, you'll first
need to sign up for an account.
| | 00:03 | They have a range of plans that you
can choose from based on your site
| | 00:06 | requirements and your budget, including
a free plan that allows you to try out
| | 00:10 | Typekit and use it as long as you'd like.
| | 00:13 | The free account is a little bit more
restrictive than the other plans; however,
| | 00:16 | if you just want to see how Typekit
would work for your site, or if you simply
| | 00:20 | need a couple of fonts for
your personal blog, it's perfect.
| | 00:22 | Let's take a look at the plan options
and then sign up for a Typekit account.
| | 00:27 | So if you browse to Typekit's homepage
at typekitc.com, you'll find this little
| | 00:32 | Register button in the upper right-hand corner.
| | 00:34 | I'm just going to go ahead and click on that.
| | 00:36 | Now that's going to take me to a page
that explains the range of plans that are
| | 00:40 | available to me on Typekit.
| | 00:41 | Now keep in mind that Typekit is
software as a service, so these plans and their
| | 00:46 | pricing is bound to change over time.
| | 00:49 | So what you see here is obviously not
necessarily what you're going to encounter
| | 00:53 | when you get Typekit.
| | 00:55 | Currently, the plans are broken down by
how many page views a month you're going
| | 00:59 | to need, what kind of library access
you need--whether it's a restricted amount
| | 01:03 | of fonts or the full library within Typekit--
| | 01:05 | how many websites you're going to be
using it with, and how many fonts you need
| | 01:09 | to use on your website.
| | 01:10 | Now if you get anything over this
performance model, which is about 1 million page
| | 01:14 | views a month, unlimited websites, if
you need something more than that, you'll
| | 01:17 | probably going to need to contact
Typekit directly and talk with their
| | 01:21 | enterprise folks; otherwise, as you can
see, it's very affordable, and there are a
| | 01:25 | lot of options, so you can really
choose the one that fits best for you.
| | 01:29 | Now if I go over to the free plan, I
can see that that limits me to 25,000 page
| | 01:33 | views a month, I get access to only the
trial library, which is not as large as
| | 01:38 | the full library own Typekit, I'm only
allowed to use it on one website, and I'm
| | 01:42 | only allowed to use two
fonts for that particular site.
| | 01:46 | So it's really a trial account; however,
again, if you just have a personal blog
| | 01:50 | and you're not getting tons of hits a
month, then this is absolutely perfect for
| | 01:55 | you. And what's really nice about
this compared to some of the other trial
| | 01:58 | programs out there is that this is
unlimited. It's not a 30-day trial, it's not a
| | 02:02 | 7-day trial; you can just keep using
it like this for as long as you want.
| | 02:06 | And of course if you need a little bit
more, if you need to serve fonts for multiple
| | 02:09 | web sites or if you want access to a
wider library, it's pretty easy to upgrade
| | 02:13 | to any of the other plans. And of
course if you look at one of these plans and
| | 02:16 | say, "Hey that's absolutely perfect for me,"
then you can go ahead and sign up for that as well.
| | 02:20 | Once you find the plan that you want,
you just click Sign up and it takes you
| | 02:24 | to a really, really small sign-up
process. I absolutely love how easy it is to
| | 02:29 | sign up for Typekit.
| | 02:30 | Notice that all I have to do is fill out my name,
my email, and then choose a password.
| | 02:37 | Agree to the terms of service and you're done.
| | 02:41 | Once you sign up, Typekit is going to give you
a little bit of information about the account:
| | 02:45 | where to get help for example, how to
test locally, the different types of
| | 02:49 | browser support that it offers. And
then right down towards the bottom of this
| | 02:52 | page, we have a little getting started
button, so as soon as you click that,
| | 02:55 | it's going to ask you a few
questions about how you want to use Typekit.
| | 02:59 | For example, the first thing that you
do is create a kit. Now we're going to
| | 03:03 | talk about kits a little bit later on,
but it's really two very simple questions.
| | 03:06 | It's like hey, which site do
you want to use this for--
| | 03:09 | so I'm going to use it for my Typekit
page--and the domain that you want to use
| | 03:14 | it for. So in this case I might type in
desolve.org, which is the hosted account
| | 03:19 | that I'm going to use for this.
| | 03:20 | I click continue and it gives me the
embed code that I need for that specific site.
| | 03:25 | Now I can copy this code and paste it
into the documents I want to use within my
| | 03:29 | site, but I have access to this at anytime,
so don't feel like you have to do this right now.
| | 03:34 | If I hit continue, it finishes up the
process, it tells me I'm all set, and now I
| | 03:38 | can go find some fonts, choose which
ones you want to use on your site, and
| | 03:41 | start having fun with it. And that is really
all that's required sign up for an account.
| | 03:46 | Now we signed up for the free
account, but other than entering in payment
| | 03:49 | information, signing up for or
upgrading to another plan is just as simple.
| | 03:54 | You can literally sign up for Typekit
and be using their fonts on your site
| | 03:58 | in about ten minutes.
| | 04:00 | Now that we have an account, we can
start exploring Typekit's interface, and
| | 04:04 | we're going to do that next.
| | Collapse this transcript |
| Exploring the interface| 00:00 | The Typekit site is designed around the
activities that you'll be doing the most:
| | 00:04 | choosing and managing fonts for your sites.
| | 00:07 | Let's take a brief tour of the
interface so you'll be familiar with where to
| | 00:10 | find things within Typekit.
| | 00:12 | So I went ahead and logged in to my
Typekit account and when you do that, the
| | 00:17 | very first thing that you're going to
see are the options for browsing fonts.
| | 00:21 | Right front and center is going to be
one of the tasks that you perform the
| | 00:25 | most often in Typekit, which is looking for
fonts that you're going to be using on your site.
| | 00:30 | Now they have a really small strip of
navigation here and inside that you're
| | 00:35 | going to find things like
browsing lists. I love the list feature.
| | 00:38 | What this does for you is the staff
at Typekit has put together all these
| | 00:42 | different lists of fonts for you to
choose from. You'll notice for example
| | 00:46 | alternatives to Helvetica,
alternatives to Georgia, their favorite fonts.
| | 00:51 | They've got different slab fonts,
condensed fonts, good for long-form text, and
| | 00:55 | they have several pages of these, so it's
really sort of a nice way to look and see
| | 00:59 | how the staff themselves have sort of grouped
these fonts together and picked their favorites.
| | 01:03 | Now if you're looking for a font from a
specific foundry, they have a list of all
| | 01:08 | the foundries who are
hosting fonts with Typekit.
| | 01:12 | You can check to see if your favorite
foundry is a part of Typekit and if they
| | 01:15 | are, what fonts are available
from that specific foundry.
| | 01:19 | They also have a gallery that shows
off some of the sites that are currently
| | 01:23 | using Typekit, so you can use this to
gain a little bit of inspiration and see
| | 01:27 | how other sites are using Typekit as well.
| | 01:30 | All the way over here on the end is the
Help section, and this is a section that
| | 01:34 | you want to become familiar with.
| | 01:35 | Here they have some help topics that
will take you to some frequently asked
| | 01:38 | questions and articles about
specific aspects of using Typekit.
| | 01:43 | You can of course type in a question
that will take you to one of those. And they
| | 01:46 | have some contact options here in
case you need to contact Typekit directly,
| | 01:50 | based on the help that you're looking for.
| | 01:53 | And of course they have a brief
introductory video to Typekit as well, to help
| | 01:56 | you kind of find your way around.
| | 01:58 | Now they do have a search feature over
here that allows you to search for fonts
| | 02:02 | directly, and later on when we talk about
browsing fonts we'll take a closer look at that.
| | 02:06 | I've taking you all the way through
their navigation. It's pretty small, right?
| | 02:10 | There's not a lot to the site in
terms of content, and that's a good thing
| | 02:12 | because it's really focused and it helps
you find exactly what you're looking for.
| | 02:16 | However, you may have noticed that all
these links that I talked about--and even
| | 02:19 | the ones that I didn't, like the About
page and the blog which we'll take a look
| | 02:22 | at a little bit later on--none of them
deal with managing fonts for your site,
| | 02:26 | not a single one of them.
| | 02:28 | To manage fonts for your site you use
the Kit Editor and if I come right up
| | 02:32 | here to my account and click Launch Kit Editor,
it's going to launch that in a separate window.
| | 02:37 | We're going to cover the Kit Editor
separately in its own movie, but essentially
| | 02:41 | the Kit Editor is where you
collect and manage all of your fonts.
| | 02:44 | You'll notice because we just started
this particular account, we don't have
| | 02:47 | any fonts in our kit, so it says, "Hey, go back
and add some before you start managing them."
| | 02:53 | What's really nice about the Kit Editor
is that it opens up in a separate window
| | 02:57 | so I can close this and open it anytime
that I want and I'm not really logging
| | 03:01 | out of Typekit to do this, so you
can open that up anytime you'd like.
| | 03:05 | Within the Kit Editor as well, that's
where you're going to find your embed code,
| | 03:08 | so if you ever need access to
JavaScript information, you can launch your Kit
| | 03:12 | Editor, click the embed
code link, and grab that code.
| | 03:16 | Now you can also manage your account
details right from the top bar here so if I
| | 03:20 | click on that, it's going to
take me to my account details.
| | 03:23 | You'll notice here very, very sparse
information. You can change your name, your
| | 03:27 | email, your password. You can change
plans if you're using a trial plan or if
| | 03:31 | you want to upgrade, you can go ahead
and do that as well. And if you're using
| | 03:34 | something other than the trial plan,
you'll have your billing details there as
| | 03:37 | well, so you can add or
swap out your credit cards.
| | 03:41 | As with any good interface, Typekit's
site is really simple and to the point. I
| | 03:46 | think they've done a really good job at
simplifying the site's information and
| | 03:49 | making it really easy to find
exactly what you're looking for.
| | Collapse this transcript |
|
|
2. Choosing FontsWhat is a kit?| 00:00 | Understanding what a kit is and how
it works is crucial to using Typekit.
| | 00:04 | So before we get too far into choosing fonts,
I want to take a moment to focus on kits.
| | 00:10 | You can think of a kit as basically a
collection of fonts that you want to use on your site.
| | 00:15 | Each site that you've added to your
Typekit account will be assigned its own
| | 00:19 | unique kit and then corresponding embedded code.
| | 00:23 | To use Typekit fonts on your site, you
simply add them to the appropriate kit.
| | 00:27 | The number of fonts you can add to your
kit and the number of kits that you can
| | 00:30 | have are all controlled by your current plan.
| | 00:33 | Now you can see here a kit that I've
actually added some stuff to it. I want to
| | 00:37 | take just a moment because in the
previous movies that you've been watching I'm
| | 00:41 | using a trial account that I set up earlier.
| | 00:44 | Well, I don't want you guys to think
I'm pulling the wool over your eyes. Now
| | 00:47 | what I'm using is my own personal
Typekit account, and I'm going to be using that
| | 00:51 | for the remainder of the title.
| | 00:53 | The reason for this is, using this
account, which is using the portfolio plan, will
| | 00:58 | allow you to see the entire type
library and that sort of thing.
| | 01:00 | So if you're still using a trial
account, there's nothing wrong with that.
| | 01:04 | All the fonts that I'm going to be using in
this title are available in the trial library.
| | 01:08 | So I'm not going to be doing anything
that you won't be able to do, other than
| | 01:11 | sort of taking a look at the entirety
of the type library as we browse through
| | 01:15 | our fonts a little bit later on.
| | 01:16 | I also kind of want to show you where
I'm going to be using these fonts so you can
| | 01:19 | see what it is that I'm going to be
building, and if you want to build it along
| | 01:23 | with me, that's fine.
| | 01:24 | So to do that, I'm going to switch over
to the finished version of the site that
| | 01:29 | I'm going to be sort of tinkering
around with these fonts, and you can find this
| | 01:32 | at desolve.org/typekit.
| | 01:37 | Now I'm a huge fan of the design of the
old sort of blues and jazz album covers,
| | 01:42 | specifically the Blue Note
series--those are fantastic.
| | 01:45 | So I wanted to see if I could use web
fonts to sort of mimic or sort of recall,
| | 01:50 | if you will, that particular type of design.
| | 01:52 | So I created this sort of Up and
Running with Typekit album cover, if you will.
| | 01:56 | And down below that I have some quotes
that discuss typography in general, and then
| | 02:01 | we have a little footer on the bottom
where I'm saying, thank you, thank you to
| | 02:03 | Typekit and Adobe for their help with
this title and of course lyda.com. And I've
| | 02:07 | got a little link there where you can
follow me on Twitter if you'd like--more on
| | 02:10 | that a little bit later on.
| | 02:12 | So this is the page that I'm going
to be using to demonstrate Typekit
| | 02:15 | throughout the title, and it's also the page that
I'm serving the fonts in the current kit to.
| | 02:20 | Let me bring your kit back. There we go.
| | 02:23 | It's helpful to remember that if you're
using an account that allows you to have
| | 02:26 | multiple sites, each site
is going to have its own kit.
| | 02:30 | This is going to help you organize your
font and helps Typekit serve the fonts
| | 02:34 | to the correct domains. And when you
sign up for Typekit, you're prompted to
| | 02:37 | build your first kit. After that, if
the plan allows it, you can add kits and
| | 02:42 | delete kits at anytime. And as we go
through the title, we'll be working more
| | 02:46 | with kits and actually changing a lot
of the options that you're seeing here
| | 02:50 | within the kit itself.
| | Collapse this transcript |
| Browsing fonts| 00:00 | If you've ever found the process of
searching for just the right font to be
| | 00:03 | time consuming and maybe even a little
tedious, you're going to love Typekit's
| | 00:07 | font-browsing features.
| | 00:09 | So when you first log in to Typekit
this is the screen you're going to see, and
| | 00:12 | this is the main font-browsing interface.
| | 00:14 | Now there are other ways to browse for
fonts within Typekit, so before we spend
| | 00:18 | too much time on this, I want to
take a moment to explore those.
| | 00:21 | Now if we go up to the main navigation,
you can see that right next to Browse
| | 00:24 | Fonts we have Browse Lists.
| | 00:26 | Now we took a look at this earlier,
but I want to return to this because I
| | 00:29 | absolutely love this feature in Typekit.
| | 00:31 | Now, these are lists that are compiled
by the staff, and if you're looking for
| | 00:34 | something very specific, these
lists are a great place to start.
| | 00:38 | For example, if you're looking for
alternatives to Helvetica, so fonts that are
| | 00:41 | similar to Helvetica but a little bit
different, then we have a list of those.
| | 00:46 | If I scroll down, you can see that we
have several pages of these, so if you're
| | 00:50 | looking for rounded fonts, condensed
fonts, light faces, big fat slab faces,
| | 00:56 | formal script fonts, things like
that, we have a nice list here.
| | 00:59 | Now don't think of these as
categories; it doesn't mean that what you're
| | 01:02 | looking is every single slab font
they've got in the library, these are lists
| | 01:06 | that are put together by staff, so it's sort of
like their favorite picks for a specific category.
| | 01:10 | So again, this is a really good place to
start if you're not too familiar with the
| | 01:13 | fonts that are available.
| | 01:15 | I also really like the
ability to search by foundries.
| | 01:18 | I have certain designers out there
that I absolutely love, and I like using
| | 01:21 | their fonts, so I can come here and see
exactly what Typekit offers in terms of their fonts.
| | 01:26 | For example, I love Chank and his fonts.
| | 01:29 | So if I go the Chank, I can see all the
listing of the Chank Diesel fonts that
| | 01:34 | we have available inside Typekit, and I
can take a closer look at those without
| | 01:38 | having to search to the library to
see if a specific font is available.
| | 01:41 | Now if you do know exactly which font
you're looking, for you can also search for that.
| | 01:46 | Now with some fonts you may know the name of
the font, but you might not know exactly
| | 01:49 | how to spell it and that's okay
because much like most search features these
| | 01:52 | days, there's auto-complete on this.
| | 01:54 | So if I just type in CH for example, I
get a full list of any fonts that start
| | 01:58 | with CH, and I can just go ahead and
choose Chaparral Pro and explore or
| | 02:02 | examine that particular font.
| | 02:04 | Now of course the majority of the
browsing that you're going to do in Typekit is
| | 02:07 | probably through the main
font-browsing interface,
| | 02:09 | so I'm going to go right back to that
for a moment. And the thing that I really
| | 02:12 | like about this
interface is that it's so visual.
| | 02:15 | You know when you're looking for fonts
if you're just searching for a list of
| | 02:18 | names of fonts, you have to sort of
imagine what those are going to look like or
| | 02:21 | click on them to see exactly what they are.
| | 02:23 | So here everything is very, very visual.
| | 02:25 | Now we can see sorting off, you have
this sort of default AG text for the fonts
| | 02:30 | and looking at the thumbnails of them,
but you can change that if you want.
| | 02:33 | For example, if I come up here to the
sample text, if I grab this pulldown
| | 02:36 | menu, I have a few
things that I can choose from.
| | 02:38 | I can choose the alphabet, I can go
down and choose any of these pentagrams
| | 02:43 | which contains all the characters in
the alphabet, or if I want, I can go ahead
| | 02:47 | and enter in my own text. And here I
could type in, say, for example "Up and Running."
| | 02:51 | Now you might wonder well, why would you
bother doing that when you can only see the
| | 02:54 | first two characters? Well you can
change the size of the fonts as well, so if I
| | 02:58 | come over here to this little slider,
notice that I can make that smaller so I
| | 03:02 | can see all of the text that I've type
in, or I can make it larger if I want to
| | 03:05 | see the details of the
individual characters and glyphs.
| | 03:08 | You have a lot of control over how
you're browsing through these fonts.
| | 03:11 | Now the default view is this thumbnail
view that we're looking at, but if you
| | 03:14 | want to have a list view as well, you
can do that. And in list view you can't see
| | 03:18 | as many fonts at a time, but you can see
the characters a little bit larger and
| | 03:22 | probably more of the characters.
| | 03:23 | So I'm going to go back to
thumbnail view for just a moment.
| | 03:26 | Now we're also allowed to sort all the
fonts that are returned that we're looking at.
| | 03:30 | Now we can do it by feature, which is
basically Typekit saying, "Hey we really
| | 03:33 | like this fonts," or I can go down to
the newest, the ones that have just been
| | 03:36 | added to the libraries.
| | 03:37 | So if you've been a member of Typekit
for a while and you kind of want to see
| | 03:40 | if anything has been added since last time you
showed up, newestis a good way to go.
| | 03:44 | You can also do it just by
list of alphabetical names.
| | 03:47 | Now this browsing feature is really
nice, but Typekit has a lot of fonts,
| | 03:51 | so trying to browse through all
of them can be a little difficult.
| | 03:54 | For example, right notice that I'm
showing 16 fonts at a time. Well I have
| | 03:58 | 712 fonts to look at.
| | 04:00 | So if I load more of these, it's going
to add 16 more, they're going to load up,
| | 04:05 | and I'm going to end up
scrolling through those guys as well.
| | 04:07 | So as you could imagine, that process
over the course of browsing through 712
| | 04:12 | fonts, or however many you're
looking at, can be a little bit tedious.
| | 04:16 | So in the next movie I'm going to show
you guys how you can filter your results
| | 04:19 | to make font browsing a
little easier and more meaningful.
| | Collapse this transcript |
| Filtering font results| 00:00 | Trying to look through Typekit's entire
font library at once is a massive task,
| | 00:05 | and as they're continually adding
new fonts all the time, it's not really
| | 00:09 | going to get any easier.
| | 00:10 | So, in this movie, I want to show you
how you can filter the list of fonts so
| | 00:14 | that you can browse a more targeted list.
| | 00:17 | So, I'm right where we left off in our
last movie, and I want to pay attention
| | 00:21 | in this one to the filtering
mechanisms over here on the right-hand side, so
| | 00:24 | this sort of brown sidebar if you will.
| | 00:27 | The first filtering mechanism I want
to show you guys is the classification.
| | 00:31 | So, if I know I need sans serif font
for example, I can click on that and it
| | 00:35 | will reduce the list over here on the left
hand side and only show me sans serif fonts.
| | 00:40 | Now unfortunately, you can't
browse from multiples at ones.
| | 00:43 | If you click on one of these, it's going
to refine that and just show those. So I
| | 00:46 | can't search for example for a Serif
and a Slab Serif at the same time; I have
| | 00:50 | to do individual searches for those.
| | 00:52 | Now below that, this allows me to
search for text that is well suited for
| | 00:56 | paragraphs or headings.
| | 00:57 | So, if I click for example on Slab Serif and
headings, it further refines the list for me.
| | 01:02 | If I click on paragraphs, it's
going to refine that as well.
| | 01:05 | Now, this is something that I went for
with both, because some fonts are designed
| | 01:09 | specifically with body copy in mind,
some are designed with headings in mind,
| | 01:12 | and some are designed to fulfill both functions.
| | 01:14 | Now, in some cases your
search might not return anything.
| | 01:18 | So, for example if I look for
something that's well suited for paragraphs and
| | 01:21 | headings, and I looked in the
decorative fonts for that, Typekit is going to tell
| | 01:24 | me, sorry, there are no files in the
library that match those criteria.
| | 01:27 | So, you're filtering is not
always going to return a result, right.
| | 01:30 | So, I want to go back and I'm going to
turn San Serif on, and I think I'm
| | 01:34 | just going to get rid of headings. I
only want to look for text that is well
| | 01:38 | suited for body copy in Sans Serif.
| | 01:40 | Now, below that I have some
additional filtering features.
| | 01:43 | For example I can look for weight.
| | 01:45 | So, if I wanted to find some san serif
text that has a really light weight, I
| | 01:49 | can filter through that. I can look for normal.
I can look for really heavy or bold weights.
| | 01:54 | And what's nice is I can search for
fonts that have multiple weights in them
| | 01:57 | by just doing this.
| | 01:58 | So, because I'm looking for both
lightweight fonts and heavy-weight fonts, I
| | 02:01 | know that all these fonts have
a mixture of weights in them.
| | 02:05 | I can also go by width.
| | 02:06 | So, I can look for condensed fonts. I
can look for extended fonts. And in certain
| | 02:11 | situations, for example because I have
the paragraph filter on, remember, it says,
| | 02:14 | sorry there are no fonts in library
that match those criteria, but when I turn
| | 02:17 | that off, then I get to see
some of the extended fonts,
| | 02:19 | and that's simply because extended fonts
really aren't recommended for paragraph reading.
| | 02:24 | So, I can continue to go through this.
I can look at the contrast of the actual
| | 02:27 | glyph characters themselves.
| | 02:28 | X-height is great because if you know
you have a specific fallback font--for
| | 02:32 | example, Verdana has a very high x-height to it.
| | 02:35 | So, if I was looking for a sans
serif font that's going to be similar to
| | 02:39 | Verdana, and have a high x-height,
I'll go ahead and filter through those
| | 02:42 | two choices as well.
| | 02:43 | I can look for standard or caps, or
upper- or lowercase, in terms of how
| | 02:47 | numbers are represented.
| | 02:49 | So, there are a lot of
features here that I can search for.
| | 02:51 | Now, I can also look by language
support, so they click on that, I can filter
| | 02:55 | and say okay, does it
include Russian language support?
| | 02:59 | And in doing that, I can further filter my list.
| | 03:01 | Now, I doubt that a lot of you guys
are going to need that, but what's really
| | 03:04 | cool about that is that it shows you
guys exactly the level of support that Typekit
| | 03:08 | offers, and it's really quite extensive.
| | 03:10 | If you're ever wondering about the
specifics of one of these categories,
| | 03:13 | there's a nice little tooltip right here that
you can click on and it's going to tell
| | 03:16 | you more about that specific feature.
| | 03:18 | So, if you need to dive a little deeper
into them, just go ahead and click on the
| | 03:21 | tooltip and it'll give you
a little bit more information.
| | 03:24 | So, be sure to take advantage
of Typekit's filtering options.
| | 03:27 | They allow you to do a little more
targeted search and can help you find exactly
| | 03:31 | what you're looking for.
| | Collapse this transcript |
| Creating favorites| 00:00 | When I'm browsing for fonts, I
invariably find two or three that I think might
| | 00:04 | get the job done, or sometimes I might
just find a cool font that I want to
| | 00:08 | remember for another project.
| | 00:10 | Now, remembering all those fonts and
then comparing them can be a little
| | 00:13 | challenging, so because of this, typekit
allows you to create favorites, which you
| | 00:18 | can then go back and explore
in detail at any time you wish.
| | 00:22 | So, again I've logged in to Typekit here.
I don't have any searching or filtering
| | 00:26 | going on right now, so
I'm looking at all the fonts.
| | 00:29 | So, I want to consider the fonts
that I need for that sort of album-cover
| | 00:32 | project that I'm working on.
| | 00:34 | The first one I want to look for would
be a sans serif font, so I'm going to go
| | 00:37 | ahead and filter by that
classification. And I also need something that has
| | 00:42 | condensed text and condensed heavy text,
| | 00:45 | so those are two things that I'm
really kind of looking for here.
| | 00:48 | So, as I look through the list here,
I see a couple of fonts that might
| | 00:51 | fit the bill for me,
| | 00:52 | so I sure want to bookmark these fonts,
or favorite them if you will, so that I
| | 00:55 | can sort of compare them side by side.
| | 00:57 | So, this FF Dax Compact, I'm going to go
in and I'm just going to click on this
| | 01:01 | little heart icon in the
upper right-hand corner.
| | 01:03 | So, that's going to add that to my favorites.
| | 01:05 | So, I like that one. I like the Meta
Web Pro; I want to take a look at that.
| | 01:08 | Let's see. The Numbus Sans Condensed
is really nice. I want to look at that.
| | 01:13 | And I want to look at the Poplar Standard.
| | 01:16 | I could more of these guys, but I
think for right now that's probably enough.
| | 01:20 | Now, I also have a serif that I want to
look at. The requirements I have for the
| | 01:24 | serif don't so much deal with
width, but to deal with contrast.
| | 01:27 | I need something that has a lot of
contrast within the actual glyphs themselves,
| | 01:31 | so I'm going to choose that. And weight-
wise, I do need a heavier weight, so I
| | 01:36 | need something that offers me some
variation in the weight here as well.
| | 01:40 | So, looking through these, this Abril
Display is really nice, so I'm going to
| | 01:44 | look at that. Acta Display is nice. That's
a good one, so I'm going to grab that one.
| | 01:48 | I'm going to scroll down, and maybe we'll
also take a look at this Kepler Std, okay.
| | 01:55 | So, I've gone ahead and indicated a
couple of favorites that I want to look at
| | 01:59 | for both of these fonts.
| | 02:00 | So, if I go over to My Favorites,
which is right at the top here,
| | 02:04 | I could now see a list of all
the fonts that I have favorited.
| | 02:06 | Now, you might say to
yourself, "Well, wait a minute.
| | 02:08 | I saw that you favorited all of those
serif fonts as well. Why am I just seeing
| | 02:12 | three fonts in here?"
| | 02:13 | Well, that's because the filtering
mechanisms that work when you're looking at the
| | 02:17 | entire library work in your favorites as well.
| | 02:19 | So, if I just want to look at the
sans serif fonts that I've added for
| | 02:22 | example, I can grab those.
| | 02:23 | Now, remember, all of my filtering
options work, so I got to go back down in here
| | 02:27 | and sort of turn off some of these.
| | 02:29 | And I can see all of those that I have added.
| | 02:31 | Now what I really like about this is
remember, I can change the view of this.
| | 02:35 | I can look at this in list view,
I can sort of minimize or maximize the
| | 02:40 | size of the text that I'm looking at,
and I can really compare the custom text
| | 02:43 | that I've added here in each one of these fonts.
| | 02:46 | So, it really allows me to compare
these fonts side by side and see which one
| | 02:50 | really fits the bill for what I'm looking for.
| | 02:53 | Now, remember I can go right back to my
Serif, and I can do the same thing with that.
| | 02:58 | So, before I go in and explore these
fonts in more detail individually, this
| | 03:02 | allows me to sort of winnow
the list down, if you will.
| | 03:04 | And if you see one that you know is just
not going to fit for what you need, you
| | 03:08 | can go right over here and you can
un-
favorite it as well, by just clicking on
| | 03:11 | the heart icon again, and it's no longer
in your favorites, and it won't show up
| | 03:15 | the next time you come into your favorites.
| | 03:16 | So, if I go back to my library and
then back to my favorites, you can see that
| | 03:22 | now that font is not showing up and I'm
only seeing the two that I had before.
| | 03:25 | So, be sure to take
advantage of the Favorites feature.
| | 03:28 | I love this feature, and I use it
both as a way of finding just the right
| | 03:31 | font, to help me compare them, and as a
way of bookmarking a really cool font
| | 03:35 | that might be right for a future
project. So if you're looking through your
| | 03:38 | fonts, if you see a font that isn't
right for what you're doing right now, but
| | 03:41 | you just love that font, trying to
find it a little bit later on might be a
| | 03:44 | little more difficult than you think.
| | 03:45 | So just go ahead and favored it and
it will be available to you the next time
| | 03:48 | you go in and check out your favorites.
| | Collapse this transcript |
| Examining a font| 00:00 | Comparing fonts side by side is great,
but for many projects you'll want to take
| | 00:04 | a closer look at individual fonts
and examine them in more detail.
| | 00:08 | Let's take a look at your options
when examining fonts in Typekit.
| | 00:11 | So, here I'm looking at my favorites right
now, and I've got two fonts in my favorites.
| | 00:15 | It doesn't really matter whether
you're looking at the entire library or at
| | 00:18 | individual thumbnails;
| | 00:19 | anytime you want to examine the
font, all you have to do is click on
| | 00:22 | that specific font.
| | 00:23 | So, if I go to Abril Display for
example and click in this, it's going to take
| | 00:26 | me to a more detailed
look at this individual font.
| | 00:30 | Now, in some cases, you're going to
have a little bit of information about the
| | 00:33 | fonts right on top. You can actually link
out and read more about that specific font.
| | 00:38 | It usually takes you to the
Foundries page. But not every font has that.
| | 00:43 | If I go back and take a look for
example at Acta Display, you can see I don't
| | 00:47 | really have any additional text up there.
However, on the right hand side on the
| | 00:50 | sidebar, you'll always going to
find some information about this font.
| | 00:54 | They'll have a brief
write-
up about the foundary itself.
| | 00:56 | They'll have the classification of
the font, what it's recommended for, and
| | 01:00 | then they'll give you some
properties of the font itself, whether it's
| | 01:04 | lightweight or heavyweight, uppercase
numbers. In a lot of cases you're going
| | 01:07 | to see multiple things.
| | 01:08 | For example here, you can see both
lightweight and regular weight, and that's
| | 01:11 | because of all the families
available in this particular font.
| | 01:15 | It's also going to show you what type
of language support the font has as well.
| | 01:18 | So, that's extremely useful if you
have multiple translations or multiple
| | 01:22 | language versions of a
site that you're working on.
| | 01:25 | Now, over here on the left-hand side,
you probably noticed as I was scrolling
| | 01:27 | through here, we can see all of the
different weights available to us for
| | 01:31 | this particular font.
| | 01:32 | Now, some fonts are going to have more.
with some fonts you may only have one
| | 01:36 | weight; other fonts
you're going to have multiples.
| | 01:38 | One of the reasons why I chose
Acta Display is because it has so many
| | 01:41 | variations within the family, so it's
very versatile font. You can use it for a
| | 01:44 | lot of different things.
| | 01:46 | So, once you take a look at the weights
and styles here, which sort of give you a
| | 01:49 | nice overview of everything that's
available to you within the font,
| | 01:52 | you can dig a little deeper. If I
click on the Specimens tab right here,
| | 01:55 |
I get a nice specimen which shows me
what the text looks like at different point
| | 01:59 | sizes, and set within copy, and at
different contrasts, which is very, very nice.
| | 02:04 | I can change that at any time. I can
come back and say, "Okay, I want to take
| | 02:07 | a look at the black because I'm really
interested in doing headlines with this,"
| | 02:10 | and I can sort of see how that looks.
| | 02:11 | Obviously it doesn't look great for
body copy, but not really designed to.
| | 02:15 | Now, if you're interested, you can also
take a look at a much nicer specimen. So
| | 02:19 | let me go ahead and choose, say, the book
version of this and I can open up what's
| | 02:23 | known as an expanded web font specimen.
| | 02:26 | Now, I really love these because you
get a nice set of sample characters over
| | 02:29 | here where you can see more than just
uppercase and lowercase. You get to see
| | 02:32 | some of the numbers and
some of the punctuation as well.
| | 02:35 | You get to see the copy set in
different sizes with different line heights. And
| | 02:39 | one of my favorite features of
this is the body size comparison.
| | 02:42 | So, you can compare this font with
something like Times or Georgia or Arial,
| | 02:47 | so you can see how the weight and the
height of the font is going to look if it
| | 02:50 | fall back to one of your fallback
fonts. It can even help you choose a
| | 02:53 | fallback font, because you can
look at this and you could say, "Okay,
| | 02:56 | Georgia is probably a little bit
closer to what I have in terms of size and
| | 02:59 | time, so that's going to be my initial
fallback font, which is really nice.' Below
| | 03:02 | that we have some contrast tests so
you could see how the font looks like at
| | 03:06 | different contrast settings. And then
we just get some text set at different
| | 03:09 | sizes in both lowercase and uppercase, so
you can sort of see how that looks as well.
| | 03:13 | So, I really like these specimens and
if you want a little bit more information
| | 03:16 | about the font, dig a little deeper
into it, I recommend checking those out.
| | 03:20 | Now, if I go back into looking at
the font itself, we also have the Type
| | 03:25 | Tester, and what's nice about this is
you can check for specific weights and
| | 03:29 | type in your custom text.
| | 03:31 | So, I can highlight this and once again
I can say Up and Running, and I can choose
| | 03:37 | to look at that in black if I want, and I
can raise or lower the size of that text
| | 03:43 | and really get a good feel for how
it's going to look. Perhaps my favorite
| | 03:47 | feature of the font detail section is
the Browser Samples. And if I click on
| | 03:51 | that, what's really great about this is
it's going to show you some screen caps
| | 03:54 | of how this font looks on
various browsers and various platforms.
| | 03:58 | This can take a lot of the
guesswork out of choosing a font.
| | 04:00 | So, notice that we start off with the
Mac OS operating system, and I can look at
| | 04:05 | what it's going to look like in
Firefox 3.6 and above, within Safari, within
| | 04:09 | Chrome, and I get a nice screenshot of that.
| | 04:11 | I can switch over windows, and I could
say, "Hey, what does that look like on
| | 04:14 | Windows XP, and Firefox 3.6?" and I can
see how the font is going to render at that.
| | 04:20 | Some things with Windows Vista, Windows 7,
so I can go in and check out how it
| | 04:24 | would render with any specific
browser on a specific platform.
| | 04:27 | Now, the screen caps that you get show
the font being set at different sizes. It
| | 04:31 | also shows you different weights.
| | 04:33 | So, if you are really interested, for
example, in the blacks, see how the black is
| | 04:36 | going to look, it will go ahead and
load those screenshots up for you as well.
| | 04:39 | Just remember, reset the screenshot so
that you're looking at the appropriate one.
| | 04:43 | So, to me the best thing about this
particular view is that if I'm on a Mac,
| | 04:46 | for example, I may not be able to test
on a Windows machine, so doing this at
| | 04:51 | least have some idea of what that text is going
to look like when it renders on that platform.
| | 04:55 | So, being able to examine the font in
this much detail is extremely helpful in
| | 05:00 | making sure that you've chosen the right
font for your site or for your project.
| | Collapse this transcript |
| Adding fonts to kits| 00:00 | Once you've decided on the fonts you want
to use, you'll need to add them to your kit.
| | 00:04 | Typekit gives you the option of adding
fonts at any point while you're browsing.
| | 00:08 | So, I've returned to sort of the
default browsing view within Typekit.
| | 00:12 | And you may have notice that if you
mouse over a font, you're going to get the
| | 00:15 | option right here of adding it to a kit.
So as soon as you click on that, it's
| | 00:18 | going to add it to the kit and it's also
going to launch the Kit Editor for you.
| | 00:22 | So, if you're adding a lot of fonts
at once, you're going to have to keep
| | 00:25 | dealing with this window.
| | 00:26 | So, what I'm going to do is I'm just
going to minimize this, and I know that this
| | 00:28 | is going to pop back up each time I add a font.
| | 00:31 | Now, really this option is available
to you no matter where you are within
| | 00:35 | the browsing process.
| | 00:36 | If I'm looking at the fonts in list
view for example, I can hover over it and
| | 00:39 | there is the option to add it to a kit.
| | 00:41 | Now of course if it's already in
the kit, you'll see this little
| | 00:43 | check mark beside it.
| | 00:45 | If I'm looking at it in lists for
example, so if I go through and Browse Lists, I
| | 00:49 | look for alternatives to Helvetica, you
can see that I've got the option right
| | 00:53 | over here of adding that to the kit as well.
| | 00:56 | So again, it's going to come up, bring up my
Kit Editor, and show me that it's added it
| | 01:00 | to that one as well.
| | 01:01 | Now, you may have noticed if you're
using a trial account that if you try to
| | 01:05 | click on more than two fonts and add
them to your kit, Typekit's going to
| | 01:10 | give you a little error message, because the
trial package only allows for two fonts at a time.
| | 01:15 | So, if I go back, back to my Browse
Fonts and I'm going to go back here to
| | 01:19 | my Favorites, and I can see in my
favorites again I have the ability within
| | 01:23 | the favorites--let's say Acta Display here,
I want to add that one to my kit as well.
| | 01:28 | So, at this point I've got some fonts
in my kit that they don't really need
| | 01:32 | and in some cases during the trial account
it's not going to let you add any more to that.
| | 01:36 | So, at any point if you've got some
fonts within your kit you don't need, you
| | 01:41 | can just go right over here and delete
them by clicking on the Delete this font.
| | 01:44 | It's going to prompt you and say,
"Hey, are you absolutely sure about that?"
| | 01:47 | And you can just go ahead and click okay.
| | 01:49 | Now, before I do that, I want to cancel this
and just talk about this for just a moment.
| | 01:52 | It's actually a good idea to delete any fonts
within your kit that you're not going to use.
| | 01:57 | Sometimes you're sort of tempted to
just click and say, yeah add that one, add
| | 01:59 | that one, add that one, I like that one,
and then you get your kit together and you
| | 02:03 | start using your fonts,
| | 02:04 | and you may find that you end
up not using a specific font.
| | 02:07 | Well, if you're not using that font, get
rid of it, because it contributes to the
| | 02:11 | overall size of the kit.
| | 02:13 | You'll notice for example in lower-left
hand corner right here, I have the size
| | 02:16 | of the kit, it's 236K, so if I'm not
going to use Freight Sans Pro and I get rid
| | 02:21 | of that, you can see it
shrinks the kit size down to 146K.
| | 02:25 | So, if you're not going to use a font,
just make sure to remove it from your kit
| | 02:29 | so that it doesn't add to
the overall weight of it.
| | 02:31 | Now, just adding a font to a kit doesn't
mean that it's ready to go ahead and use.
| | 02:36 | To deploy the font on your site, first
you'll need to publish your kit, and that's
| | 02:40 | something we're going to
talk about in our next chapter.
| | Collapse this transcript |
|
|
3. Deploying FontsUsing the Kit Editor| 00:00 | In this chapter we'll focus on using
Typekit to deploy fonts to your site.
| | 00:04 | Since most of your font-management
tasks will be performed in the Kit
| | 00:07 | Editor, were going to start by
taking a brief tour of it so we'll know
| | 00:10 | where to find things.
| | 00:12 | Once you've added a few fonts to your
Kit Editor, this is what it's going to
| | 00:15 | look like. And you can see--I'm going
to scroll down through it--I have about
| | 00:18 | three fonts in my kit right now.
| | 00:20 | Keep in mind that if you're using the
free trial account, you can only have two
| | 00:23 | fonts in your kit. I'm using one of
the portfolio accounts, so I can have a
| | 00:26 | little bit more than that.
| | 00:28 | On the left-hand side we have a sidebar here
that has all the settings for a particular font.
| | 00:33 | Now, we're going to go through each of
these in a little bit more detail later
| | 00:36 | on this chapter, so I just want to
give you a brief introduction to them. So,
| | 00:40 | we'll start at the top. We have some
selectors up here. Here's where we can enter in
| | 00:43 | custom selectors to apply this
particular font. We have what type of language
| | 00:48 | support you need, which characters that
you want to have, the weights and styles
| | 00:51 | you want for this particular font, and
then at the very bottom of this, you can't
| | 00:55 | really see it unless you click on it,
but there's a CSS stack down here that
| | 00:58 | allows you to define fallback fonts.
And we're going to take a much closer look
| | 01:01 | at that in just a little bit.
| | 01:04 | You'll notice that one of the fonts in
your kit is highlighted--typically, it's
| | 01:08 | the first font you have.
| | 01:10 | And each time you click on a font, it
will highlight the font itself and it will
| | 01:14 | point over to the sidebars.
| | 01:15 | So, when you're choosing those settings
you need to make sure that the font that
| | 01:20 | you're wanting to target is highlighted
so that you're applying those settings
| | 01:24 | to that particular font.
| | 01:26 | Typekit does a nice job of sort of
helping us out. They have this "Welcome!
| | 01:30 | Here's how to use fonts."
| | 01:32 | This message does take up a little bit
of room, so if you have a lot of fonts
| | 01:36 | in your kit and you're tired of
scrolling, you can get of that message by just
| | 01:39 | clicking the little circle with the x
in it right there and it gives you a much cleaner
| | 01:43 | look at your fonts.
| | 01:45 | In the upper right-hand corner we have
a couple of links up here. The first one
| | 01:48 | you've seen before. This is the embed
code and this gives us the JavaScript that
| | 01:52 | we need to enable Typekit on our site.
| | 01:55 | And we'll be working with this shortly.
| | 01:57 | The next link is Kit Settings, and I want
to take some time to explain these, so I
| | 02:02 | am going to click on this to open this up.
And the first setting that we can set is
| | 02:07 | the name of this particular kit. If
you have an account that allows multiple
| | 02:10 | kits, you can grab whichever kit
you want to use from a pulldown menu.
| | 02:12 | So the name really only has to reflect
to the site that you're using it on or
| | 02:17 | the project that you're
working with, that sort of thing.
| | 02:19 | The next thing is which domains this
kit applies to, and you can, depending upon
| | 02:24 | your account, have multiple domains here.
| | 02:26 | For those of you that want to test
locally, if you have a local server set up,
| | 02:30 | you could also come in here and type
in localhost and it will then publish
| | 02:36 | this kit to your local server so that
you can test locally. Since you can't
| | 02:40 | download the Typekit fonts, that
can be actually very, very helpful.
| | 02:43 | All right. I'm going to go ahead and delete that because
I don't have a local server set up.
| | 02:46 | The next thing I want to talk
about is the Colophon Settings.
| | 02:50 | What's nice about this is if you
choose to do this, it will place a little
| | 02:54 | badge on your site.
| | 02:56 | Now, yes, this is promotional for Typekit;
it lets people know that you're using it.
| | 02:59 | But it also does a really nice thing:
it lets people see which fonts you're
| | 03:03 | using on your site and gives them a
little bit of information about this.
| | 03:06 | Now, in the free trial account this
isn't optional. This is going to happen
| | 03:09 | on your site. But any account past that, it's
optional and you can enable or disable it.
| | 03:15 |
You can give the name of
the site and the link to it.
| | 03:18 | You know, it's better for me
to actually show you this.
| | 03:20 | I'm going to take you out to the
desolve.org site where I'm using Typekit.
| | 03:25 | And you can see in the lower right-hand corner
right there is my colophon badge, and
| | 03:28 | if I click on that, it says
"
Typefaces used on desolve.org."
| | 03:33 | So, if I want to change that, I can
change that in the name field that you saw,
| | 03:36 | and when I click on that, it takes
me directly to the desolve site.
| | 03:40 | Now, if I wanted it to go directly to
the page that you were looking at, I can
| | 03:44 | modify that link to make sure that
it was redirecting to the proper page.
| | 03:48 | You also notice that it tells your
visitors exactly which fonts you're using, a
| | 03:52 | little bit about Typekit,
information about the font itself,
| | 03:55 | so, if somebody is curious about
which
fonts you're using on the site, this badge
| | 03:59 | is kind of a neat thing to have.
| | 04:01 | Now, unless you're running the free
trial account, this is optional, so you can
| | 04:04 | turn that on or off at your leisure.
| | 04:07 | Also, here you're going to see your mobile
settings, and by default these are all enabled.
| | 04:11 | So, if you want support for mobile
platforms for your Typekit fonts, you don't
| | 04:15 | have to do anything; they
are enabled automatically.
| | 04:17 | If you want to turn some of these off, you can.
| | 04:19 | Now I do want to say that the iPad,
iPhone, and Android support, these are all--I
| | 04:25 | don't want to say experimental
because on the IOS the Typekit works pretty
| | 04:29 | well, but on android there have been
some issues here and there with rendering and
| | 04:33 | that's largely due to a lot
of the Android fragmentation.
| | 04:36 | I do know that the staff at Typekit
are working very, very hard to make sure
| | 04:41 | that Typekit works across multiple platforms.
| | 04:44 | Just to understand that if you
turning these on it's not a guarantee that it's
| | 04:47 | going to render on your mobile
platform, but it's adding support for it.
| | 04:51 | You may want to test those very
thoroughly before you commit to using Typekit on
| | 04:55 | a specific mobile platform.
| | 04:57 | Once you've made any changes here, you can
choose to save them or you can cancel those out.
| | 05:01 | Now, one last thing I want to show you
about the Kit Editor before we move on.
| | 05:04 | You notice in the lower left-hand
corner of this I have the total size of my
| | 05:09 | kit, and that's the one thing that
you want to be very cognizant about.
| | 05:12 | If you've added some fonts just
because you thought they were kind of
| | 05:15 | interesting and you wanted to try them
out, and you decided not to use them--
| | 05:19 | for example on my site, I'm using
Nimbus Sans condensed and Acta Display, but
| | 05:23 | I'm not using Nimbus Sans.
| | 05:25 | I turned it on because I thought
there might be some times when I wanted
| | 05:28 | the condensed version and the
noncondensed version, but it turns out I
| | 05:30 | didn't really use it.
| | 05:32 | If I leave it in there, Typekit is still
going to publish that out as part of my
| | 05:36 | kit, and it adds to the overall size of the
resource that's being requested by the page.
| | 05:40 | So, what I'm going to do is I'm
going to delete that font. It's going to
| | 05:43 | say,"Hey, are you actually sure about
that?" And then you'll notice that the
| | 05:47 | size of the kit goes down.
| | 05:48 | So, now it's only 189K.
| | 05:50 | And all of the changes that I make
over here on the left-hand side, as we're
| | 05:53 | going to see a little bit later on as we
work with those, those will also affect
| | 05:57 | the size of the kit.
| | 05:58 | So, what's really nice about this is
that within the Kit Editor you get sort of
| | 06:02 | this running total down there in the
lower left-hand corner that gives you some
| | 06:05 | feedback as to exactly how
large of a resource you're creating.
| | 06:09 | And then of course once you've made
changes to your kit, they don't actually go
| | 06:14 | out online until you publish them.
| | 06:15 | We're going to test this out a little
bit later on in an exercise, but if
| | 06:19 | I click publish and type, it will say,
"Hey, I'm updating your kit." And
| | 06:22 | sometimes there's a little bit of a
lag between the actual publishing of the
| | 06:25 | kit and the distribution of it.
| | 06:27 | So, don't expect to be able to flip
back to your page and refresh your page
| | 06:31 | and have the changes reflected instantly.
| | 06:33 | Sometimes it takes a little
bit of time for that to occur.
| | 06:36 | So, now that we know our way around
the Kit Editor, we're going to focus on
| | 06:39 | using it to manage fonts in the next movie.
| | Collapse this transcript |
| Managing fonts in kits| 00:00 | In our last movie we focused on finding
our way around the Kit Editor, as well as
| | 00:04 | tackling some basic account management.
| | 00:07 | However, since you'll primarily use
the Kit Editor to manage the fonts that
| | 00:11 | Typekit serves to your sites, I want to
take a little closer look at managing
| | 00:15 | fonts and kits in this movie.
| | 00:17 | So, here I have my kit opened again,
and you see again I've got three fonts
| | 00:21 | loaded into the kit, two of which I'm
going to be using on my site and one of
| | 00:26 | which I don't really need.
| | 00:27 | Once again, if I want to manage a font, I
first have to click on that font to highlight it.
| | 00:32 | So whichever one you see that has the
highlight, that's the font that you're
| | 00:35 | actively focused on and managing at that time.
| | 00:38 | Once you've focused on a font, you can
do things like defining custom selectors
| | 00:42 | for that, changing the language
support that you need, adding weights and
| | 00:46 | styles or taking the weights and
styles off, or even defining the font stack
| | 00:50 | for this, and the font stack would be
the fallback fonts that the browser will
| | 00:54 | use in case this font isn't
served correctly or isn't available.
| | 00:57 | We're going to take a closer look at
all these options over here on the left-
| | 01:01 | hand side in just a moment.
| | 01:03 | What I want to talk about right now is
sort of managing these fonts within the
| | 01:06 | Kit Editor and what happens to your site if
you start adding and deleting fonts to your kit.
| | 01:12 | Nimbus Sans, I don't need.
| | 01:13 | I'm using the other two, but I'm not
using Nimbus Sans, so of course that's
| | 01:16 | adding to my overhead.
| | 01:18 | You can see right down here, the kit size.
I'm at 210K. So if I'm not using a font,
| | 01:22 | there's really no reason for me to
keep it around in the kit. It's just adding size
| | 01:26 | to the resource that's
being requested by my site.
| | 01:28 | So, I'm going to go ahead and delete it, and
when I do that of course I get a prompt
| | 01:32 | from Typekit. They're saying, "Are you
sure?" Now, one of the reasons why they
| | 01:37 | prompt you so much within Typekit when
you start managing your fonts is Typekit
| | 01:40 | doesn't have an Undo.
| | 01:42 | There is no Command+Z or Ctrl+Z that's
going to help you. Once I say OK,
| | 01:46 | that font is gone from my kit.
| | 01:48 | Now, what does that mean to my site right now?
| | 01:50 | Well, absolutely nothing,
because I wasn't using that font.
| | 01:53 | What happens if I do this to a
font that I'm actually using?
| | 01:56 | Well, if I go up to Acta Display for
example and I go ahead and delete that
| | 02:01 | font, and once again I click OK,
| | 02:04 | if I hit Command+Z, or Ctrl+Z if I was on a
PC, nothing happens. Again there is no Undo.
| | 02:10 | However, right now, I haven't made any
type of change to my kit actually, because
| | 02:15 | unless you publish your kit,
you haven't made a change at all.
| | 02:19 | So, if I go back to my site and I
refresh my page, you can see, nothing changes
| | 02:26 | in terms of the fonts that are being
served or the weights that are being
| | 02:28 | served; nothing changes at all.
| | 02:30 | On the other hand, if I go back to my
kit and I publish that kit, you can see
| | 02:36 | I'm getting the message now that
Typekit is going ahead and updating my kit.
| | 02:39 | It's distributing it out to their
content delivery network and is publishing it.
| | 02:44 | Now in some instances, it takes a
little while for the changes that you make
| | 02:48 | when you publish them to be
broadcast across their entire network,
| | 02:51 | so a lag time of 10, 15,
sometime even 30 minutes isn't uncommon.
| | 02:57 | So, I'm going to go back to my
site and I'm going to refresh my page.
| | 03:00 | You can see that now I'm getting my
fallback font. I'm not getting the Acta
| | 03:04 | Display font that I had previously in my kit.
| | 03:07 | So, unless you hit that publishing
button, no change is made, but once you hit
| | 03:11 | the publishing button you've
committed to it and the change is going to be
| | 03:13 | broadcast across the network.
| | 03:15 | I'm going to go back into Typekit
really quickly, and I want to find that Acta
| | 03:20 | Display font again and add it back.
| | 03:22 | Now, I know it's in my favorites, but
one of the quickest and easiest ways
| | 03:25 | to find a font is just to come right over
here to the search menu and find it that way.
| | 03:29 | So, I'm going to find my font. I'm
going to add it back to my kit. Now once I
| | 03:33 | add it to the kit, the fonts are
listed in the order that they've been added.
| | 03:36 | So they're not really listed in
alphabetical order, and you can't drag them around.
| | 03:41 | So, they are going to be listed in the
order that you've added them to the kit.
| | 03:45 | So, if you want to customize that order,
just be careful about how you add them.
| | 03:49 | Once I add it back, I need to be
very careful about publishing it again.
| | 03:53 | I want to make sure that all of the proper
weights and styles have been turned on as well.
| | 03:58 | Now we're going to focus on this in a
separate movie, but I'm just going to go
| | 04:02 | back in here and click those two again,
Black and Black Italic, just so I have them.
| | 04:06 | And remember, the change is not going
to take effect until I hit publish.
| | 04:09 | So, I'm going to go and hit publish
again, it's going to update it one more
| | 04:12 | time, and now I'm free to go back in my
browser, I'm going to find my page, and
| | 04:17 | I'm going to refresh that again.
| | 04:20 | And after I've given the network a
little bit of time to publish the font out
| | 04:24 | again, you can see that now Acta
Display is being served once again to my page.
| | 04:29 | Remember, there is no undo in the Kit
Editor, so if you mess up or delete a font
| | 04:34 | that you didn't mean to delete, you're
going to need to go through all the steps
| | 04:37 | again to get your fonts right
back to where you had them before.
| | 04:40 | Now, I actually recommend writing down
your font list and then the settings for
| | 04:45 | each of the individual fonts as well.
| | 04:47 | You'd be surprised at how easy it is to
forget exactly what you selected, which
| | 04:50 | makes it a little bit harder to restore
them if you need to go back and change
| | 04:54 | some things within the Kit Editor.
| | Collapse this transcript |
| Enabling Typekit on a site| 00:00 | Using Typekit is extremely easy, but
there is more to it than just choosing some
| | 00:05 | fonts and then publishing your kit.
| | 00:07 | In this movie, I want to show you what
you'll need to do to your site in order
| | 00:11 | to enable Typekit on it.
| | 00:13 | Here I have our demonstration
file, the index.htm file, opened up.
| | 00:17 | Currently in the head of the document, you can
see there is no script tags calling out to
| | 00:20 | the Typekit service.
| | 00:21 | And I scroll down to the bottom of
the page, there is no script to tags
| | 00:25 | down there as well.
| | 00:26 | So, there's really no calls on the page
right now to the Typekit service at all.
| | 00:30 | There's no way for this
page to link out to Typekit.
| | 00:34 | So, I'm going to go ahead and publish
this file. Right after publishing it, I'm
| | 00:38 | going to go back out to my browser.
And I'm just going to go ahead and update
| | 00:42 | the existing file that
did have a tie to Typekit.
| | 00:45 | And you can see that the link is now broken.
There's--Typekit is not enabled on the
| | 00:49 | site, and I'm looking at the fallback
fonts rather than the fonts that I'm
| | 00:52 | requesting from Typekit.
| | 00:54 | So, how do we go about actually
enabling Typekit on our pages?
| | 00:59 | If I go over to Typekit and I launch my
Kit Editor, we've already published the
| | 01:04 | kit, so that's step number one. You
have to publish your kit in order for that
| | 01:08 | kit to be available out on
the content delivery network.
| | 01:11 | So, the first time you use Typekit
you're going to choose your fonts, you're
| | 01:15 | going to choose weights and styles
and everything that you need, and then
| | 01:17 | you're going to publish that kit out.
| | 01:19 | Now, this kit has already been
published, but the next thing that I needed to
| | 01:22 | grab is the embed code for my site.
| | 01:25 | So, if I go up to the Kit Editor and I
click on the embed code, it's going to
| | 01:29 | give me two lines of script tags that
are calls out to the Typekit service.
| | 01:34 | So, I can go ahead and select
all of this and then copy that.
| | 01:39 | If you're using a secure site, so
an SSL--maybe it's an ecommerce site or
| | 01:44 | something like that--
| | 01:45 | you want to make sure that you click this
check box to serve it with an SSL for secure sites.
| | 01:49 | So, if you're not using a secure connection
over https, then you don't need to do that.
| | 01:55 | Copy that code, close this out, and
I'll go back into my code editor.
| | 01:59 | Okay, so back in my code editor, I'm
going to go ahead in the head of the document
| | 02:04 | and I'm just going to add those script tags in.
| | 02:07 | You can add them in whenever you want,
but Typekit recommends that you add them
| | 02:12 | in the head of the document and add
them pretty high up, because essentially
| | 02:15 | what's happening here is the first
script tag call is making a call out to the
| | 02:20 | content delivery network of Typekit.
| | 02:22 | It's basically saying, "Hey, I want
to use Typekit on this particular site.
| | 02:25 | Will you serve me those fonts?"
| | 02:27 | And then the second one
handles the loading of those fonts.
| | 02:30 | So, essentially those two script tags
are going to handle any of the callout to
| | 02:35 | Typekit and unloading of the fonts.
| | 02:37 | Now, the reason that we need them in
the head of the document is because we
| | 02:41 | want to prevent that sort of what
they call the flash of unstyled text.
| | 02:44 | Essentially, what happens is a lot of
people like to put their script tags or
| | 02:48 | their calls lower in the page so
that the content loads first and then the
| | 02:52 | scripts are executed.
| | 02:53 | But with Typekit we want to change
that order. We want the scripts to
| | 02:56 | execute first. Now that may cause a
little bit of delay in loading the page, but
| | 03:00 | what happens is people don't see
unstyled text which then flashes and loads up
| | 03:05 | with the styled fonts.
| | 03:06 | So, I'm going to save this. Once again, I'm going
to go ahead and publish that out to the server.
| | 03:13 | And now if I go back to my page and
refresh that, the call is made out to Typekit
| | 03:17 | and the fonts are being properly served.
| | 03:20 | A couple of things that you'll need to
keep in mind here. You'll need to add
| | 03:23 | the embed code to every single page in
your site that you want to display your fonts.
| | 03:26 | Now, that sounds pretty tedious, but it's
actually a good thing, because it allows
| | 03:30 | you to create multiple kits for sites
so that you're only serving the fonts to
| | 03:33 | a specific page that you need.
| | 03:35 | So, you might have one kit with three
fonts on it, you might have another kit
| | 03:38 | with two fonts on it, you might have
another kit with a font that's not in any
| | 03:41 | of the other kits, and you can serve
them to multiple pages within a site.
| | 03:45 | Now, if you want to learn a little bit
more about font loading and how to load
| | 03:50 | Typekit fonts asynchronously, check out
the article on asynchronous font loading
| | 03:55 | on the Typekit blog.
| | 03:56 | I know it sounds a little intimidating,
but even if you're not planning on
| | 04:00 | diving into this and loading your
fonts asynchronously, it's still a great
| | 04:04 | article to read, because it goes a
little bit deeper into the process of how the
| | 04:08 | embed code works and how you can
exercise a little bit more control over the
| | 04:13 | process of loading fonts through Typekit.
| | Collapse this transcript |
| Customizing selectors| 00:00 | So once you have your fonts chosen
and your kits are all published and the
| | 00:05 | code on your page is enabled, how do
you actually control where on your page
| | 00:09 | the fonts are used?
| | 00:10 | Well, that's the subject of our next
few movies, and we're going to start by
| | 00:14 | discussing customizing selectors.
| | 00:16 | Just going back to my own site, you can
see here in my Kit Editor, I've got the
| | 00:20 | fonts I want chosen, Acta
Display and Nimbus Sans Condensed.
| | 00:24 | I've published this out to Typekit.
| | 00:26 | If I go back into the code editor, you
can see that I have the Typekit embed
| | 00:30 | code enabled, but if I go open my
browser and I preview this page, you can see
| | 00:36 | that I'm only looking right
currently now at the fallback fonts.
| | 00:39 | I'm not getting the Typekit fonts.
| | 00:41 | Well, my kit's published, my fonts
are chosen, and the code is enabled, so
| | 00:45 | what's the problem?
| | 00:46 | Well, the problem is I haven't told
Typekit which elements on the page the
| | 00:51 | fonts should apply to.
| | 00:52 | So you know, without that information,
Typekit is serving the fonts, but it's not
| | 00:56 | really being rendered or displayed anywhere.
| | 00:58 | Now there are a lot of different
ways that we can target elements on the
| | 01:01 | page with Typekit fonts.
| | 01:02 | I want to start off by talking about selectors.
| | 01:04 | So I'm going to bring back up my kit.
| | 01:08 | We're just going to focus on Acta Display.
| | 01:09 | We'll start with that one.
| | 01:11 | So if I click on Acta Display to
focus on that font, over here on the left-hand
| | 01:16 | side, the top pane up here is where
we control the selectors that target
| | 01:19 | this particular font.
| | 01:20 | Now you can add your own, but you'll
notice Typekit goes ahead and gives us sort
| | 01:25 | of a default class selector.
| | 01:26 | If I highlight this, in fact, I
can just go ahead and copy this.
| | 01:30 | So what's going to happen here is
when it sees this class attribute applied
| | 01:33 | in your page's HTML, it knows that
you want that font applied to that
| | 01:37 | particular element.
| | 01:38 | So if I go back into my code editor
and I scroll down into this first heading
| | 01:43 | here--so we're just going to focus on
this Up and Running with Typekit heading
| | 01:46 | for this demonstration--
| | 01:47 | here I can just go ahead and
apply a class attribute and apply that
| | 01:51 | tk-acta-display class.
| | 01:53 | If I save this and upload this to the server,
| | 01:58 | now if I go back to my browser and I
refresh this page, you can see that that
| | 02:02 | heading is now being applied to the Up
and Running with Typekit heading because I
| | 02:06 | applied that class in the HTML.
| | 02:08 | Now, as you can probably guess, that
is not the most efficient way to use
| | 02:12 | Typekit fonts on your site.
| | 02:14 | You would have to go in and for every
single element that you want this font to
| | 02:18 | apply to, you would have to
apply that class attribute.
| | 02:20 | It's not really semantic.
| | 02:22 | It's a lot of maintenance.
| | 02:23 | So it's not probably the
most efficient way to do it.
| | 02:26 | It's really great for just that one or
two times that you need to use it, but it's not
| | 02:29 | great in terms of applying it sitewide.
| | 02:31 | So what are some of the other options?
| | 02:32 | Well, I'm going to bring my Kit Editor back up.
| | 02:35 | All right, so you can go
ahead and add your own selector.
| | 02:38 | So I'm just going to come in and do
h1 and I'm just going to click add.
| | 02:42 | You'll notice that now, right down
below it in this list we've got here of
| | 02:46 | customs selectors, h1 is added to that.
| | 02:49 | So I'm going to go ahead and publish this kit.
| | 02:51 | Now just to show you that this is
working without the default class selector,
| | 02:55 | I'm going to go back into the
HTML and I'm going to strip this out.
| | 02:59 | So I'm going to just go ahead and strip
that class out so it's not applying anymore.
| | 03:02 | I'm going to save this and then I'm
going to upload that to my server as well.
| | 03:06 | And after I've uploaded that, I'm
going to go check this out in the browser.
| | 03:10 | So if I refresh my page, I can see that
not only does the heading 1 up top still
| | 03:16 | have that style applied to it, even
though I've removed the custom class, but
| | 03:20 | there's another heading 1 on the page.
| | 03:21 | So my name down here also had the same font
applied to it but because it's an h1 as well.
| | 03:26 | So when you use this sort of element
Selectors, that's very global in nature and
| | 03:30 | this is just going to be applied
anywhere on the page that those are found.
| | 03:33 | Now, if you're wondering if you can
be a little bit more specific with your
| | 03:35 | selectors, you most certainly can.
| | 03:39 | So I'm going to bring my kit back up
Again, and let's remove this h1 selector.
| | 03:43 | I'm just going to go ahead and remove that.
| | 03:45 | It's going to ask me, "Are you sure?"
| | 03:46 | I'm going to say yes.
| | 03:47 | So now I want to be a little
bit more specific about this.
| | 03:49 | So I'm just going to type in "#pageHeader"--
| | 03:52 | that's the ID of the parent element-space, h1.
| | 03:54 | So now I'm saying, only when you find an h1
inside an element with an id of page header.
| | 03:58 | So I'll go ahead and add
that to my selectors as well.
| | 04:01 | Typekit has this weird little thing
where sometimes it doesn't show you adding
| | 04:05 | and removing selectors.
| | 04:07 | So a really easy way to make sure
that that's happened, first, I'm going
| | 04:10 | to publish my kit to make sure that those
changes are distributed across the network.
| | 04:14 | But the other thing that I'm going to
Do, as soon as this is done publishing, I'm
| | 04:16 | going to close this kit, go back into
Typekit, and launch it again, just to make
| | 04:21 | sure that yes, my selectors
are the way I want them to.
| | 04:25 | So every now and then, that particular
display won't refresh on its own. You're
| | 04:29 | going to need to pay attention to that.
| | 04:31 | And so now, if I go back into the page
and preview that, you can see that the
| | 04:38 | top heading remains Acta Display, but
then the h1 on the bottom does not because
| | 04:42 | it doesn't fit that particular selector.
| | 04:46 | So to review a little bit, I'm
going to pull the kit back up again.
| | 04:48 | So if you're going to use selectors,
remember, you can use the default selector
| | 04:52 | that they give you or you
can add your own selectors.
| | 04:54 | If you're adding your own selectors,
you can add as many as you want.
| | 04:57 | You're not only limited to one or two, and
they can be as complex as you want them to be.
| | 05:01 | Anything that you can write, selector-
wise, to target elements in your css,
| | 05:06 | you can add here within the Typekit Kit Editor.
| | 05:07 | It will go ahead and target those
elements on the page using that particular font.
| | 05:13 | Now that's not the only way to do it.
| | 05:15 | You're not restricted to just
using these custom selectors.
| | 05:19 | You're actually free to declare
Typekit fonts directly in your own CSS.
| | 05:23 | Now we're going to explore that in a
Moment, but before we do, I want to talk
| | 05:26 | about defining fallback fonts in our next movie.
| | Collapse this transcript |
| Defining fallback fonts| 00:00 | Fallback fonts are important.
| | 00:02 | If you've never dealt with them before,
it's essentially a way to tell your
| | 00:04 | browser which font to use in case the
fonts you've requested isn't available.
| | 00:09 | If you don't specify a fallback, the
browser's default font will be used.
| | 00:12 | Declaring fallbacks is something that
you should do whenever you request a font,
| | 00:16 | but it's even more important
when using a service like Typekit.
| | 00:20 | Typekit is certainly aware of this
and gives you the ability to declare
| | 00:23 | fallbacks directly in the Kit Editor.
| | 00:26 | Now it might not be readily apparent
| | 00:28 | where in the Kit Editor it
allows you to declare fallbacks.
| | 00:31 | But essentially the process of
declaring a fallback is you go ahead and
| | 00:34 | highlight the font that you want to target.
| | 00:36 | In this case, I'm going
to start with Acta Display,
| | 00:38 | so you'll notice I have that one highlighted.
| | 00:40 | And then over here in the sidebar on
the left-hand side, if I scroll all the
| | 00:43 | way down to the bottom, you can see that there's
this little section down here for the CSS Stack.
| | 00:48 | Now the CSS Stack is essentially a
name that we used whenever we do a font
| | 00:52 | declaration that has more than one
font being passed into the declaration.
| | 00:55 | It's called a CSS Stack. All right.
| | 00:57 | So, if I open up that for my font
stack, I can see right now the only thing
| | 01:01 | that's occurring for this is sans-serif,
which is really interesting because
| | 01:06 | Acta Display is a serif font.
| | 01:08 | But it's giving it a sans-serif fallback.
| | 01:10 | So, we can change that, as
well as a few other things.
| | 01:13 | So, I'm going to go and highlight this and I'm
just going to pass in a series of fonts here.
| | 01:18 | I'm going to type in Didot, and then in quotation marks
Bodoni MT, which is more of a Windows font.
| | 01:27 | Didot is for Mac and Bodoni MT is for Windows.
| | 01:30 | And then I'll do another comma Georgia,
which is a nice cross-platform serif
| | 01:35 | font, and then just serif.
| | 01:37 | Now as soon as I go ahead and declare
that stack, I can go ahead and save that.
| | 01:42 | But, of course, for any changes to be
made, remember, I have to publish them.
| | 01:46 | Now, I'll wait till I finish with
the other font before I publish that, but
| | 01:49 | just for those of you out there that
maybe have never declared a font stack
| | 01:52 | before, you might be
saying, "Okay, wait a second.
| | 01:54 | What are all these?"
| | 01:55 | And essentially if my Typekit font is
not available, my browser is going to
| | 01:59 | first request Didot, because Didot
is very similar to the font that I'm
| | 02:03 | using here in Typekit.
| | 02:04 | If Didot is not available, it's going to
go to the next fallback font, which in
| | 02:07 | this case is going to be Bodoni MT.
| | 02:09 | If that's not available, it's going to go
over and try to find Georgia, which is a
| | 02:12 | nice cross-platform font.
| | 02:14 | And then finally, at the very end, the
font of last resort, it's basically
| | 02:17 | just going to say, "Hey, whatever
your default serif font is, go ahead and
| | 02:21 | serve that one up."
| | 02:22 | So, you can have as many of these strung
together as you want, and you'll notice
| | 02:26 | that probably within your own Kit
Editor, this is going to start up with just
| | 02:30 | saying serif or sans-serif.
| | 02:30 | So, if you want extra fonts in
there, you're going to add those.
| | 02:33 | Now, you might also wonder, well how
you know what to use for a fallback font.
| | 02:38 | Later on the title, in the additional
resources movie, I'm going to show you
| | 02:41 | a site that can help you make that
determination and help you build really good font stacks,
| | 02:46 | so be sure to watch the
additional resources movie for that. Okay.
| | 02:49 | So, I need to do the same
thing for my Nimbus Sans Condensed.
| | 02:51 | So, I'm going to go up and select that.
| | 02:53 | I'll scroll down to my font stack, open that up.
| | 02:55 | You can see that the
default one here is sans-serif.
| | 02:58 | So, just in front of that
I'm
going type in "Arial Narrow."
| | 03:02 | Now if you're wondering why the
quotation marks are necessary there, it's because
| | 03:05 | there's a space between the font names.
So anytime there's not a space you
| | 03:09 | don't really need the quotation marks,
| | 03:10 | but when there is it's a good
idea to place them in there.
| | 03:12 | After that, I'll do Arial
and then comma sans-serif.
| | 03:15 | So, a much shorter stack there.
I'm saying since it's condensed, give me Arial
| | 03:19 | Narrow; if that's not available, I'll go
and take Arial; and if that's still not
| | 03:22 | available, give me your default sans-serif font.
| | 03:25 | Go ahead and save that. And remember,
no matter what changes you make within
| | 03:28 | the Kit Editor, they're not going to be
distributed to the network unless you published it.
| | 03:32 | So, as soon as you declare your CSS
Stacks, go ahead and published those as well.
| | 03:36 | Now the fallback fonts that we just
added here, they're only going to be
| | 03:39 | served through the use of this
Selector option up here that you guys saw in
| | 03:43 | the previous movie.
| | 03:44 | So, if you're declaring Typekit fonts
in your own CSS, you'll need to define
| | 03:48 | fallback fonts in your own code, and
we're going to check that out next.
| | Collapse this transcript |
| Declaring Typekit fonts in CSS| 00:00 | I love the fact that Typekit gives me
options in terms of how I want to apply
| | 00:04 | Typekit fonts to my site.
| | 00:06 | In previous movies, we've seen how to
declare selectors directly here in the Kit Editor,
| | 00:10 | so in this movie I want to talk about
how to declare Typekit fonts directly
| | 00:14 | within your own CSS.
| | 00:16 | Now before we get too deep into this
demo, I want to show you the elements on
| | 00:20 | the page that we're going to be targeting.
| | 00:21 | So, I'm going to switch over to my site,
and you can see this is sort of where my
| | 00:26 | starting point's going to be.
| | 00:28 | The Up and Running with Typekit
headline and my name, the headline down there
| | 00:31 | with James Williamson, the name in it, both
of those are not using Typekit fonts obviously.
| | 00:36 | They're just using sort of the
default fallback font for the browser.
| | 00:39 | So, those are the two elements on the
page that we're going to be targeting.
| | 00:43 | Okay, I want to go back to
the Kit Editor for a moment.
| | 00:46 | Because when you're declaring fonts in
your CSS, if you're used to doing this
| | 00:50 | then you know that you just need
to type in the name of the fonts.
| | 00:52 | So, Georgia, Arial, Times New Roman,
things like that, those are easy to do
| | 00:56 | because you probably
already have those memorized.
| | 00:58 | But when you're dealing with the
Typekit fonts, it's not quite as simple.
| | 01:01 | For example, here we're using Acta
Display and Nimbus Sans Condensed.
| | 01:05 | Now if you just typed in those
names into your CSS, they wouldn't work.
| | 01:09 | That's because the names here are not the
names that Typekit uses when it serves them.
| | 01:14 | So, before you can add them to your CSS,
you need to understand or know the name
| | 01:19 | that Typekit is looking for.
| | 01:20 | And to find that, you just click a
font to highlight it and then we have this
| | 01:23 | nice, very handy link right over
here in the upper left-hand corner.
| | 01:26 | It says Using fonts in CSS.
| | 01:28 | Now what's nice about this window is
not only do we get the name of the font
| | 01:32 | that they're looking for--
in this case Acta Display--
| | 01:34 | but we also get examples of them in use
within a selector, and we get the fallback.
| | 01:40 | And what's nice about this, if
you noticed, they give you some
| | 01:43 | fallback equivalents.
| | 01:44 | Now, you know, you don't
always need to rely on those.
| | 01:46 | You can certainly come up
with your own fallbacks.
| | 01:47 | But it's nice that they do give you a
little bit of a suggestion there. Okay.
| | 01:51 | So, another nice feature about this, if
you don't want to memorize this or write
| | 01:54 | it down, you can simply go right over
here to the right-hand side and there's a
| | 01:58 | little button here that helps
you copy that to the clipboard.
| | 02:00 | So, as soon as I click on that, it's
copied to the clipboard. I can now go on my
| | 02:04 | code editor and paste that in.
| | 02:06 | So, here I am within my code editor,
and I've got my main.css file open.
| | 02:10 | I'm just going to scroll down to
the element that I'm targeting.
| | 02:13 | And in this case, it's this pageHeader h1.
| | 02:17 | So, here's the font-family declaration.
| | 02:18 | I sort of have that blank and ready to go.
| | 02:21 | And what I'm going to do is just paste
this in, and there's my font, Acta Display.
| | 02:25 | Now, I don't necessarily need those
quotation marks around it because there's no
| | 02:28 | space between Acta and Display,
although it is using the dash there.
| | 02:32 | But just for these demonstration purposes,
I'm going to leave it in there. All right.
| | 02:35 | So, now I need to define
my fallback fonts as well.
| | 02:38 | So, I'm going to just type in comma
and I'll just do Didot, and then "Bodoni
MT, Georgia, serif."
| | 02:51 | Now it just so happens
that's exactly the same fallback,
| | 02:54 | so I probably would have been
smarter to copy the fallback as well.
| | 02:57 | But you're not always going to use the same
fallback that Typekit is going to give you.
| | 03:01 | So, I'm going to save this and go
back up and take a look at the font name
| | 03:05 | for Nimbus as well.
| | 03:06 | So, again, I'm going to go back to my
Kit Editor, I'm going to click on Nimbus
| | 03:09 | Sans Condensed, and again I'm going
to click on this little link right here,
| | 03:12 | Using fonts and CSS.
| | 03:13 | So, I can see it says nimbus-sans-condensed.
And so, I have sort of a fallback here as well.
| | 03:19 | And I'm going to copy the font name
to the clipboard, I'll go back into my
| | 03:22 | code editor, and I'm going to scroll down, and
I'm looking for two selectors in particular,
| | 03:27 | first and last, because those are classes
that surround my first name and my last name.
| | 03:32 | And you can see I sort of emptied out
the font-family declaration here as well.
| | 03:35 | So, I paste in the text that I copied
to the clipboard, Nimbus Sans Condensed.
| | 03:39 | And after that, I need to
start defining my fallback fonts.
| | 03:41 | Now, for the first name,
this is a little different.
| | 03:43 | I want my fallback font to be
different because the first name is going to be
| | 03:46 | really, really bold, a heavy, heavy font.
| | 03:49 | So, here instead of doing Arial
Narrow, like I will for the rest of my
| | 03:52 | fallbacks, here I'm going to do Arial
Black, and then after Arial Black, I'll
| | 03:57 | just do sans-serif.
| | 04:00 | So, for last, again, I'm going to paste
in my font name and then here, since it's
| | 04:04 | not going to be really
heavy, I can do Arial Narrow.
| | 04:07 | So, you can customize your fallbacks.
| | 04:09 | You can use whatever you
want for your fallbacks.
| | 04:11 | They don't have to be the same throughout.
| | 04:13 | So, we'll just use sans-
serif there as well. Okay.
| | 04:14 | So, I'm going to save this. I'm going to go ahead
upload that to my server. Then I'll go
| | 04:20 | back out to my browser and refresh,
| | 04:23 | and now, indeed, I am getting
the fonts that I'm requesting.
| | 04:26 | I'm getting Acta Display up top, and I'm
getting Nimbus Sans Condensed down here on my name.
| | 04:30 | Okay, so that looks pretty good.
| | 04:31 | I'm getting the font that I'm looking
for, but one of the things I don't see
| | 04:34 | here is the difference in the
weights that I need for the names.
| | 04:38 | So, we're going to have to tackle that
next as we explore using the Kit Editor
| | 04:42 | to choose weights and styles.
| | Collapse this transcript |
| Selecting weights and styles| 00:00 | Many of the fonts in the Typekit library
feature multiple weights and styles that add
| | 00:04 | to the flexibility you
have when designing your site.
| | 00:07 | Now, at first glance, it may not be
clear exactly how to access these styles, so
| | 00:11 | let's take a closer look at it.
| | 00:13 | So, I've got the two fonts that I'm
going to be using on my site: Acto Display and
| | 00:16 | Nimbus Sans Condensed. And in between
the movies I went ahead and sort of cleared
| | 00:20 | them back out again, and so these are
sort of the default way that these fonts
| | 00:24 | would look if I just added them to the kit.
| | 00:28 | Now, you'll notice that again, clicking
on a font highlights its settings over
| | 00:32 | here on the left-hand side.
| | 00:34 | If I click Acta Display, notice how many
more weights and styles has over there
| | 00:38 | than Nimbus Sans Condensed has.
| | 00:41 | So they're not always
going to be exactly the same.
| | 00:44 | But you have to decide which one of
these you want to use within your page.
| | 00:48 | Now, you might initially go ahead and
just click all of them, but be aware that
| | 00:51 | doing that is going to add
significantly to the weight of your kit size.
| | 00:55 | For example, for Acta Display, I'm
going to add Light and Light Italic and then
| | 01:00 | I'm going to also add Black and Black Italic.
| | 01:03 | Now, I can turn the weights off too.
| | 01:04 | So, if I wasn't going to use Bold or
Bold Italic I could turn those off. And
| | 01:07 | notice that every single time I activate
one of these by turning it on or off, it
| | 01:11 | modifies the size of the kit.
| | 01:13 | Now, for our page, I'm not actually
going to be using italic at all, but I'm
| | 01:18 | thinking long-term, like for the site
will I actually need italic versions of
| | 01:23 | these weights, and the possibility that I might
use them later on in the site is pretty high.
| | 01:28 | So in this case I'm going to add them.
But of course, if I knew that I weren't
| | 01:31 | going to be using the italic versions at
all, if I turn those off, notice that I've
| | 01:35 | saved a fair amount of size. I'm down
to a 125K now, whereas in adding these
| | 01:40 | back in, it takes me back up to 212K. So,
there is a significant savings size-wise
| | 01:46 | for removing the weights and styles
that you're not going to be using.
| | 01:49 | All right, so again for this demonstration
I'm going to go ahead and select all of
| | 01:53 | the weights and styles in Acta
Display except for Medium and Extra Bold--I
| | 01:56 | won't be using those.
| | 01:58 | For Nimbus Sans Condensed,
I'm going to click on that.
| | 02:00 | For that one, it only have three weights
and styles, so I'm going to go ahead and
| | 02:04 | select Black so I'll just go
ahead and use all of those.
| | 02:06 | Of course, making a change, thereby
checking the check box is only part of it.
| | 02:11 | Remember, in order to have those
changes broadcast out to the network, we
| | 02:15 | need to go ahead and publish the kit again,
so I'm going to go ahead and publish the kit.
| | 02:19 | After this is done publishing, I want
to talk for just a moment about using
| | 02:23 | weights and styles in your own CSS.
| | 02:25 | How do you access these weights
and styles when you want to use them?
| | 02:28 | Now, to demonstrate that, I'm going to
go back to Acta Display for a moment, and
| | 02:31 | I'm chosing Acta Display on purpose
because Acta Display has so many different
| | 02:36 | weights and styles. It has a total of 12 in
fact, so I'm using eight out of the 12.
| | 02:41 | So if I want to learn more about how to
actually use these, just like with some
| | 02:44 | of the other options, we have this
little link right here that says "Using
| | 02:47 | weights and styles in CSS."
| | 02:49 | If I click on that, it's going
to open up a little pop-up menu.
| | 02:52 | Now, the pop-up menu is going to have
the font variation, the variation of the
| | 02:55 | font on the left-hand side,
| | 02:57 | the font family name that I need to
declare in order to access it, the font
| | 03:01 | weight that I need to define, and then the
font style, the name that you define as well.
| | 03:07 | Now, you're probably used to using Bold
or Normal or Bolder or Lighter for font
| | 03:12 | weight, but you might not be used to
using these values. So values of font
| | 03:16 | weights actually go all the way from
100 to 900 in the CSS specification and
| | 03:21 | it essentially it gives us sort of an ability
to have variations of lightness in our fonts.
| | 03:26 | Now, not all fonts support those.
| | 03:28 | In Typekit they're being used
in a slightly different way.
| | 03:31 | What Typekit does is when it finds that
numeric value for font weight, it maps
| | 03:35 | that to the variation that you're asking for.
| | 03:38 | So in the case of using Typekit, it's a
good idea to go ahead and do at least a
| | 03:42 | minimal CSS Reset at the top of your
code so you're stripping out all the
| | 03:46 | default normal and bold font weights
and normal and italic font styles so that
| | 03:50 | you can go ahead and make sure that
you're triggering the proper weight and
| | 03:53 | style through these values.
| | 03:56 | Now, sometimes keep in mind that
this window isn't big enough to display
| | 03:59 | everything, so in this case I've got
to scroll down if I want to find out what
| | 04:02 | weight I need to use for a
black, that sort of thing.
| | 04:05 | But I also notice in the lower left-
hand corner there's a little check mark down
| | 04:08 | there that says "Include
variation-specific font-family names."
| | 04:12 | So, if I click that, I can see that
in addition to the font family name of
| | 04:16 | Acta Display, I'm also getting a name
that corresponds to the weight that I'm
| | 04:20 | requesting as well.
| | 04:21 | So, in this case it's acta-display-n4.
| | 04:24 | So what's going on there, and
when would I need to use this?
| | 04:27 | Well, if I was targeting Internet
Explorer versions six through eight and I'm
| | 04:32 | using a font that has more than four
variations, then I need to go this route.
| | 04:37 | Essentially, Internet Explorer versions
six through eight doesn't allow you to
| | 04:41 | have more than four variations of a web font.
| | 04:44 | In the case of Acta Display for example,
we have twelve different variations, so
| | 04:49 | that certainly wouldn't get
served properly to Internet Explorer.
| | 04:52 | So essentially, you modify your font
stack so that you're passing in this name
| | 04:56 | first and then the
default family name after that.
| | 05:00 | This name is served for Internet
Explorer and then the font family name will
| | 05:04 | be served for all other modern browser that
allow you to have more than four variations.
| | 05:08 | Now, if you want to learn more
about this technique and why this is
| | 05:11 | required, there's a little link down here
right here that that says "When is this necessary?"
| | 05:15 | Now, if you click on that, it takes you
to a part of the help page for Typekit,
| | 05:19 | and it goes not only through using
multiple weights and style, but why that font
| | 05:22 | variation name is required for Internet
Explorer versions six through eight, so
| | 05:26 | be sure to check that out.
| | 05:27 | Okay, so I went ahead and chose the weights and
styles that I needed. I went ahead and
| | 05:31 | published our kit so now we can take
advantage of that by using those values in
| | 05:36 | our CSS, and we're going to
do that in our next movie.
| | Collapse this transcript |
| Styling weights and styles| 00:00 | Once you have chosen the weights and
styles that you want to use and you've
| | 00:03 | published your kit, you can use CSS to
ensure that the proper weights and styles
| | 00:08 | are being used within the browser.
| | 00:10 | Let's finish your album-cover design
by choosing the right weights and styles
| | 00:14 | for a few of our page elements.
| | 00:15 | Now, before we get started by using Kit
Editor once again, I want to go into our
| | 00:20 | page and sort of preview where we are right now.
| | 00:22 | Okay, so here's the current state of it.
You will notice that the headline Up
| | 00:25 | and Running with Typekit and the
headline that contains my name, James
| | 00:28 | Williamson, neither of those have little the
weights and the styles that we are looking for.
| | 00:32 | So I am going to go back in
my Kit Editor for a moment.
| | 00:36 | So I want to refresh your memory on how
to properly define weights and styles.
| | 00:39 | So I am going to start here with Acta
Display. You will notice that if I scroll
| | 00:42 | down over here on the left-hand side I
can see for weights and styles, again
| | 00:45 | I'm using 8/12 Light, Book, Bold, and Black.
| | 00:49 | So if I click this link that says
Using weights and styles in CSS, I get
| | 00:53 | sort of a nice little reminder
here of what the font weight is for a
| | 00:56 | specific variation.
| | 00:58 | So if I scroll down through this list, I
can see Black, which is what I want to
| | 01:01 | use for the headline.
| | 01:02 | I need a font weight of 900.
| | 01:03 | Now, of course if you don't feel like
memorizing those or writing them down, you
| | 01:07 | can come right to the screen, and
there's this nice little option right here of
| | 01:10 | copying this information to the clipboard.
| | 01:13 | Now, if you copy this-- I'm going to go ahead and
do that really quick--I can now switch over
| | 01:16 | to my code editor and in my code editor
I can find the selector I want to target,
| | 01:21 | which in this case is the #pageHeader
h1, and down on another line, I can just go
| | 01:26 | ahead paste in that information.
| | 01:28 | Now, you will notice that by copying
that to the clipboard you may be getting
| | 01:31 | more information than you actually need.
| | 01:32 | Notice that it not only gave
me my font weight; it also gave me the
| | 01:36 | font style and the font-family decoration.
| | 01:38 | So the font-family decoration doesn't
come with the fallback fonts that you
| | 01:42 | actually defined in your Kit Editor;
| | 01:45 | they just have the default font
Fallback, which in this case is sans-serif.
| | 01:49 | So a lot of times it's actually a
little bit more work for me to do it this
| | 01:52 | way. If I were authoring those styles
from scratch, this might be a nice option
| | 01:55 | for me, but if I am modifying existing
styles, it's probably easier for me just to
| | 01:59 | go ahead and declare the proper weight
and style that I want in the first place.
| | 02:02 | So I'm going to go ahead and get rid
of all that, and I am just going to type
| | 02:06 | in font-weight. And of course because I want
black, I am going to go with a weight of 900.
| | 02:11 | So I am going to go and save that.
| | 02:12 | Now, I am going to scroll down and find
the first and last selectors which are
| | 02:18 | targeting my first name and then my last name.
| | 02:19 | Now, I want the first name to be kind of
bold, and I can sort of test this if I want.
| | 02:24 | For example, I might come in here and
say font-weight 900, so maybe you used the Bolder
| | 02:28 | setting. And then for the last name, I
want that to be a little bit lighter, so
| | 02:32 | then I'm going to type in font-
weight and then here I will use 400.
| | 02:36 | Now, if you are wondering what
happens if you don't declare a weight,
| | 02:39 | well, if you don't declare a weight,
it defaults to what ever the normal
| | 02:44 | heading for that would be.
| | 02:45 | In the case of Typekit, that's going
to be 400. So if you don't declare a
| | 02:49 | weight, you are getting basically
the normal setting for that font, which
| | 02:52 | equates to about 400.
| | 02:53 | So I am going to save this, upload it,
go into my browser, and preview that.
| | 03:00 | And now I can see that the first name
is bolded, my last name remains kind
| | 03:04 | of the way it was because it was getting
the default weight beforehand, and the
| | 03:07 | heading 1 up here as well.
| | 03:08 | So if I don't like that, if I think my
first name for example, maybe I think
| | 03:12 | that's too bold, I can always go
back and play with those values.
| | 03:15 | If I go back in the code editor for
example, I can come right up here and I can
| | 03:18 | change that to 700, save that,
upload that to the server, and when I preview
| | 03:26 | the page, I can see that now
it's a little bit thinner.
| | 03:28 | So it's really up to you to kind of
play around with those weights and styles
| | 03:31 | and find out exactly which one you want.
| | 03:33 | Now, of course, font styles
are available to us as well.
| | 03:36 | If I look down here, I can see we have
got a little tagline down here that says
| | 03:39 | presented in High Fidelity Stereo by
the great people at lynda.com, and maybe I
| | 03:44 | want that High Fidelity Stereo to be italicized.
| | 03:47 | So I can go right back down into my
code, find the stereo selector, and then
| | 03:54 | just apply font-style like I would
normally. In this case, I'm going to go
| | 03:58 | ahead and do italic.
| | 04:00 | All right, so I will save that, upload
it, and now when I refresh my page, I can
| | 04:06 | see that Typekit is serving me the
italic version of that particular weight
| | 04:10 | because I asked for italics.
| | 04:12 | So if you are used to setting font
weights and styles in your CSS by using
| | 04:15 | keywords for the weights, using the
font weight values that we are using here--
| | 04:20 | so like weights 100 to 900--that
can take a little getting used to.
| | 04:23 | However, once you have worked with it a few
Times, it really becomes quite natural.
| | 04:27 | Keep in mind that the font/weight
value that you are using might not be
| | 04:31 | supported for fallback fonts.
| | 04:33 | So if it falls back, for example, to
Arial, Arial might not have a black
| | 04:37 | version of it at 900.
| | 04:39 | Now, in those cases, you are usually
going to get the closest equivalent to
| | 04:43 | normal or bold based upon the
numeric value that you are giving.
| | 04:46 | Anything 700 and above you will
get bold; anything below that you
| | 04:49 | typically will get normal.
| | 04:51 | Okay, I think that's enough to
get you started with Typekit.
| | 04:54 | Now, be sure to check out the movie,
because I am going to be giving you some
| | 04:57 | additional resources that can help you
take Typekit and the web fonts in general
| | 05:02 | a little bit further.
| | Collapse this transcript |
|
|
ConclusionAdditional resources| 00:00 | I hope you have enjoyed
Up and Running with Typekit,
| | 00:02 | and I hope you will continue to
explore not only Typekit, but how using web
| | 00:05 | fonts can help enhance your design.
| | 00:08 | I want to leave you with a few
additional resources that can help you learn not
| | 00:11 | only a little bit more about Typekit,
but also using web fonts in general.
| | 00:15 | Now, I have included this demo file
along with the rest of the exercise files,
| | 00:19 | but if you want to access this
directly in the browser you can go to
| | 00:22 | http://www.desolve.org/typekit/resources.htm.
| | 00:27 | Now, the first resource that I have for
you is incredibly an important one if you
| | 00:30 | are going to be using Typekit,
and that's the Typekit Blog.
| | 00:33 | So I'm going to click on this
link and browse out to the blog.
| | 00:35 | Now, this is a blog that is
updated frequently, and it has some
| | 00:38 | fantastic articles on it.
| | 00:40 | It helps to keep you up to date with
what's going on with Typekit, and if you
| | 00:43 | look at the categories, you
will find things on font events.
| | 00:46 | So if you want to learn more about
controlling the loading of Typekit fonts, you
| | 00:49 | can do that. New fonts that are
available for you to use if you sort of
| | 00:52 | want to browse through here.
| | 00:53 | They also have this feature--I really
like this one--which is Sites we like, and
| | 00:57 | that one showcases some sites out there
that are using Typekit fonts.
| | 01:00 | Now, even if you don't decide to use
Typekit at the end of the day, this is still
| | 01:04 | a great blog to read because they
have articles about things like type
| | 01:07 | rendering, for example,
| | 01:08 | that help you understand what's
different about type as it renders onscreen
| | 01:13 | versus type on the printed page.
| | 01:15 | And that's really going to be
helpful to you regardless of where you
| | 01:18 | begin to use the web fonts, but
just using web fonts in general.
| | 01:21 | So this is a very important resource and
one that I cannot recommend strongly enough.
| | 01:25 | Now, the next resource that I want
to show you guys is the WebFont Loader.
| | 01:29 | Now, this is a JavaScript library that
was developed by both Google and Typekit,
| | 01:33 | sort of in conjunction with each other.
| | 01:35 | So what this library does is it
allows you to control the loading of fonts
| | 01:39 | through Javascript, so it allows you
to do things like error handling, for
| | 01:43 | example, or control the sequence that
fonts are loaded, or what happens after the
| | 01:47 | fonts are finished loading.
| | 01:48 | So it really gives you total control
over how your fonts are coming into your
| | 01:52 | page and really what the rest of your
page does in reaction to those fonts.
| | 01:56 | So of course, if you use this, you have
to be experienced in JavaScript, and to
| | 01:59 | know a little bit about web
development, but it is well documented.
| | 02:02 | It is easy to kind of get in here and
see some of the examples that they have.
| | 02:06 | And although this was developed in
conjunction with Google and Typekit, it's not
| | 02:10 | solely for use with Typekit.
| | 02:11 | It works really well with it. It's
integrated in, and all the font events are
| | 02:14 | built into Typekit, but you can take
this, modify it, and use it on other sites
| | 02:18 | that are using web fonts as well.
| | 02:20 | Now, the next resource is one that you
guys are probably familiar with if you
| | 02:23 | have seen any of my titles
before, and that is Modernizr.
| | 02:26 | And you can find this at
Modernizr.
com. I'm a huge fan of Modernizr.
| | 02:31 | This is a detection library that
helps us detect either HTML5 or
| | 02:34 | CSS3 capabilities within the
browser without doing any specific browser
| | 02:39 | sniffing or device detection.
| | 02:41 | So what this allows you to do is check
to see if @fontface is supported and if it is supported,
| | 02:46 | you can change your styling that way.
| | 02:48 | That's really important.
| | 02:49 | Let's say for example, you are
using a font through Typekit
| | 02:52 | that's really sort of this custom
display font and you don't really have a
| | 02:55 | fallback font that looks like it at all.
| | 02:57 | You might have to use one set of
typographic styles with the Typekit font that
| | 03:02 | really would not display well
at all with the fallback font.
| | 03:05 | So by using Modernizr, you can
chose when to apply those styles.
| | 03:08 | You can say, "Hey, if that font doesn't
load, go ahead and apply these styles instead."
| | 03:12 | So Modernizr is a great resource for
you to dig around in, not just the web
| | 03:16 | fonts, but all sorts of HTML5 and CSS3 features.
| | 03:21 | Next, I want to show you the Nice Web
Type blog, and my resource page would
| | 03:25 | actually a lot bigger if it
wasn't for this particular page.
| | 03:29 | Now this is the personal blog of Tim
Brown who is the type manager for Adobe
| | 03:33 | Typekit, and Tim is a really neat guy.
| | 03:36 | He's just so knowledgeable about web fonts,
and he has got some great tools on this page.
| | 03:41 | So not only does he have a blog that
you can read where he is talking about the
| | 03:44 | state of web fonts, but he has all
sorts of articles and resources that are
| | 03:48 | available to you as well.
| | 03:49 | And every single one of these resources
I would have put on my resource file if
| | 03:53 | I wasn't going ahead and linking to here.
| | 03:55 | We have the Ffffallback library for
example that helps control fallback fonts.
| | 03:59 | We got the Lettering.js, which helps
you apply kerning to your text, so
| | 04:03 | there's all sorts of really cool things
in here for you to dig in and explore,
| | 04:07 | as well as read the articles
that Tim's got for you as well.
| | 04:10 | It's going to deepen your
understanding of using web fonts and Typekit.
| | 04:15 | Next up, I believe that if you are
going to be using web fonts, you really
| | 04:18 | should go straight to the source, and
this is the CSS Fonts Module Level 3
| | 04:23 | specification from the W3C.
| | 04:25 | So if you want to go dig in to
the spec and learn all about using
| | 04:28 | @font-face and the syntax involved in that,
| | 04:31 | so here you can actually learn about the
syntax that the browsers are using when
| | 04:35 | they are parsing and rendering your web fonts.
| | 04:38 | And if you want to start doing web fonts
on your own by hosting them yourself, you're going
| | 04:42 | to need to know this syntax, so this is
a great resource for you to come in and
| | 04:45 | sort of learn the nuts and
bolts of using @font-face.
| | 04:50 | Next, this is a tremendous
resource, the Code Style CSS Font Survey.
| | 04:54 | This helps you learn more about all
the default fonts on multiple platforms:
| | 04:58 | Windows, Mac, and Linux.
| | 04:59 | And it also allows you to take the
survey so that you can keep this current.
| | 05:03 | So essentially, if you want to know
what the best fallback stack is for a font,
| | 05:07 | this is the great place to come
because you can find out what fonts are
| | 05:11 | typically found on different platforms.
| | 05:13 | For example, if I click on this
combined survey results for all platforms, and
| | 05:18 | if I scroll down, I can see which
fonts are installed on which platforms and
| | 05:21 | what percentage of those.
| | 05:23 | So I know, for example, that if I use
Helvetica, I am hitting every single Mac out there;
| | 05:28 | if I use Arial, I am hitting 99.85% of
Windows users; and if I scroll down a
| | 05:34 | little bit, I see the Arial also
gets me 98.73% of all Mac users.
| | 05:39 | So this is a great resource. You can
compare the fonts you are using to the fonts
| | 05:43 | that you will find in these lists and
sort of build a font stack out that you can
| | 05:47 | have a little bit more confidence in.
| | 05:48 | And they actually have a font stack
builder, so if I go up to this link and
| | 05:52 | click Font stack builder, you can go in
and start creating a font stack based
| | 05:56 | off of the generic font family and
choosing stacks that are going to
| | 05:59 | apply across the widest range
of machines cross-platform.
| | 06:03 | So this is an incredible resource for
you to go in and learn about creating more
| | 06:07 | stable or better font stacks, if you will.
| | 06:11 | And finally, the last resource I
want to give you is Font Squirrel.
| | 06:13 | If you are considering using web fonts
on your own without using a hosting service
| | 06:17 | like Typekit, Font Squirrel
is a great place to go to.
| | 06:20 | Not only does Font Squirrel have a
forum where you can sort of learn from the
| | 06:24 | community about using web fonts,
but here you can search for fonts and when
| | 06:28 | you find a font that you like, you
can actually grab the @font-face kit for
| | 06:32 | that, which will come complete with the
fonts themselves--all the fonts that
| | 06:36 | you need--in addition to the CSS already
generated for you that you can just copy
| | 06:40 | and paste in your own styles.
| | 06:42 | Now, one of the things you want to make
sure before you begin downloading fonts
| | 06:45 | from here and using them on your own
site, double-check the license to make that
| | 06:49 | sure that the fonts you are using has
a license that allows you to use it on
| | 06:53 | your personal sites or your
business sites, or if you are going to be
| | 06:56 | distributing it in any way.
| | 06:57 | So Font Squirrel is a fantastic resource
if you are thinking about maybe hosting
| | 07:01 | some of these fonts on your own.
| | 07:03 | Of course, I also recommend checking out
all the other CSS-related titles in the
| | 07:07 | lynda.com Online Training Library,
including my Web Fonts First Look course and
| | 07:13 | related CSS3 titles.
| | 07:15 | If you have questions and comments for me,
be sure to follow me on Twitter.
| | 07:18 | I have given you a nice little link
right down here that will take you right to
| | 07:21 | my Twitter account, and you can
follow me there and drop me a line.
| | 07:24 | Once again, thanks so much for
Watching, and I will see you next time.
| | Collapse this transcript |
|
|
