Caslon Type Foundry

A great collection of [photographs of the Caslon Type Foundry](http://spitalfieldslife.com/2013/08/05/at-the-caslon-letter-foundry/) circa 1902, I think. One of my personal favorites:

A Room of Clerks at the Caslon Type Foundry, circa 1902. Note especially the number of standing workstations.

A Room of Clerks at the Caslon Type Foundry, circa 1902. Note especially the number of standing workstations.

A Type Face for Making Charts

This reminds me somewhat of the drawings people used to make using ASCII or that subset of some type faces that included various kinds of lines. [Chartwell](https://www.fontfont.com/how-to-use-ff-chartwell) is far more sophisticated than that: it’s a kind of hip re-making of the idea. That is, it feels both retrospective and forward-looking at the same time.

My only complaint really amounts to a financial one. Chartwell is reasonably priced within the world of type faces, but that still puts it out of my price range: $25 per chart type.

If you do a lot of charting, however, and your a designer, this could be a real time and sanity saver. (I don’t know that many designers who really want to interact either with spreadsheet or presentation software in order to produce charts, and few of us are as handing with [Processing](http://www.processing.org) as we should be.

[I love typography](http://ilovetypography.com/). And I have always [wanted to create a font](http://ilovetypography.com/2007/10/22/so-you-want-to-create-a-font-part-1/).

CSS Typography

A number of people have asked about the type faces I am using in the new layout. If everything goes well, then you are viewing this site using two open source, free-to-use type faces. One is Gentium, and the other is Yanone Kaffeesatz. Gentium is the serif face, Kaffeesatz the sans-serif. Both faces are available under the SIL Open Font License. SIL’s goals are noble, but they are also quite critical for building a knowledge distribution system that is beholden to no one entity. (I don’t have a horse in the current H.264 vs. WebM race, but the MPEG-LA would make everyone’s life a lot easier if they simply made that standard open and free.)

But how do you load these type faces? How do you get them to appear on your website? Well, it does take some work in CSS, and, in the case of my site running on WordPress, the creation of a directory within the WP theme that contains the fonts — note the use of a relative URL below:

@font-face {
font-family: "Gentium Basic";
src: local("Gentium Basic"), url("font/gentium.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
src: local("Gentium Basic Italic"), url("./font/gentium-italic.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-weight: bold;
src: local("Gentium Basic Bold"), url("./font/gentium-bold.ttf");
}
@font-face {
font-family: "Gentium Basic";
font-style: italic;
font-weight: bold;
src: local("Gentium Basic Bold Italic"), url("./font/gentium-bold-italic.ttf");
}

@font-face {
font-family: "YanoneKaffeesatz";
font-weight: normal;
src: local("YanoneKaffeesatz"), url("font/YanoneKaffeesatz-Regular.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: thin;
src: local("YanoneKaffeesatz Thin"), url("./font/YanoneKaffeesatz-Thin.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-weight: bold;
src: local("YanoneKaffeesatz Bold"), url("./font/YanoneKaffeesatz-Bold.ttf");
}
@font-face {
font-family: "YanoneKaffeesatz";
font-style: light;
font-weight: light;
src: local("YanoneKaffeesatz Light"), url("./font/YanoneKaffeesatz-Light.ttf");
}

As you can see from looking at the source (src) for each file, my server is currently carrying the load of delivering both the type face — unless a reader already has the type face installed on their computer. (And you do have at least Gentium installed, don’t you? Come on, it’s a beautiful type face and it’s open source.) This affects two things: my bandwidth usage with my hosting service and the speed with which readers view pages. I can fix this in a couple of ways:

  • I can make Gentium the first type face in the CSS for body contents and make Georgia the fall-over type face. What will happen is that fore viewers who don’t have Gentium installed, their browser won’t download it from my server but simply move onto Georgia. (I might just make my life easier and make Georgia the preferred face: that way I can make sure that I am seeing what everyone else is seeing.)
  • I can also shift the burden of delivering the Kaffeesatz type face from my own server to Google’s servers, because Kaffeesatz is one of the web fonts they have chosen to support. The code for that would look like this:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

Place that in the head of your HTML or PHP files and you are good to go. All you need to do is insert the font name in your CSS like so:

h1 { font-family: 'Yanone Kaffeesatz', arial, serif; }

It’s typographical magic without the bandwidth costs.

**UPDATE**: Sorry about the ugly formatting of the blocks of code. That was my fault: I put the wrong tags in. Also, Google offers a *lot* more options in web fonts: [check it out](http://code.google.com/webfonts).

Another Typography Animation

This one took 500 hours and involved four different applications. I would link to Celo’s infamous typography video, but I trust my readers can find it on Youtube. The video below is also a “music video,” but the animation of the typography is much more thoughtful and creative:

Shop Vac from Jarrett Heather on Vimeo.

A kinetic typography music video for Jonathan Coulton’s Shop Vac. Created using After Effects, Toon Boom Animate, Illustrator, Photoshop and Premiere.