We’re back with the new year, and delighted to round up a new batch of sites that recently caught our interest—this week, with some special attention to a few sites that give us a glimpse into other people’s lives, stories, and thoughts, and a bit of our own cultural mythology.

Indigy screenshot

Indigy presents a lovely space for a powerful purpose: to share stories from cultures around the globe at risk of being forgotten. Freight Sans and FF Tisa are alternated for both body and header text here, and make for a thoughtful pairing that performs well for the longer blocks of text throughout the site while keeping navigation tidy.

Medium screenshot

It’s already evident to us how dearly the folks at Medium care about type on their site, and we love the recent redesign. The calligraphic shapes of Freight Text immediately pull us in, a great choice for long-form reading, with navigation and other elements in clear JAF Bernino Sans to make the whole experience feel completely effortless.

American Imagery Bank screenshot

Keep an eye on the American Imagery Bank for updates to their fascinating catalog of the iconic images that define the American identity, rendered beautifully in woodcuts. We love the type choices here, too, with the banner in Refrigerator Deluxe, headers in classic Futura, and body text in nostalgic SchoolBook.

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