Typography

Programming Design Systems, Week 5.

In this class we will investigate how we can create and manipulate typefaces in code. We will first look at some of the fundamentals of typography, and then look at ways to computationally create typefaces and manipulate their vectors.

Like any other assignment in this class, I encourage you to come up with ideas that are better done in code than in a traditional design tool. This is especially important when working with typefaces, as they are come from a tradition of hand-writing.

Fundamentals of Typography

Before diving into code, let us look at the fundamental concepts of typography.

Typography is a field that originated in handwriting. This is an illuminated manuscript from the middle ages created with a pend and ink. Although the type looks different than what we use today, it is not vatly different.

Then along came Gutenberg with the printing press. Even though these were printed pages, the layout and typography still looked very much like the illuminated manuscripts. The printing press was merely a machine to speed up the process of making books.

However, as printing technology evolved, typefaces started adhering to grid-like structures. Like the pixel on a computer, a small rectangular metal letter block was the smallest denominator for the printing press, and this format inspired more geometric typefaces.

The letterpress terminology has been incorporated in our vocabulary today.

Just like basic shapes and custom shapes, typefaces have distinct looks that can be used to convey meaning. On top of this, typefaces are also deeply functional as they act as a mechanism for communicating words. Take a moment to look at this collection of typefaces. Notice how some of them appear bookish while other look modern. Some are bold some are thin. Some are slim (condensed) and some are wide.

Type Classification

The following slides have been borrowed from “a crash course in typography”.

Serif typefaces have smaller lines (called serifs) connected to the main strokes of characters. Serifs are visual signatures from the time of handwriting used to distinguish written letters from each other. The concept transferred to print when printing small type.

Old Style Serifs is a sub-category of serif typefaces. The main characteristic of old style characters is their diagonal stress (the thinnest parts of the letters appear on the angled strokes, rather than the vertical or horizontal ones).

Transitional serifs date back to the mid 1700s, and are generally the most common serif typefaces. Times New Roman and Baskerville are both transitional serifs, as are Caslon, Georgia, and Bookman. The differences between thick and thin strokes in transitional typefaces are more pronounced than they are in old style serifs, but less so than in modern serifs.

Modern serifs, which include typefaces like Didot and Bodoni, have a much more pronounced contrast between thin and thick lines, and have have a vertical stress and minimal brackets. They date back to the late 1700s.

Slab serifs have little to no stroke variance, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.

Sans-serif typefaces are just that: typefaces without serifs. We know them from the first and second modernist waves to hit the US in the 60’s and 70’s, with artists like Josef Müller-Brockmann and Alvin Lustig. The first sans-serifs were created in the late 18th century. There are four basic classifications of sans-serif typefaces: Grotesque, Neo-grotesque, Humanist, and Geometric.

Grotesques are the earliest, and include fonts like Franklin Gothic and Akzidenze Grotesk. These typefaces often have letterforms that are very similar to serif typefaces, minus the serifs.

Neo-grotesque typefaces include some of the most common typefaces: Arial, Helvetica and Univers are all neo-grotesques. They have a relatively plain appearance when compared to the grotesques.

Humanist typefaces include Gill Sans, Frutiger, Tahoma, Verdana, Optima, and Lucide Grande. These are more calligraphic than other sans-serif typefaces (meaning they have a greater variation in stroke widths), and are also the most legible (hence the popularity of some of them for website body copy).

Geometric sans-serifs are more closely based on geometric shapes. Generally, the “O”s in geometrics will appear circular, and the letter “a” is almost always simple, just a circle with a tail. They’re the least commonly-used for body copy, and are also the most modern sans-serifs, as a general rule.

Script typefaces are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual.

Casual scripts more closely resemble modern handwriting, and date back to the mid-twentieth century. They’re much less formal, often with stronger strokes and a more brush-like appearance. Casual scripts include Mistral and Brush Script.

Display typefaces are probably the broadest category and include the most variation. The main characteristic is that they’re unsuitable for body copy and are best reserved for headlines or other short copy that needs attention drawn to it. Display typefaces can be formal, or informal, and evoke any kind of mood. They’re more commonly seen in print design, but are becoming more popular online with the use of web fonts.

Dingbat typefaces consist of symbols and ornaments instead of letters. Wingdings is probably the best-known dingbat font, though there are now thousands, often created around specific themes. An icon font in webdesign is considered a dingbat.

Another way to categorize typefaces is by their spacing. Proportional typefaces uses varied spacing depending on the actual letter width, while monospaced typefaces have an equal amount of space between all letters. You often use the latter in special environments, like IDE for programming, where you want the letters to line up.

A single typeface can ship with more than 10 different variants in different weights and styles. Weights are often classified as “light”, “thin”, “regular”, “medium”, “bold”, “heavy”, or “black”. Each of these refers to the thickness of the strokes that make up the characters.

There are three general styles you’ll find with many typefaces: italic, oblique, and small caps. Small caps are often used for headings or subheadings, to add variety to your typography if using a single typeface. Italic and oblique are often confused or used interchangeably, but are two distinct styles. Oblique type is simply a slanted version of the regular characters. You could create this using the “distort” function in Photoshop, although sometimes a separate oblique font is included within a typeface. Italics are slanted like obliques, but are actually a separate set of characters, with their own unique letterforms.

Some more technical info.

Rule-based typography

Before the computer and programming, a typeface was something a designer would sit down and carve into metal. Funny enough, it’s kind of the same procedure to do a typeface today, although designers use a mouse instead. With the computer comes the ability to generate forms, and there’s a range of different typefaces that a “natively computational”.

One of the first fonts to focus on a variable set of related shapes was the Univers typeface by Adrian Frutiger. Made in 1954, Frutigers approach to the design of Univers was drastically different than that of others fonts: Instead of focusing on the relation between the letters of the same weight, he focused on creating a system of inter-related weights that would function well against each other. This raises a series of questions: What should the default weight be in order to preserve room for both lighter and bolder variants? How do you distribute the weights?

MetaFont (created in 1977) was possibly the world’s first parametric typeface. It was created by Donald Knuth for the typesetting of his life-work The Art of Computer Programming. Most fonts are created by designing the outline of the font. When a typeface has to be created in different weights, you cannot just “grow” or “shrink” this outline automatically. A designer has to sit and create new outlines by hand. MetaFont takes a new approach: It is a programming language for designing new fonts by their inner stroke. A single MetaFont typeface can be manipulated to change this inner stroke, making it bolder or more slanted.

This is a MetaFont typeface created by Dexter Sinister. The typeface has a set of variables that can be changed to change the appearance of the typeface.

Pen
Weight
Slant
Superness
Curlyness

You can read more about metafont in the text “A Note on Type” from the magazine Bulletins of the Serving Library. There’s also a great talk by Donald Knuth at Google and a link to his original paper on Mathematical Typography to be found on the web.

Metaflop is a tool for making metafonts on the web.

As a programming language, MetaFont is unique. ECAL published a book about scripted typography, however it’s out of print. Many designers have create type systems where the individual weights and styles of the font are related. Greta is one of those type systems.

If you overlay the different weights on top of each other, you realize the algorithmic approach to design that was used for Greta. Could it have been designed in code?

Project Examples

I often divide computational typography projects into two distinct categories: Rule-based typefaces are typefaces that are built on a simple rule and generated entirely in code, without referencing an existing font. Outline manipulations are projects where an existing fonts are loaded and manipulated in code.

Although we will look at how to manipulate font vectors, I am personally not that interested in these types of projects. They often result in mediocre, distorted fonts void of purpose.

Much more interesting is the first category of typefaces created entirely from simple logic. This is a typeface by Peter Cho where each letter is generated with only 2 arcs, and the entire typeface is derived from twenty-six groups of only ten numbers. The project is from 1997.

3-dimensional typography is another interesting development. Most of these fonts are more artsy in nature, but there is a whole book about it. Ortho Type is a 3D typeface that ships with custom software that allows the user to manipulate the 3D view, width, height, depth, thickness and color of the typeface via UI controls. You can try it out here.

Another project from the Aesthetics and Computation Group at MIT. It’s called “Robotic Arm as Typeface”, and that’s exactly what it is. A typeface made up of a single, moving robotic arm. The project is from 2001.

If we do have to look at outline manipulations, here are some of the more interesting projects. This is Jonathan Puckey who creates patterns from fonts. This project is called “Tile Tool” that draws patterns on top of black and white base images. He also made a project called “Typographic Rhytm” where he picks a font weight for each letter depending on the time it took you to type the character.

This is a dynamic typeface for the branding of Lava Films.

Here’s a few more projects that go beyond the paper. Here’s it’s an automatic brush.

Here’s a project combining evolution and typography. “Growing Data” from 2008.

Karsten Schmidts evolutionary typeface, that he made for “Print” magazine.

Books

The Elements of Typographic Style by Robert Bringhurst