web_type_west_680x300px

It’s 2014 and we are back on the road with the Typekit pop-up library. Our first stop will be Web Type West in Vancouver, Canada, tomorrow February 1st. Web Type West is a one day designer/developer conference organized by Dr. Shelley Gruendler of Type Camp. We’re excited to partner with her team on presenting the “many different aspects of web typography: how to use it, how to choose it, and how it works.” The speaker line up is a cohesive list of individuals who’ve contributed to shaping typography on the web today including Stephen Coles, Zara Evans, and André Mora among many others.

If you are attending the conference, please stop by the library and say “hi.” The Typekit pop-up library is traveling far and wide this year, so keep an eye on the blog for upcoming events!

* * *

If you think Typekit’s pop-up library would be a good fit for your event, or have suggestions of books that you’d like to see in the library, please get in touch with us through support@typekit.com.  

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";  
}

Voilà!

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, danielmall.com.

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.

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

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.

/* 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 support@typekit.com.

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