November 26, 2013
Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. Our first theme was designed by Elliot Jay Stocks, and the second theme comes from designer Trent Walton.
It’s an exciting time to see CSS Zen Garden revitalized. For years it has demonstrated the power of CSS through a single CSS file. I believe that now, thanks to media queries, we are able to demonstrate that same power multiple times within a single file. Our layouts can change dramatically from viewport to viewport, and all we need is CSS.
Thrilled to see Typekit sponsor CSS Zen Garden, I wanted to pay tribute to the occasion by letting web fonts do most of the work in my Apothecary theme. Imagining labels on tonic and tincture bottles, I made my font choices:
- LTC Bodoni 175 by Lanston Type
- French Clarendon Ornamented & Grecian Light Face by Wood Type Revival
- Refrigerator Deluxe by Mark Simonson Studio
I wanted to have a wide range of eras represented: Bodoni goes back to the late 1700s while both Wood Type Revival typefaces come from the mid 1800s. I really like the inclusion of Refrigerator Deluxe, perhaps the oddball here, which takes its cues from the 1950s. It fits, yet creates an intentional confusion around where or when this thing comes from—which is exactly how I imagine one would feel after being handed a superlative-laden bottle of miracle cure from the local pharmacist.
On the more technical front, I put column-count and flexbox to use on the theme. Column-count allowed me to create wider sections while maintaining a sensible number of characters per line. Because most of the theme is one column, I used flexbox to move the design selection up on the page directly under the intro. I think it’s particularly helpful at the narrowest views—less scrolling to explore other themes.
File size is always a concern, and after Elliot went with no images and a sub-100k page load (darn good work), I knew I had to get serious. I focused my energy on optimizing the images as much as possible while retaining acceptable resolution. SVG didn’t work because the images were too detailed, so I went with 2-4 color PNGs. I also created the triangle shapes with CSS. Sure, it’s riskier on the browser compatibility front, but if you’re going to go for it, go for it in the Zen Garden. It paid off, because I ended up at 270kb for narrow views and 320kb for wider ones.
But that’s enough out of me. Take a look at the CSS file from my theme. Then, after you came up with 100 things you’d do differently, go and create your own theme. Happy gardening!
November 20, 2013
For more than a decade, the CSS Zen Garden has been a source of inspiration and education for web designers and developers. The project helped to catalyze the adoption and development of the modern standards-based web, paving the way for technologies like
@font-face and tools like Typekit.
Today, we’re proud to announce Typekit’s sponsorship of the CSS Zen Garden project. You can now create a kit and use those web fonts in your own theme submission; after your submission is accepted, the kit will be copied into a special Typekit account for csszengarden.com where we sponsor the pageviews. We hope that providing access to high-quality web fonts on the CSS Zen Garden will help to inspire a new generation of web builders.
In this post, Dave Shea, creator of the CSS Zen Garden project, will provide some historical background on the origins and significance of the project, and Typekit’s Bram Stein will explain how to get started using web fonts from Typekit in your own theme submission.
A decade of CSS design challenges
The CSS Zen Garden began ten years ago. Born in a time long before CSS-based layouts were the accepted way to build websites, it introduced a very simple idea that proved to be a powerful demonstration of what CSS enables: one single HTML file, redesigned hundreds of different ways just by including a different CSS file.
With that goal in mind, it also offered a design playground that facilitated creativity, thoughtful experimentation, and inspiration. Many designs in the site’s extensive archives were contributed by web designers earlier in their career, designers whose names and work you might recognize—Douglas Bowman and Mike Davidson of Twitter, Dan Cederholm of Dribbble, Ryan Sims of Rdio, along with Jon Hicks, Shaun Inman, Eric Meyer and many more. It has been continuously referenced by education curriculums, and designing and coding a submission remains to this day a popular challenge tackled by students new to the field.
Of course, our industry has experienced major change during the intervening decade. So for our tenth anniversary earlier this year, we relaunched the Zen Garden with an updated challenge: to show what can be done with modern web standards. HTML5 and CSS3 are now expected, and designs built to these new standards now have a home on the site, alongside hundreds of designs from an earlier era of the web.
Even as we work to encourage great design and best practices in CSS, typography still presents a challenge. If you’ve been around since the early days, you’ll remember when saving type as images was the only way of including advanced typography in your designs. CSS image replacement methods guided the early Zen Garden, but we’ve luckily come a long way since then.
Our industry has since crossed many of the barriers that prevented embedded web fonts in the past, but licensing still remains a thorny issue for an open project like this. Typekit is a great force for removing these hurdles and allowing web designers to get to the heart of what they do best, and I’m thrilled that the Typekit team at Adobe has come up with a method that will allow Zen Garden designs to incorporate real fonts legally, easily, and freely.
—Contributed by Dave Shea
Including Typekit in your CSS Zen Garden designs
Using Typekit in your CSS Zen Garden submission couldn’t be easier. Create a new kit using your own Typekit account and add the fonts you want to use. Then include the Typekit embed code as usual in your local copy of the CSS Zen Garden example HTML file.
When you are ready to submit your design, you need to copy your Typekit Kit ID to the CSS file in your submission. This will ensure that, if your submission is approved, Typekit fonts will continue to work and font usage won’t be charged to your personal Typekit account. To do this, copy the Kit ID (found in the Kit Editor, under “Embed Code” in the upper right corner) and paste it into a new comment near the top of your CSS file.
/* TYPEKIT_KIT_ID: */
Replace with your Kit ID. For example, if your Kit ID is “vhu0zxe” the resulting comment in your CSS file should be:
/* TYPEKIT_KIT_ID: vhu0zxe */
Once you’ve added the comment you are ready to submit your design to the CSS Zen Garden. If you have any questions about using Typekit with your CSS Zen Garden submission, don’t hesitate to contact firstname.lastname@example.org.
—Contributed by Bram Stein
Ten more years of web design inspiration
We’re excited to see where the next ten years of the CSS Zen Garden and the evolution of the web platform will take us. To help inspire you and demonstrate what’s possible with web fonts in CSS Zen Garden themes, Typekit is commissioning three new themes that we’ll be introducing on the blog over the coming weeks. We’ll begin with a post on the first Typekit-commissioned theme tomorrow. For a sneak peek, head over to the CSS Zen Garden.
September 16, 2013
If you’ve been thinking about signing up for Typekit, now is a great time to do so. Join at the Performance or Business plan level (or upgrade your existing plan), and we’ll send you a free copy of Issue #6 of 8 Faces, the typography magazine run by yours truly.
8 Faces is a magazine about type and everything surrounding it. Each issue, the magazine asks the question, “If you could use just eight typefaces, which would you choose?” to eight leading designers from the fields of print, web, illustration, and of course type design itself. These answers are turned into beautifully-designed spreads that show off those typefaces, and are paired with in-depth interviews about the designers’ lives and work.
The 8 Faces team prides itself on producing a printed magazine that you’ll want to keep on your bookshelf—print is most definitely not dead! And with each issue featuring an article from a member of the Typekit team, 8 Faces is a perfect accompaniment to a Typekit subscription.
We’ve set aside a limited number of copies for this offer, and will honor it for as long as supplies last. So head on over to our Plans page to sign up or upgrade, and the latest issue of 8 Faces will be on its way to you soon!
August 8, 2013
Today, Adobe is announcing an early access program for the new file and font sync capabilities of Creative Cloud. We’re beginning to roll them out in limited batches to Creative Cloud and Typekit subscribers as we continually monitor the quality of the experience.
To sign up for the early access program, fill out the Creative Cloud early access request form. Make sure to use the email address associated with the Adobe ID that you use to log into Typekit. If you haven’t yet linked your Typekit account with an Adobe ID, you’ll need to do that first.
Once you are approved for early access, you’ll receive an email from the Creative Cloud team confirming that the features are activated for your account. At that point, grab the latest version of the Creative Cloud desktop app, log in with your Adobe ID, and select the Fonts tab to sync fonts and begin using them in any of your desktop applications.
There are a few things to keep in mind when you sign up for early access:
- Early access customers will be activated in batches over the coming weeks. File sync and desktop font sync features are not yet enabled for everyone.
- You must have an Adobe ID to sign up for early access. If you have a standalone Typekit subscription, you must have an Adobe ID that is linked to your Typekit account in order to sign up.
- You’ll need a paid Creative Cloud membership or a Portfolio, Performance, or Business Typekit plan to sign up for early access. Customers with a Typekit Trial, Personal, or Enterprise plan don’t have access to desktop font sync.
- All Creative Cloud and Typekit plans will have a limit on the number of fonts a user can sync to their desktop each month, similar to the pageview limits for Typekit web fonts. These limits are still being finalized and won’t be enforced during the early access period.
We heard from many of you who want to know exactly which fonts on Typekit will be available for desktop use via the sync feature. We’ve updated this help document with a complete list of the foundries and faces that will be initially available.
If you have any questions or comments, drop us a line at email@example.com. We’re excited to share this feature with you, and we can’t wait to hear what you think.
June 28, 2013
We’re making it easier than ever to search typekit.com for fonts by adding OpenSearch support to our homepage. Now you can add Typekit search functionality directly in your browser and search for fonts from anywhere, not just the Typekit search box (though it’ll still be there on our Fonts page).
OpenSearch works in slightly different ways for each browser. If you’re on Firefox, visit typekit.com, click on the search engine icon in the address bar, and you should see the option to ‘Add Typekit.’ Once added, you can use this option to search directly for fonts by name on Typekit.
In Chrome, just type ‘typekit.com’ in the address bar, and a note will appear on the right side of the bar, prompting you to press tab to search.
Press tab, and then proceed to search for font names directly from the converted address bar.
The results page will feature fonts matching your search terms, as well as any matching lists or articles from the blog.
Thanks to our engineer Nelson Crespo for pulling this together!
May 6, 2013
Update: The desktop font sync feature is now rolling out in limited batches. Read our update to learn how to sign up for early access.
Great typography is critical to great design, so great typefaces should be easily accessible everywhere they’re needed. Typekit has spent the last four years bringing type to the web, and today we’re giving you a sneak peek at the next step in our evolution: desktop fonts and web fonts together in a single subscription.
We’ll be making fonts in the Typekit library available for desktop use, starting with 175 font families from 7 top-tier foundries. You’ll be able to sync them to your desktop and use them in all your applications for web mockups, print design, word processing, and more.
Here’s Typekit’s own Ben Welch to show you how it works:
Desktop font syncing is a part of the next major update to Adobe Creative Cloud, which was just announced this morning and will launch in mid-June. (Watch the keynote here.) Desktop fonts will be included with Typekit Portfolio, Performance, and Business plans, as well as paid Creative Cloud subscriptions.
In the coming weeks, we’ll be publishing in-depth explorations of the typefaces coming from each participating foundry partner: Adobe, exljbris, FontFont, Mark Simonson Studio, ParaType, TypeTogether, URW++, and Dalton Maag. Keep an eye on the blog!
February 27, 2013
We are pleased to announce that, starting today, Typekit is available in French. Over the last several months we’ve worked hard to translate and localize our user interface, touching on details from font browsing to account management. We’re also rolling out new homepage designs in both French and English, with the French version featuring type from Typofonderie.
If your browser or operating system’s default language is set to French, you should see the French version of Typekit automatically. If you’d like to switch languages at any time, just look for the “Change Language” links in the footer of any page, and click on the language you prefer.
In addition to localizing our user interface, we’ve added French-speaking representatives to our support department. Customers can reach these representatives via email at firstname.lastname@example.org or via Twitter at @typekit_fr.
What you’ll see en français
While we’ve worked hard to build a great experience for our French users, there are some small differences between the English and French versions of Typekit that we’d like to call out.
- Lists are not yet available in French, and so have been hidden from our site navigation on the French site. French users will still be able to link directly to a list via its URL, but the text will be displayed in English.
- We’re unable to offer our full-text search feature to non-English users at this time. French users will, however, still be able to search for fonts by name.
- Finally, sample text and web font specimens are not being translated.
Vos remarques, s’il vous plaît
We’re excited to welcome French-speaking users into the Typekit community, and will continue to develop features in all supported languages as quickly as we can.
Is there anything you’d like to see next? Spot any oversights? Please don’t hesitate to contact us with your thoughts on how you’d like this site to grow! We look forward to seeing this new branch of the Typekit community take shape.
October 23, 2012
We have added a new list to Typekit: code fonts. These are perfect for code samples, live editing, and readme-style documentation. Included among the tried and true members of this list is a handsome newcomer, Adobe’s own Source Code Pro.
Lists are a great way to browse for fonts, especially if you aren’t sure what you need. Use them to generate ideas or learn more about the fonts in our library. Looking for a list we don’t have? Suggest one in the comments.
October 17, 2012
Back in January of 2010, Typekit released samples of all our fonts in every platform and on every browser we support. Today, we’re announcing an update to these browser samples which adds new browsers, a new look, and a new approach to browser updates.
Browser samples are a great way to evaluate the rendering quality of a font on different platforms and browsers. As we’ve discussed in the past, there are many factors that can affect font rendering. Some fonts are designed for use at large sizes while others do well when set small. When choosing a font, it’s helpful to be able to check the rendering across the major browsers and platforms without having to publish a kit and make a test page first. Browser samples make this possible.
Since we first launched browser samples, the browser landscape has changed quite a bit. Originally, Chrome was the only browser on a rapid and automatic upgrade cycle. Today, most browsers are releasing updates frequently and automatically, and the ones that don’t yet are moving in that direction. As such, we’ve updated our collection of browsers to reflect this new reality: we are now taking screenshots in the latest released version of each browser, and we’ll be keeping the browsers up-to-date over time. This means that we’ll also be re-taking the browser samples on a regular basis, so that you’re always seeing accurate and up-to-date rendering. Screenshots will also continue to be available for older versions of IE, because they’re not automatically updated and continue to see a meaningful amount of use. If you’re curious about the precise browser version that a particular screenshot was taken in, check out the version information at the bottom.
We’ve also updated the look of screenshots to be more useful. We now include additional font sizes — from a tiny 10 px up to a headline-sized 72 px — so that you can more accurately assess the rendering at a size near your target. We’ve also removed the underlines from our samples, since they were distracting and not very useful.
To check out the newly updated browser samples, just visit any font detail page (like this one for the lovely Freight Sans) and click on the Browser Samples tab. Then select a variation and choose from one of the OS and browser options in the dropdown menus.
September 24, 2012
We will not be able to offer Monotype fonts for the foreseeable future; please read the Monotype fonts not coming to Typekit as announced blog post for more information.
The original blog post, while no longer relevant, is available below.
That’s why we’re very happy to announce that we’ve partnered with Monotype Imaging to offer some of their best fonts on Typekit.
Everywhere you go in the world today — whether you realize it or not — you see typefaces from Monotype. Soon, we’ll be adding over 1,000 of those fonts to our service, available as an upgrade to any Typekit plan. That means you’ll have access to some of the world’s most historically important fonts, including the complete families of Helvetica Neue, Avenir, Univers, ITC Garamond, Frutiger, and many more.
We will also be offering the Adobe Originals type collection via the Monotype Fonts.com web font service, with all the features and functionality they offer.
It’s a remarkable partnership, and we couldn’t be happier about it. As we get closer to launching, we’ll have more details to post here on our blog — so stay tuned.