Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. With previous themes from Elliot Jay Stocks and Trent Walton, today designer Dan Mall presents our third theme, Garments.

Before I became a designer, I worked in retail for years. Through high school and college, I worked at and managed departments for subsidiaries of Gap Inc., Foot Locker, The Limited, and more. One thing that constantly impressed me was the incredible art direction of the apparel’s graphic design: hangtags, labels, packaging… the stuff only the buyer sees.

Garment tags
Garment hangtags

One of my favorite pairs of jeans has some beautiful printing on the inside, and I vowed to one day create a design influenced by this lovely style:

Detail on inner jeans tag

Today is that day. Introducing Garments, my CSS Zen Garden theme.

Garment theme for CSS Zen Garden

To carry the spirit of this design, I turned to Dalton Maag’s Effra, a modern geometric sans serif that surprises with soft and humanist design details. I was looking for something utilitarian but not vanilla, and, with more than its fair share of personality-filled glyphs, Effra fit the bill quite nicely.

Now that we have such wonderful options for serving great typefaces on the web, the days of image replacement are all but gone. That’s good news for the progress of a speedier web, but one of the benefits of image replacement is the ability to modify the text without changing structural markup. As an example, check out one of my favorite CSS Zen Garden themes: This is Cereal, by designer/developer Shaun Inman. In order to fit conceptually, his images include headlines like “One bowl away from enlightenment” instead of the original text of “The road to enlightenment.” Genius!

I wanted to do the same, but since I’m not actually replacing anything, how could I thematically “style” the headlines without altering the markup? Enter generated content.

My first thought was to generate the content that I wanted using :before or :after and then hide the original text with display: none;. No dice; when you hide the original element, you can’t unhide content generated from said element. But, there’s one exception: the visibility property. If you set the original element’s visibility to hidden, you can “unhide” the generated content by explicitly setting the visibility to visible.

My final code for the headings ended up looking something like this:

.preamble h3 { 
  visibility: hidden; 
.preamble h3:after { 
  visibility: visible; 
  content: "A Fashion-Forward Future";  


The other big consideration for me was optimizing graphics, especially since Elliot and Trent each did such a great job creating beautiful and fast-loading themes. Especially because the art direction of my theme lends itself to simple icons, I thought SVG would be a great way to go. I created an SVG sprite sheet and ran it through my usual SVG workflow to get the file size as small as I could and also to generate some fallback PNGs.

Well, without further ado, help us welcome this new CSS Zen Garden + Typekit collaboration and get cracking on your very own version!

Dan Mall

Dan Mall is the Founder & Design Director of SuperFriendly, a design studio that makes brave sites and apps for screens of all sizes. Dan is the co-founder of Typedia and The Businessology Show. He writes about design and other issues on Twitter as @danielmall and on his site,

tim's talk aea 2013

We’re excited to join An Event Apart in San Francisco this week, with a talk given by our Type Manager Tim Brown and the Typekit pop-up library. Tim’s talk is titled “Universal Typography,” and intends to “show us how to practice typography in a way that is equally universal.” Tim is among the first speakers on Monday, so you can catch him before heading to lunch.

While on your lunch break, come peruse the Typekit pop-up library! We’ll be located outside the main conference room, where the registration tables were set up on Sunday. In addition to our ever-growing, handpicked collection of books, we have copies of 8 Faces, t-shirts, and pins to give out. Stop by to say hello and check out a book you’ve been eager to encounter in person.

New books in the library include:

The Elements of Content Strategy
by Erin Kissane

A Book Apart authors take on important topics, distilling the essentials down into beautiful little volumes you can slip into your bag for reading and reference anytime, anywhere. Erin Kissane’s The Elements of Content Strategy is a favorite; the last read left me thinking about the importance of how writing serves your readers and finding your (blog’s) own voice. — Liz Galle

Pretty Pictures by Marian Bantjes

Marian Bantjes’s work doesn’t fall into one spectrum so much as it spans multiple design spectrums. Her work incorporates graphic and logotype design alongside textile and pattern design, weaving intricate patterns that ultimately work in favor of the typographic elements. There is, very honestly, no one doing the kinds of things she is doing today. Pretty Pictures is a catch all catalog of her work — some work is fairly straightforward logotype design, and some of it questions the limits of typographic design. Her more intricate designs certainly call to mind Middle Eastern pattern-making as well as classically intricate calligraphic detailing. This book is less about finding a theme amidst Bantjes’s work, and more about being consumed by the sheer breadth of her talent and vision. — Ben Trissel

A Field Guide to Typography by Peter Dawson

Forms in Modernism by Virginia Grace St. George Smith

Designing News by Francesco Franchi

Emigre No. 70 The Look Back Issue by Rudy VanderLans


You can view a full list of the available books in our previous blog posts on Brooklyn Beta & Ampersand. We are looking for more to add to our library, too, so please send us your suggestions.

If you think Typekit’s pop-up library would be a good fit for your event, please get in touch with us through

In this week’s sites we like, we’re going to Vassar College! We’re not ready to declare our major just yet, so let’s see what’s going on in a few different departments.

Vassar Biochemistry department homepage

Biochemistry starts out innocuously enough—with just six organic elements involved, how complicated can it really be? Well, take a look at how just one typeface, Freight Sans, is used on this website, looking cohesive but with enough variety in size and weight to establish clear hierarchy and meaning. You don’t need a truckload of elements to make something live and breathe—but you do need to know what you’re doing to make it work smoothly, as it does here.

Vassar Urban Studies department homepage

Pragmatica looks lovely up in the bold header on Vassar’s Urban Studies homepage, with lighter weights used in the clean sidebar navigation. In body text, the thicker texture of Freight Text gives a satisfying gravity to class descriptions and department information. These typefaces each carry their own distinctive voices, but on the page together they don’t crowd one another out.

Vassar Hispanic Studies department homepage

We love the look of Chaparral just about anywhere, and it suits the Hispanic Studies homepage perfectly, giving a literary flavor to the artfully composed page. Freight Sans balances this nicely in the header text and navigation, with a muted color palette working subtly to guide your clicks.

And if you’re interested in how the school serves similar content to different sites with unique designs, read more on the Vassar Web Design blog.

That’s it for this week; share sites you like in the comments!

We’ve got a few new fonts we’d like to share with you today, as well as an update to one of our old favorites. You’ll find all of these in our font library; go ahead, play with the Type Tester, see which weights and styles best suit your content. We think you’ll love using these.

Tenso type specimen
Tenso Black and Regular

Fresh from exljbris, the sans-serif Tenso makes for some wonderfully bold headlines that pair well with a number of more delicate serif faces. The rounded shapes of the letters give this typeface an especially playful edge at any weight.

Hamilton Wood Type Slab Columbian type specimen
Hamilton Wood Type Slab Columbian

The difference between Hamilton Wood Type’s HWT Slab Antique and HWT Slab Columbian is subtle; Antique’s slabs are squared off in the traditional style, while those in Columbian are very slightly rounded. Both variants look great in big sizes and add a distinctive character to your work.

Dapifer type specimen
Dapifer Semibold and Dapifer Light Italic

Dapifer, by Darden Studio, is a flexible slab serif suitable for a number of different editorial settings—and with 12 different weights and styles to mix, you can cover a lot of ground with this typeface.

League Gothic type specimen
League Gothic. Text for all specimens from Project Gutenberg.

League Gothic, by open-source type foundry The League of Moveable Type, is a reliable favorite on Typekit, and we’ve just released some improvements to the typeface—namely, hinting adjustments to resolve some rendering issues in Chrome. If you’re already using it in one of your kits, just republish the kit, and the updates will carry through to your sites.

We hope you enjoy using these new typefaces. If you’ve never given Typekit a try, sign up (it’s free!) and upgrade to a paid plan whenever you’re ready.

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:

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.

Screenshot from Apothecary theme

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.

Apothecary theme demonstrated across several screens

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!

Trent Walton

Trent Walton is founder and 1/3 of Paravel, a custom web design and development shop based out of the Texas Hill Country. In his spare time, he writes about what he learns on his blog and on Twitter. Also notable, Trent’s wife has put him on a font allowance.

It’s playtime in this week’s sites we like, with games and activities for the kids we know (and our own inner children).

Schachschule screenshot

Kids who love puzzles and games might be attracted to chess early on, and with some help from the Chess School (Schachschule), kids near Zurich, Switzerland can begin to learn real strategy behind the game. The school’s website is fun to peruse, featuring crisp Omnes for the body text, Myriad and Proxima Nova Soft in headers and navigation, and Kremlin for a handwritten twist on sidebar headings.

Children's Museum of Pittsburgh screenshot

From a playground made of packing tape to the original set from Mr. Roger’s Neighborhood, the exhibits at the Children’s Museum of Pittsburgh are sure to set your imagination alight. Headings and navigation on the neatly organized site are set in Futura, which feels almost playful in this context.

Grumpy Lobster screenshot

Look no further than your iPad for a new kids’ book: Grumpy Lobster offers quick iPad downloads for a series of books by author and illustrator Jake Croft. Museo Sans Rounded is a clear, friendly choice for the website copy.

That’s it for this week; share sites you like in the comments!

Following our sponsorship of CSS Zen Garden, we’ve commissioned three CSS Zen Garden themes from different designers using fonts from Typekit. The first theme comes from our own creative director, Elliot Jay Stocks.

I’ve named this first theme Screen Filler, and in direct contrast to previous Zen Garden themes and a lot of my own previous work, it’s intentionally devoid of any imagery. Instead, I’ve focused on simple, bold blocks of color, using semi-transparency to reveal some of the underlying proportions of the grid.

Elliot’s CSS Zen Garden theme

Perhaps most importantly, I’ve tried to design something that keeps the type (a few choice weights and widths of TypeTogether’s wonderful Tablet Gothic) pleasantly readable at any size with a technique I’ve used on a number of recent projects: increasing the size of the type with the width of the browser. This might sound too painfully obvious to state, but I’m surprised by how few responsive sites use this technique. It’s a nice way of avoiding max-width declarations—which, in my opinion, can often stand in the way of future-proofing our sites—and it feels like a more all-encompassing adoption of what responsive web design can offer.

I’m obsessed with achieving optimal measure (line length), and it’s possible with just a few simple media queries. Here’s an example of what you can find in the CSS file:

/* 700 and up */	
@media screen and (min-width:700px) {
    body { font-size:90%; }

/* 800 and up */	
@media screen and (min-width:800px) {
    body { font-size:100%; }

/* 900 and up */	
@media screen and (min-width:900px) {
    body { font-size:110%; }

And so on and so forth. The important thing here is that the break points and size changes are not based on anything mathematical—just when it feels right.

Here are three different widths, captured on a 27″ monitor:

Three widths

Of course, there are some arguments against this technique: perhaps you don’t want to have massive type when you expand your browser to its maximum width on your 27″ iMac. And that’s okay! The CSS Zen Garden is about showing what’s possible—what we can do with web design; not necessarily what we always must do.

I love that the Garden is a playground. It was hugely influential on me back in 2003 when I started getting into web standards, spending hours of my time pouring over the designs on the site and all of those that were lovingly immortalized in Dave’s book. It’s been a great honor to provide a theme myself, and I can’t wait for you to see the incredible themes our next two designers have been working on!

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 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.

CSS Zen Garden header

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.

Typekit embed code screenshot

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.


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

—Contributed by Bram Stein

Ten more years of web design inspiration

Preview of CSS Zen Garden theme

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.

Sometimes you just want to really work your hands into something—whether it’s something you can eat at the end of the process, wear proudly, or curl up under. This week’s sites we like highlight a few of those handmade creature comforts: warm food, good shoes, and a cozy quilt.

Two Please website

From husband-and-wife team Brian Hoff and Kathleen Watkins, Two Please shows off tempting recipes with luscious photos and some great type. FF Nexus Serif and Sans, both ported over on a license from FontFont, balance each other nicely between cheerful sans headings and the delicately seriffed body text, and Brandon Grotesque looks fantastic in the header navigation.

Nick's Custom Boots website

In operation out of Toronto for the past forty years, Nick’s Custom Boots wastes no time getting to the point: if you’re looking for quality custom-made boots, you’re in the right place. You can also see two of our quality fonts on display on their store website: Bree, somewhat unusually placed as the body text font here, invokes the warm rounded elements of handwriting, while JAF Bernino Sans Condensed keeps the headings and navigation clicking along neatly.

Simply Brown website

If you’re ready to dive into your own crafty project, Eileen Brown offers us Simply Brown, whose no-nonsense quilting kits and straightforward directions will turn you into a quilter in no time. Type on the site is likewise clear and easy to read, with body text in JAF Bernina Sans and headings in Kepler Std Semicondensed. Read more about the type choices at Fonts In Use.

Well, if you didn’t have plans for this weekend already, that should get you started. That’s it for this week; share sites you like in the comments!

Froont, a browser-based tool for designing responsive websites, has partnered with us to make Typekit fonts available in its intuitive service. Now, Froont users can add Typekit fonts to their designs by simply picking fonts from a menu.

This integration makes it easy to bring the quality of Typekit fonts into the sophisticated, web-native designs you can achieve with Froont’s text and layout tools.

Take Froont for a spin and let us know what you create!

Do you run a platform that would benefit from a Typekit-powered web font integration like the one described here? Drop us a line at to learn how to get started.