Fast Company’s fantastic new fonts

In September 2011 Fast Company introduced three new typefaces to their print publication. Kaiser, Zizou Sans and Zizou Slab were all commissioned as part of a design overhaul.

In September 2011 Fast Company introduced three new typefaces to their print publication.

Kaiser, Zizou Sans and Zizou Slab were all commissioned  from Commercial Type by Fast Company’s creative director Florian Bachleda as part of a design overhaul. Co. Design, one of the magazine’s online counterparts launched their redesign four months later, using specially hinted versions of Kaiser and Zizou Slab to great effect.

Kaiser:

New Fast Company fonts

Conceptualised by Christian Schwartz and Florian Bachleda as a hybrid of a condensed sans they discovered in an old German specimen book and Paul Renner’s Plak, it was expanded into a full range of widths by Vincent Chan.

New Fast Company fonts

New Fast Company fonts

New Fast Company fonts

Zizou Sans:

New Fast Company fonts

New Fast Company fonts

Christian Schwartz gives us a glimpse into his Zizou Sans design process:

It originally began as my attempt to draw Antique Olive from memory, but ended up with its own distinct personality. I surprised myself with what I remembered correctly (i.e. the swing to the top of the bottom bowl in the lowercase a, and the distinctive top of the lowercase t), but was impressed by just how wrong I was able to get certain things. So much for my photographic memory for type!

Zizou Slab:

New Fast Company fonts

Schwartz on the design of the slab serif version:

I decided to start from the simplest place I could – snapping rectangular slabs onto the sans with a minimum of contrast – to see what that would yield before I tried to be any more clever with the design.

New Fast Company fonts

Almost too easy!

New Fast Company fonts

New Fast Company fonts

New Fast Company fonts

I always find it fascinating how a font looks exponentially more interesting and lively seen in use compared to a plain specimen, don’t you think?

Snooping web fonts made easy

Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy.

WhatFont is a clever little script by Chengyin Liu, a Computer Science student at University of Illinois. You add the bookmarklet to your web browser and once activated it tells you what fonts are used on a web page by hovering over the text in question.

WhatFont bookmarklet

But wait, there’s more!

WhatFont bookmarklet

When you click, a little window opens up with information about the font stack, size, line-height, colour and even the web font service provider. Sure, you can find out all you need to know about fonts on a web page by inspecting the code with Firebug or the likes, but the WhatFont bookmarklet makes font snooping super easy. And hey, if you want to tweet about the font discoveries you make, there’s a button for that too…

Good Google web fonts

Having trouble finding the best Google web fonts for your next website design? Chad Mazzola wants to help you out…

Google web fonts is a great initiative providing a simple and free way of adding real fonts to your web design projects. I have been using their service for a while and the only complaint I have is that finding the right font among the 400+ typefaces can be challenging. Apparently Chad Mazzola of Cambridge, Massachusetts (not England) has encountered the same problem, so he has kindly taken it upon himself to help us out.

There are currently over 400 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that deserve a closer look.

Beautiful web type is a growing showcase of the Google web fonts Chad finds most deserving. You can click each specimen to find the font in Google’s directory.

Google web fonts

Google web fonts

Google web fonts

Nice site: Cast Iron Design Company

Cast Iron Design Company has not forgotten the reason we designers got all excited about the prospect of web fonts in the first place: the ability to use real fonts for typographic design instead of replacing text with images…

I don’t often feature websites on here. I guess the whole web font “revolution” of the last two years has sent designers into a flurry of experimentation and the results are often a little underwhelming.

People like Jason Santa Maria and Trent Walton have been nudging us in the right direction, showing us the power that this culmination of typographic awareness, innovation and browser support holds. As we all know, with great power comes great responsibility, and in exploring this new frontier, best practices have been something of a grey area.

But hey, let’s not forget the reason we designers got all excited about the prospect of web fonts in the first place: the ability to use real fonts for typographic design instead of replacing text with images!

Without analysing the design of Cast Iron Design Company‘s website, I simply want to commend them on taking advantage of this ability. The design duo from Tucson, Arizona has made liberal use of web fonts (via Typekit) and CSS3 techniques throughout.

I was a little disappointed though, to find that the header design (which differs from page to page) makes use of image replacement instead of real fonts. Come on guys, you have taken it this far, now how about those headers?

*throws down the gauntlet…*

Cast Iron Design Company

Cast Iron Design Company

Cast Iron Design Company

Cast Iron Design Company

To see it for yourself, go to Cast Iron Design Company.

Web Typography for the Lonely

Web Typography for the Lonely is an ongoing collection of experiments and writings on, you guessed it, web type. Each entry features a demo and write-up explaining how the result was achieved.

Do you find your relationship with typography more fulfilling than any other? Do you remember complex lines  of Javascript off by heart but forget your best friend’s birthday? Do you feel that CSS3 just may be your soul mate?

If you answered yes to any of these questions the chances are you may end up lonely… but don’t despair, there’s a website for you: WebTypographyfortheLonely.com

Web Typography for the Lonely is an ongoing collection of experiments and writings on web typography and the possibilities of standards-based web design. It aims to inspire the web community by pushing the boundaries of what is both possible and practical in web standards in a manner that is compelling and exciting to the visually-minded creative.

Web Typography for the Lonely

Created and maintained by Baltimore based designer Chris Clark, each entry features a demo and write-up explaining how the result was achieved. Check it out!

100th post and 2011 sign-off

This is Typedeck’s 100th post since launching in June this year – a great milestone and a good time to sign off for 2011. Thanks for all the support and positive feedback so far!

Hello friends. This is Typedeck’s 100th post since launching in June this year – a great milestone and a good time to sign off for 2011.

Typedeck has given me the opportunity to explore typography in a new and more intensive way than ever before. I have learned a lot in the past few months and best of all is I am applying this learning to my own design work.

Thanks for all the support and positive feedback so far! Have a fantastic festive season and a blessed Christmas.

Here’s to resuming Typedeck in 2012 with new vigour.

– Imar

To end off the year I have just thrown together a few random bits and pieces of interest. Click on the images to visit the source:

A free font based on the style of lettering seen on Cassandre posters:

Typedeck 100th post

Lettering by Astronaut Design:

Typedeck 100th post

From pilllpat’s Flickr photostream:

Typedeck 100th post

Two items from the Flickr photostream of junkyard.dogs:

Typedeck 100th post

Typedeck 100th post

Type specimen poster from a series featuring Changethethought studio’s  favorite typefaces:

Typedeck 100th post

Mattel Electronics Football from Corey Holms’s Flickr photostream:

Typedeck 100th post

Some smokey lettering by Pablo Alfieri:

Typedeck 100th post

Explore Fontdeck’s typographic advent calendar:

Typedeck 100th post

Hot lettering by Studio Muti:

Typedeck 100th post

Editorial illustration by Telegramme Studio via Black Harbour:

Typedeck 100th post

Poster from Evajuliet’s Etsy store:

Typedeck 100th post

LetterMPress app for Mac and iPad:

Typedeck 100th post

Cover design for The New York Times Magazine Photographs:

Typedeck 100th post

Detail from Old Faithful Shop identity design by Ptarmak:

Typedeck 100th post

Time lapse video of Daniel Cassaro’s (Young Jerks) mural for the Ace Hotel in New York via Xheight LA:

Typedeck 100th post

MailChimp’s Voice & Tone styleguide site via Co. Design:

Typedeck 100th post

Detail from the Tom, Dick & Harry identity by Mike McQuade:

Typedeck 100th post

From Kyle Read’s inspiration Tumblr:

Typedeck 100th post

And finally, is there a new Tumblr logo in the works?

Screenshot of their maintenance page:

Typedeck 100th post

Trent Walton pushes the boundaries of web type

I like Trent Walton’s blog. He is clearly a thinker, but more importantly, he is also a doer. Based in Texas, Trent designs a unique look for each of his blog posts and demonstrates the exciting possibilities of what can be achieved in web typography through a combination of CSS and Javascript. And yes, of course the layout is responsive!

Here are some screen shots of his latest entries, but to experience all the little surprise details first hand you will have to go to trentwalton.com and snoop around. For the richest experience, use a Webkit based browser like Chrome or Safari.

Trent Walton

Trent Walton

Trent Walton

Trent Walton

As an aside, take a look at the cool folding effect Russ Maschmeyer put together on Typekit based on the above post.

Trent Walton

For more of Trent Walton’s work, take a look at his web design agency Paravel. Besides client projects, they create some awesome and useful Javascript tools for web typography like Lettering.js for down-to-the-letter control and Fittext.js for scalable headlines that fill the width of a parent element.

The curious case of the missing canvas: How typographic scale will save design

For the last few days I have really been trying to wrap my brain around the concepts of scale and ratio in design and specifically typography. The intention of this post is to continue the conversation on these topics…

For the last few days I have really been trying to wrap my brain around the concepts of scale and ratio in design and specifically typography. I am pleased to say that a few things have really snapped into place for me. Much has been written about these topics, so the intention of this post is simply to continue the conversation and document a few ideas that I find most helpful or interesting.

Constraints

To set the scene I would like to quote Charles Eames:

Here is one of the few effective keys to the design problem: the ability of the designer to recognize as many of the constraints as possible (and) his willingness and enthusiasm for working within these constraints

Yes, surprising as it may sound at first, constraints are the designer’s best friend. Real problem solving can only begin once you are familiar with the boundaries set by a particular project. Most often I find that designer’s block occurs when you don’t know the scope of your canvas, or worse yet, when there is no canvas. A good example – and the one that got me thinking about scale in the first place – is the concept of responsive web design.

For a long time web designers conveniently ignored the impending realisation that we can’t keep producing sites with fixed dimensions as though they are intended for a fixed medium. As of 2011 we can no longer get away with this way of thinking. Contemporary websites are expected to adapt appropriately to an indeterminate amount of display sizes: mobile, tablet, notebook, desktop, widescreen, etc.

So then, if we are effectively removing our beloved canvas as a design guideline, what constraints are we left with?

Enter the typographic scale

Desperate times call for desperate measures, so we turn to the one thing that we have left: type. This is rather ironic since type has been used to set scale for compositions since the dawn of the printing press centuries ago. We are simply rediscovering a few guidelines we should never have forgotten:

1. The Golden Ratio

Just to refresh your memory, the golden ratio states that “a + b is to a as a is to b”. Most often this relationship is expressed as a rectangle where the long side is roughly 1.618x longer than the short side. In other words, if you remove a square from the rectangle, the resulting rectangle has the same ratio as the original one. This can be repeated infinitely. The awesome part is that this amazing math was not the product of modern technology or ancient philosophy – the golden ratio is exhibited in the very fabric of nature. What better number to use as a basis for meaningful typography than one endorsed by God!

2. Rule of thirds

A common rule of thumb for any visual composition, if you divide your canvas into three equal parts horizontally and vertically, the intersection of these dividers indicate visual key areas. In his 2009 article on the topic Jason Santa Maria argues that the usefulness of traditional ratios are questionable design for flexible media since we have no control over the context in which the viewer will experience our design. He has a point, but all hope is not lost, read on…

3. Point sizes

In typography a point is the smallest unit of measure. The standardisation of the point dates back to 1737 when it was proposed by French printer and typefounder Pierre Simon Fournier. In Fournier’s day France used the measurement toise which was equal to six feet. A foot was twelve inches, an inch twelve lines and a line was equal to twelve metric points. Fournier decided that two metric points would equal one typographic point, but by the 1760s there was already a deviation in the size of a point, so it became completely arbitrary. Today the size of a point is defined as exactly 72 points to an inch.

4. Typographic scales

Many people believe that the traditional scale of set point sizes for fonts (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) holds some special significance. That is not really true. Although this ancient scale has been thoroughly tried and trusted since the 1500s, we no longer have the limitation of metal-cast fonts, so feel free to modify this scale or invent your own! It can be agreed though that using a scale – one consisting of distinct and related intervals – adds harmony and balance to typography. I have to credit Alex Charchar’s 2008 article for initially getting me interested in the concept.

5. Modular scales

So if we’re going to be exploring scale beyond the limitations of fixed media, where do we start? Web type aficionado and Type Manager for Typekit Tim Brown recommends combining what we know about typographic scales and meaningful ratios into what he calls modular scales. In his talk at Build 2010, Tim suggests a very sensible starting point and one which I will explain at the end of this post: the optimal size of your body copy. There is no mathematical equation to determine this size, it will vary from one typeface to another and across different media. Once you have determined this chosen size, multiply or divide it by a constant to create your scale. Traditional ratios (like the golden ratio and the rule of thirds) offer fertile ground to start from. Tim discusses his method in more depth on A List Apart.

6. Relative font sizes

Using pixels as a measure for web typography was never a good idea in the first place. If you think about it, the pixel imposes a constraint which actually has nothing to do with type: the smallest discernible unit on a display device. Once we start thinking in scales and ratios, the pixel becomes almost inconsequent. Percentages and even ems or ens make more sense as a typographic unit. The size of any piece of type should be relative. But relative to what? That’s easy: once again, relative to the size at which your body copy is most legible. Jon Tan wrote an article in 2007 entitled The Incredible Em & Elastic Layouts with CSS which really helped me understand the concept. (Of course pixels are still useful as a unit to refer to the size at which text ends up displaying on a particular screen!)

7. Fractional numbers

I have been reading Ethan Marcotte’s excellent book on Responsive Web Design. Both he and Tim Brown (mentioned above) agree that it is completely acceptable, and probably even advisable to break free from the comfort of easily divisible numbers. Once we start working with scale instead of fixed sizes, fractions are bound to pop up. Don’t fear the fraction! As Ethan says “(a fraction) perfectly represents our desired font size in proportional terms. What’s more, browsers are perfectly adept at rounding off those excess decimal places…” Tim Brown has a calculator to help you determine these numbers to build your typographic scale.

How can we apply this knowledge to create significant design?

A quote from Robert Fleege:

Embrace restrictions. Some of the best ideas & solutions come from constraints. If there aren’t any, go ahead create some of your own.

In closing I would like to address a question that I had to ask myself:

Are we just grasping at straws by using arbitrary scales and ratios?

The answer is no. Why do pants have two legs? Because humans do. Why do umbrellas have a certain size and shape? To keep humans dry. Why are wine bottles all of a similar size, shape an weight? For humans to pour from them easily.

In other words, we are designing for human interaction.

What is the font size that the human eye can read your body text at most comfortably? Determine the answer to that question and you have a very rational foundation to build upon. When faced with a missing canvas, we can use scale and ratio to determine all other measures for our design to be based on.

This guideline cuts across web, print and any other media. Once we realise that we are designing for humans – not calculators – the typographic scale starts looking a lot more friendly and constraints become way more meaningful than just the edges of a blank canvas.

I would love to hear your thoughts on the relevance of typographic scale, so please post a comment here or on twitter.

– Imar

Jason Santa Maria rethinks his website

Who would launch the tenth anniversary redesign of their website on a Friday afternoon? Well, probably only Jason Santa Maria. His twitter bio sums up his unfortunate predicament: “Designer by day, designer by night.”

Who would launch the tenth anniversary redesign of their website on a Friday afternoon? Well, probably only Jason Santa Maria. His twitter bio sums up his unfortunate predicament: “Designer by day, designer by night.”

Based in Brooklyn, New York, Jason has positioned himself as the godfather of modern typographic resources – here are a few of the offices he currently holds:

  • Co-founder of Typedia, which as the name suggests is an online encyclopedia of typefaces
  • Creative director for Typekit, a subscription-based service offering hosted web fonts
  • Lecturer for the Interaction Design program at the School of Visual Arts in NYC
  • Creative director for the online web magazine A List Apart
  • Co-founder/designer of ALA’s publishing wing A Book Apart

The other projects and events he is involved in are innumerable, so instead of trying to figure out whether Jason has a clone army or just never sleeps, go over and take a look at the latest incarnation of jasonsantamaria.com.

The previous version of his website/blog introduced the concept of a custom design for each article as opposed to having entries conform to a rigid template, but this posed an unforeseen problem:

In order to post something, I felt it couldn’t be short or just a quip on a topic, it had to be substantial. I fell into a design trap I unknowingly set for myself. – Jason Santa Maria

Here’s a screenshot of the new home page design which allows posts of various lengths to co-exist in one stream. It features one of my favourite fonts Chaparral for most of the text:

Jason Santa Maria website redesign

Personally I don’t think he is breaking new ground with this less-is-more offering, but when Jason Santa Maria redesigns it is always worth sitting up, taking a good hard look and perhaps even a leaf or two from his book…

Zerply – a professional network that employs typography to net users

From the end of the alphabet to the tip of your tongue, Zerply is the tech startup everyone is tweeting about this week. So, why do these guys think they can they give LinkedIn a run for their money?

From the end of the alphabet to the tip of your tongue, Zerply is the tech startup everyone is tweeting about this week. So, why do these guys think they can they give LinkedIn a run for their money? Well, because Tina Roth Eisenberg (aka Swiss Miss) says so. Her blog post about Zerply sent the online design community into a sign-up flurry causing Zerply’s servers to take some strain.

I must confess I was among those who took a renewed interest and signed up right away. I remember taking a look at Zerply back in February after Styleboost posted about the design, but I didn’t take much further notice.

Swiss Miss’s traffic has skewed their current user base toward creative types, but maybe they are the intended target audience after all? Take a look at the leading tags and skills currently listed:

Zerply tags and skills

They have certainly tailored the user interface (which is a breeze to use) and public profile themes to appeal to the designer’s discerning eye. There are currently four profile themes to choose from:

Zerply theme - The poster child

↑ The Poster Child by Mike Kus

Zerply theme - The Conservative

↑ The Conservative by Elliot Jay Stocks

Zerply theme - The American

↑ The American by Rogie King

Zerply theme - The Swiss

↑ The Swiss by Luke Beard

And here’s where they really exhibit an understanding of their target user: the fourth theme is locked.

Apart from the fact that the Swiss-style poster theme by their resident designer Luke Beard (the Zerply team all live together in one house!) is rather appealing, the mere fact that it is not available makes it infinitely more desirable. In order to unlock and use the theme, you have to get at least three friends to sign up to Zerply using the unique link they provide you.

Yup, we designers are such suckers for exclusivity. Needless to say I begged, blackmailed and coaxed three friends (ok, one was my sister and one was my wife – I picked easy targets) into signing up.

Check out my profile on Zerply. Goodbye LinkedIn? Maybe…

Fruita Blanch

I really enjoy the look of Catalonian family business Fruita Blanch. The new fresh minimal identity was designed by Barcelona based studio Atipus. They even developed a custom font used across the board. My favourite aspect is how the labels have been designed to reveal as much of the jar content as possible. Sometimes less really is more.

Fruita Blanch identity

Fruita Blanch identity

Fruita Blanch identity

Fruita Blanch identity

Fruita Blanch identity

Fruita Blanch identity

Fruita Blanch identity

Via: Identity Designed

Using a baseline grid

There hase been a notable resurgence of the International Typographic Style (aka Swiss Style) in graphic design lately and along with this trend, grids are big right now. Baseline grids in particular have been enjoying a lot of fresh attention, so this post is simply to consolidate some of the learning and resources I have come across.

First things first, what is the baseline?

Diagram explaining typographic baseline

Baseline refers to the line upon which most letters “sit” and below which descenders extend. It is important to note that glyphs with rounded lower extents usually dip very slightly below the baseline to create the optical illusion that they sit on the baseline.

Leading is the distance between baselines. The term originated in the era of manual typesetting, when thin strips of lead were used to space lines of type. The term is still used in print layout software like Adobe InDesign. In CSS the “line-height” property controls the leading.

Right, moving along…

Much has been written about the merits of using a grid in design. The first exposure I had to the principle was probably Khoi Vinh’s 2004 article on his Subtraction.com redesign. Column grids are pretty simple; divide your page into an equal amount of columns, decide on a gutter width (if any) and align the elements on your page to these columns.

Baseline grids are another story altogether. I have been experimenting with baseline grids in my own web and print design work for over a year now and they are a lot more tricky. The idea of a baseline grid is that the bottom of every line of text (the baseline) corresponds with a vertical baseline grid, set in even increments. CSS makes it difficult to apply all elements to a baseline grid since properties like margin, border, padding and line-height can disturb your vertical layout.

There are several good reasons for using a baseline grid, but the two that I find most logical are, vertical rythm and the baseline being a compositional aid – baseline grids add a sense of visual balance to your design and help you decide where to position elements. Leaving the positioning of elements to chance is something of the past for me! Of course grids should be treated only as guidelines in design and not as restrictive rules.

Ok, enough theory, on to the resources

Now go forth and experiment with baseline grids. If you have any tips and tricks of your own, please drop a comment below!

Better web typography with Javascript

Lettering.js is an innovative jQuery plugin that allows designers to take tweaking of web type to the next level. Combine Lettering.js with the Kern.js bookmarklet and some really interesting things become possible…

Lettering.js is an innovative jQuery plugin that allows designers to take tweaking of web type to the next level. Combine Lettering.js with the Kern.js bookmarklet and some really interesting things become possible!

Here are two articles from Typekit, complete with examples to show you how it’s done: