- [Instructor] The first thing you see whenyou open the project 02_02_projectis that there's a missing font right?You see this warning icon, and we need to use Typekitto solve that problem.For our project we need Adelle PE, Adelle in general.So in order to get it, I need to use Typekit.So let's jump into our Creative Cloud desktop appand see what we need to do there.So here I am, I can go to assets, font,and here I can see that I can manage my Typekit fonts.
I have a couple fonts already synced,but I need to go to the Typekit website and sync Adelle.So I'll click there.I can see a list of fonts that are available.I can see some lists.This is really helpful, I can even filterif I want to only see references of sans serifor serif, it's really helping me there,but the one I need to get is Adelle.
So I'll type there in the search field,and then this is the one I want.It has 28 fonts.And I can see that this is all the applicationsI have there for the font, and I can even testa custom text, let's say design systems with XD,and you can see how that text will show up herebefore you sync.
The project is called DDTS, and it looks good to me,so now I can go there and say okay,please sync all the fonts into my Typekit account.Good, now I can see that 18 fonts were addedand if I go back to XD now, that warning is goneand now I can use the Adelle font with any problems.I can even see, if I type anything,let's say Adobe XD, I can then see that Adelleis there for me, and I can change the size.
If I do up and down arrows, it goes upin increments of one, if I hold shift,it goes in increments of 10.And I can change the type, bold, and even the colorif I want to.Now that I have my font set up,let's learn how to use this more globallythroughout this entire document.
For those of us who work with typography on a regular basis, it can be a wake up call to remember we are carrying on a tradition/industry started with Johannes Gutenberg over 500 years ago. Then think of the fact that until just 20 years ago, most type was still being produced with photo-typesetting, T-squares and triangles. Back then there was always some yahoo in the studio sniffing the rubber cement; this too is long gone.
A few decades ago, Adobe set out to change all of that, almost single-handedly, and are in the process of doing it all again, along with other's help. The problem is, in the process, things have become far more confusing than they should, so let's try to sort some of it out.
Adobe's subscription model
Adobe Typekit – essentially a multifaceted online type service – is at the heart of this new typographic revolution. As with other items in the Creative Cloud 2014, it's part software and part services-based. Launched in 2009 by a company named Small Batch, Inc. it was soon purchased by Adobe, who has expanded on it in many ways.
This includes its tight integration with other Creative Cloud applications. You will really see this as you upgrade to the latest CC 2014 versions, many that have new type interfaces.
We'll examine how Typekit works in practice in a moment. However, it's first worth noting that it's not the only type service around. Not even the only Adobe service..
Free alternatives
Other companies, including Google, have also jumped into the online type serving arena. Google Fonts offers designers and web developers hundreds of typefaces in their library.
This service is popular, especially because its fonts are all open source and totally free. And while it is designed primarily to solve our online typography needs using similar technology to Typekit, it freely allows any of any of its fonts to be downloaded and used on the desktop with any application.
It's tough to fight against free, and so even Adobe with its Typekit offering, has also created its Edge Web Fonts, which is also free. This library has over 500 fonts, and cross agreements with Google so many (if not all) Google Fonts are included as well. It is run on a somewhat modified version of Typekit, and offers another great option.
So what are the problems all these new and exciting services have been trying to solve? Let's look at each in turn.
Problem 01: on the desktop
Publishing and design applications like Adobe's InDesign CC live and breathe their type design. Depending on how they are used, so do programs like Photoshop and Illustrator.
So traditionally if we wanted great typefaces to work with in these programs, we had to go out and buy expensive fonts (see above). Building a large library could very quickly get expensive. (It's also worth noting that from any high-end type foundry's point of view, the growing availability of free fonts cut heavily into their profits.)
Problem 02: on the web
Then there were the web issues over the last decade or more. The web was never designed with type in mind. It even took years before we had the paltry number of 'web safe' fonts assembled (and just how truly 'safe' they are is questionable in itself).
One of the most popular ways to get access to a decent range of typefaces for your web design needs required using Flash, which would embed the fonts you used. This solution was relatively easy and worked well for designers, but is no longer a full-spectrum option today.
A variety of other technologies were given a shot as well, though each came with their own set of complexities, limitations, and compatibility issues. CSS version two offered ways to embed fonts, but wasn't implemented well at the time, and not supported by all browsers. So devs kept looking for exotic solutions.
And we designers? Well, most of us took a big step backwards and 'cheated' by using rasterized images of custom font headlines. Really, this was a throwback to the earlier days of the web, before Flash. But this was all just stop-gap.
Using the old approach
Today, if your main use of type is for printed items, or any non-web applications, you can still continue to go up to digital type foundries and purchase type by either individual face, or by the entire family.
There are somewhere north of 2,000 typefaces offered in this Adobe library, and they can be used with both older and newer versions of either the CS or CC lines. This, we call old school.
Now let's go up to Adobe's Typekit.com site and you will see things are quite different. (Keep in mind that this is a different library than the traditional Adobe type, even if many faces/families are the same.)
Using the new approach
Typekit.com doesn't sell faces or fonts, it sells subscriptions. As of this writing there were five basic options: Trial, Personal, Portfolio, Performance, and Business. And as we begin to look at the various options, we start to realize that we're not in Kansas anymore. Things are getting complex right here in typeville.
While we used to just buy a typeface, we now have a number of decisions to make. Each package offer a different level of access, but both include access to the library's Desktop and Web licensed type.
The plans are billed annually, and are very reasonable across the board. Starting at free for the Trial version, and moving to $25, $50 and $100 for the main offerings of Personal, Portfolio and Performance, respectively.
Desktop fonts
These are, more or less, the type of fonts we were always used to, just the technology and licensing has changed. They can be used in any non-web projects with few limitations, but are not licensed for use on the web.
There are over 1,000 fonts in this library, and once you get the basic hang of it, you'll likely forget about the older way of doing things. That's right, no more hunting around for buried system Font folders or having to buy/run third-party utilities. And to answer a much asked question, yes, any fonts you download ('activate' would be a better word) will be available to all programs running on your computer.
The plans start with the Trial version (free) which offers a choice of 130+ fonts, up to 20 that can be synced at the same time. The Personal version bumps this to 50 fonts synced up at once. And the next two tiers offer 1,000+ fonts to choose from, with either 100 or 200 faces synced at the same time.
Web fonts
Web fonts are a very different animal. They are designed/offered specifically for use on the web, and with limited exceptions, are not for use on desktop projects (though I don't know if the licensing is as restrictive in that direction). There are over 4,200 fonts available in this library – a huge number.
And here is where things get hairy, er.. I mean interesting. When it comes to the web fonts Adobe is no longer giving us unlimited usage. Like a cab ride, the meter is running, and they are clocking things like how many websites you are using faces on, how many typefaces are used per site, and how many pageviews those sites are getting per month. Yeah, 'wow', huh? Are we just about ready to go back to rasterizing the dang type again and throw on Prince's 'Party like it's 1999'?
Alright, it's not really that bad, at least, depending on what plan you sign up for and what your real needs are. For example, if you are designing a site for yourself or just one client, Adobe is actually generous enough to allow you to choose from over 800 faces, and choose two faces to use on one website. All for free.
That's not terrible, and works if you only need a headline and body face. It also includes up to 25,000 page views a month, which frankly, if you are working at this level, good luck getting close.
And don't scoff at this option so fast. Combine it with what Google Fonts offers, and other free offerings online, plus judicious rasterizing, and you find yourself with a huge number of faces to choose from for free. And not to side-step Adobe's good will here, but if you were to open a Trial account for each of your clients individually (which makes sense for other reasons as well, see below), then your limitations here are much less.
Levelling up
The next level up is called the Personal account and ups your choice to 2500 fonts and 50,000 pageviews/month, both of which is just fine. But you may find that its limitation to just two websites and only five fonts per site a bit snug for your tastes.
Let's face it, the real fun comes when we up our ante to the more mainstream options of the Portfolio and Performance accounts. Her we get a whopping choice from over 4,200 fonts and, most importantly, unlimited websites and unlimited number of fonts per site.
Do remember that there are many practical limits still in place. Too many fonts on a site and things slow down, and design wise we don't want to create typographic vomit, right? So design wisely. Pageviews are limited to either 500,000 or one million per month. So again, for most practical applications there is no limitation here.
Putting these new fonts to work
So how do we actually use them? Let's start with the Desktop variety. The easiest ways to get to the Typekit library is either via the CC control panel's Font tab, or from any application that is Typekit aware. Now that most CC applications are Typekit aware, this is made pretty easy.
For example, run InDesign CC 2014 and you'll see the type selection interface that allows you to choose between your system fonts, other installed fonts, and also any activated TK fonts. But there is also an option to 'Add Fonts from Typekit'. Click on that and you launch the Typekit web interface.
Using the Typekit interface
The TK interface allows you to choose fonts by dialing in a great many parameters. The first one you are likely to choose between is Desktop Use or Web Use. Though you could also have both selected at the same time as well. There are the type classifications options (serif, san serif, script, etc.), and a wide range of property filters (like weight, width, contrast).
There is also a toggle for Headings and Paragraphs, which filter for faces that are well suited for headlines and body copy, respectively. Along the top you can see links that will take you to a listing of your Kits, Synched Fonts, and Settings.
When you select a font to use options come up for desktop use and/or web use. If you opt to use the font for the web, then a 'kit' needs to be created, alternatively, the face can be used with an existing kit. Why kits? Unlike the free type alternatives, TK uses fonts to control the licensing and regulate the number of sites that a face and account are using.
The next step in setting up for web use is to click on a small line that says 'Using fonts in CSS', which is found in the upper left of the 'Selector' section in each kit interface. Here you will find the CSS lines to be placed in your website code. Finally, don't forget to hit the 'Publish' button to get the fonts online and available to your site and its viewers.
All of this may sound a bit more complex than it really is. That isn't to say its all simple, as it isn't quite yet. For more help see some items on this page for a more detailed explanations. Neverwinter nights side quests 3.
Typekit and Muse
With all this typographic-availability we now have, it must be a great time for designers working on the web, right? I mean we Adobe Muse users must be kicking our heels together mid-air with joy, right? Not quite, because as it turns out, Muse doesn't actually work with Typekit. At least not yet.
In a conference session with Adobe staff, Stephen Nielson, Photoshop Product Manager, explained: 'Muse is a special case, in that fonts that you use for your local design also get published and served up in the live web page.'
Dani Beaumont, the Group Product Manager on Adobe Muse, then added: 'In the Muse case we do not currently have Typekit Desktop sync. Also the Typekit fonts available within Muse are specifically limited to the Edge Web Font library. We did the original Edge Web font integration in the 1.0 version of Muse, during the first months of Adobe's TypeKit acquisition. We're working with the TypeKit team now on the engineering effort for deeper integration.'
Real world uses
When it come to web use fonts there are two significant techie things to keep in mind here. The first is that type is no longer residing on the viewer's computer (i.e. web safe fonts), nor even necessarily being streamed from the same server that the rest of the website data is coming from (i.e. your server). Instead, the webpage code has a pointer directing the viewer's browser to an Adobe Typekit server (or Google Font server, etc).
The second thing is that if for any reason that type server being pointed to was unavailable, the web pages would still be served, but end up looking off, since regular system fonts would get replaced on the fly. So reliable type servers are critical to pages looking better than before, otherwise, they would actually end up looking worse than before this technology was in place. Fortunately, the resources of companies like Adobe and Google are quite vast. They are able to keep their server up-times extremely high, and good speeds with which the the data is served. Adobe actually provides a publicly available logging of the status of their TK servers.
Remember that TK faces never reside on your computer, so they can't be backed up, moved or installed on other computers like purchased fonts can. And can't be shared with your friends, co-workers or service bureau either. Google Fonts, on the other hand, can be.
Work for clients
One thing came to mind when I started thinking some of these new processes through, and the subscription model applied to websites. Let's say you, a web design studio, design a site for a client and use fonts linked to your design company's Adobe ID account.
Then let's say if for whatever reason, somewhere down the road that Adobe ID is no longer active. Well within a few weeks what will happen is that the sites you designed are going to start looking rather odd. Or at least not like you had designed and your (now former?) client signed off on.
And guess what? There is no way around this with the new way of doing things. As stated in Adobe's help pages: 'the site that was using that account for Typekit web fonts will display the text in the fallback fonts specified in the font stacks in that site’s CSS, or your browser’s defaults. So, the text will still appear, just in a system font.'
Best practice
What this means is that when you design a new site for a client, best practice would be to have them purchase their own Adobe Typekit account, thus they are responsible for paying for its annual fee. My first reaction to this was: 'That's crazy. Clients don't want that extra burden.' And they don't.
But on the other hand, if you purchase or otherwise admin their domain name, the same thing will happen in a year if you aren't there to pay the fee. Actually far worse, the site will just go 'poof'. So best practices will now mean making sure the client acts like a grown up and handles at least those two items themselves, in their own best interests.
What this means for working with various clients at the same time, each with their own TK account, is unclear. Are we to spend our days signing in and signing out of various client accounts? Well, probably not. The new automatic type replacements that work almost seamlessly with TK may allow us to work with our on TK account, and then streamline a transfer at the end. Maybe. I haven't haven't had the opportunity to test run any of this yet. Can any of you let us know? Obviously, the free services avoid these issues as no account is needed.
Adobe's response
Best Typekit Fonts
I put these points to the Typekit team and got this response. 'As you say, the designer can create an account for the client from the outset. This is a great solution as long as the designer isn't trying to manage different accounts for different clients (as you note).
'Alternatively, a designer would simply use their own Typekit account during design and development of all their client projects, and save the hand-off for last. The client (perhaps with assistance from the designer) would create a Typekit account at the end of the process and make a permanent kit to replace the development version. In the final build, the new kit ID would just need to be replaced everywhere the original kit ID is used [..] Neither approach is perhaps best for all occasions, but having a choice helps.
'Note that in any case, a completed website is best transferred to a client with a Typekit account of their own. When the designer keeps kits under their own account, they are accumulating all the collective pageviews, which could trigger overage charges. For a client expecting a lot of traffic to their site, it is far better for them to take that responsibility, and perhaps upgrade to a Typekit plan which supports the traffic and support levels which meet their own needs.'
Final thoughts
The truth is, type has become more powerful, and also far more complex. While TK is certainly the most cared for product/service out there, the other options like Adobe Edge Web Fonts, Google Fonts and other options are extremely useful. In five years, all of this is going to be so killer.
Here are some helpful and/or interesting links I came across while writing this article, and wanted to share with you:
Fonts.com teams with Google fonts to streamline their use in desktop apps, via their SkyFonts system: http://www.fonts.com/web-fonts/google
Google Font Directory offers all of the font files, including the source files: https://code.google.com/p/googlefontdirectory
Typecast.com teams with Google Fonts to use their Typecast sytem to preview/build HTML pages: http://typecast.com/fonts/google
A Wordpress plugin to allow the use of Google Fonts in WP pages: https://wordpress.org/plugins/easy-google-fonts/
Google Font Loader, for managing web fonts from multiple sources: https://developers.google.com/fonts/docs/webfont_loader
The absolute beginner’s guide to using Adobe’s new Edge Web Fonts on your site: http://thenextweb.com/dd/2012/10/01/the-absolute-beginners-guide-using-adobes-new-edge-web-fonts-site
A project to develop a new universal font, underwritten by BIC (yeah, the pen people): http://theuniversaltypeface.com/home (loads slowly)
Words: Lance Evans
Lance Evans is creative director of Graphlink Media. He has written books on 3D, and produced the 3DNY Seminars for Apple and Alias.
About Caneration
Related Articles
Exclude objects in Mograph cloner
Fixing the Photoshop CC 2019 Scaling and Undo Shortcut problem
How to find a good developer in shortest time?
How to download Synced Adobe TypeKit fonts?
How to batch render in After Effects?
Free 4K Studio Backgrounds!
How to create a Globe/3d world in Cinema 4D?
Diamond text in seconds! Fxfx Real Diamond is available now!
Software errors, solutions, tips and tricks page
How to render Matte/Shadow map in 3d Studio Max, Maya and Cinema 4D?
How to model wire mesh in Cinema 4D?
To render an object as wireframe in Cinema 4D can be easy but if you want to model that object in wire or if you are modelling a something like microphone head, you got challange.
When we first joined Adobe, we wrote that “this represents a huge step forward in bringing fonts to the web.” This turns out to have been something of an understatement—two years on, we’re changing the way you use fonts on your desktop as well.
Many of you have already signed up for early access to desktop font syncing, and it’s been great to hear so much positive feedback—not only about how easy it is to use, but also how it simplifies the way you use fonts between design and development.
Today, we’re thrilled to open up desktop font sync to all of our qualified customers. Read on to learn about who’s eligible and how to get started.
Choose from hundreds of fonts
We’ve profiled several different foundries on this blog who have already added their fonts to our selection available for desktop sync. We couldn’t be prouder of this collection, which currently includes over 200 typeface families and four times as many individual styles—and we’ll keep adding more to it.
Use them anywhere
When you sync fonts from Typekit to your desktop, they are cached locally on your computer. That means they’ll go anywhere your system fonts do—word processors, slide presentations, and, of course, any Adobe application. Our desktop license covers all the same terms of use you’d expect from a system default font, which means you can safely use synced fonts from initial design through final production.
Getting started with sync
Abode Font
Desktop font sync is available to customers with a paid monthly or annual Creative Cloud subscription or a Portfolio, Performance, or Business standalone Typekit plan that has been linked to an Adobe ID.
If you’ve already got one of the subscriptions listed above, then you have this feature turned on as of today. Jump right in and start syncing! (And if you’re new to this, we’ll be happy to walk you through it.)
Where Are Adobe Fonts Stored
Did you already sign up through the early access program? You don’t need to update anything today. Just keep rocking!
What’s next
Today’s a big day in Typekit history. We’re delighted to help you bring great type into all of your work, and it’s exactly the kind of seamless integration we hoped to accomplish when we joined Adobe. We’re also grateful for the foundry partners whose amazing work has been such a fundamental part of what we’re here to do. Supporting great foundries while putting type within reach of more designers—it’s wonderful to see this ecosystem take shape.
This isn’t the end of the road, either. We know you expect more from us, and we plan to keep exceeding those expectations. We’ll continue to develop new ways for you to access and use fonts everywhere you need them—as well as support our talented foundry partners.