Typography
I’m not sure that anything successful can come out of generative typography, but hey, let’s do a class on it. The presentation is mostly a collection of things I think are interesting, and not so much a world-view of computational typography.
Obviously, when we see footage like this, we realize that fonts - almost above anything else - have the widest range of expression. They are at the same time purely functional and purely aesthetic.
Today we’ll look at ways to make type systems: fonts created by using some kind of rule, instead of a manual plotting of the polygon outlines. This can be many things.
Short Introduction to Typography
The history of typefaces is in many ways tied to the technological developements of printmaking.
Of course typography is a field that originated in handwriting. Here it’s a so-called illuminated manuscript from the middle ages.
Then along came Gutenberg with the printing press. As you can see, the typefaces were still very bound to the art of handwriting.
This slowly changed, as font designers started using the grid as a design tool.
The linotype machine
The computer
Here’s the dadaist poster I showed you in the first class, that was a direct comment on the strict, horizontal grid from the movable type machines.
Many of the things we now consider essential to modern typefaces has deep roots within these traditions. A good is example is the idea of “uppercase” and “lowercase” letter, that was actually a description of where the letters where stored in a printmakers desk.
The most important thing for you to start notice, is the difference between different typefaces. Treat them like you treated your forms in these first assignments. Think about where you would use them. Even Helvetica has a specific expression and needs to be chosen wisely.
Type Classification
The following walk-through has been borrowed from “a crash course in typography”.
The broadest way to classify fonts is by their broad type category. Here’s a few of these.
Serif
Serif typefaces are called “serifs” because they have smaller lines (called serifs) connected to the main strokes of characters. Serifs are visual signatures from the time of handwriting, that originally were visual clues to distinguish written letters from each other. The concept transferred to print when printing small type. Here’s a quick overview on the evolution of serifs.
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 contrast between thick and thin lines, and have thick, rectangular serifs, and sometimes have fixed widths. The underlying characters hapes often more closely resemble sans serif fonts.
Sans-serif
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, and are also the most legible (hence the popularity of some of them for website body copy). They’re more calligraphic than other sans-serifs, meaning they have a greater variation in line widths.
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
Scripts are based upon handwriting, and offer very fluid letterforms. There are two basic classifications: formal and casual.
Formal scripts are often reminiscent of the handwritten letterforms common in the 17th and 18th centuries.
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
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.
Dingbats and Speciality Typefaces
Dingbats are specialty typefaces that consist of symbols and ornaments instead of letters. Wingdings is probably the best-known dingbat font, though there are now thousands, often created around themes.
Proportional vs. Monospaced
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.
Weights & Styles
Often a single typeface ships with more than 10 different styles 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.
Typeface Appearance
The mood of a typeface is an important part of how it should be used. Different typefaces have strikingly different moods. Commonly used moods include formal vs. informal, modern vs classic/traditional, and light vs dramatic. Some typefaces have very distinct moods. For example, Times New Roman is pretty much always going to be a traditional font, which is why it’s so commonly used for business correspondence. Verdana, on the other hand, has a more modern mood.
Some typefaces are more transcendent, and can convey almost any mood based on the content and the other typefaces they’re combined with. Helvetica is often considered one such font.
The Anatomy of a Typeface
The different letterforms within a typeface share a few common characteristics. These characteristics can be important in determining whether two (or more) typefaces work well together, or clash. Here are the most basic parts of a typeface.
If you’d like to know more about the anatomy of typefaces, “anatomy of a typeface” is a great place to go. I also recommend you to watch the Helvetica The Movie.
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 was possibly the world’s first parametrized typeface (created in 1977). 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 computationally. A designer has to sit and create new outlines by hand. MetaFont takes a drastically new approach. Instead of being described by its outline, this font is represented by a series of variables inspired by handwriting:
- Pen
- Weight
- Slant
- Superness
- Curlyness
By manipulating these variables you can create very different styles of the MetaFont, as shown in these screenshots.
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 Knuth at Google and a link to his original paper on Mathematical Typography to be found on the web.
Although the MetaFont is probably unique, this approach inspired a whole new set of typefaces bundled under the name Type Systems.
Greta is a universal type system. It was conceived from the start to be a type system, and all aspects of the font are chosen in relation to the bigger picture. However, it is not generated by code. Each letter in each weight is designed by hand.
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?
A whole different aspect of font design is 3-dimensional typography. Most of these fonts are more artsy in nature, where the font itself is as much an art project in itself as it is a font. 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.
ECAL published a book about scripted typography, however it’s out of print and impossible to get a hold of.
Code and Typefaces
I often divide generative 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.
I’m going to explore both of these types of typefaces in the following, although I prefer rule-based typefaces.
Fonts in Rune.js
For basic text rendering, Rune.js uses the built-in font rendering in browsers. The one important thing is that text is drawn from the baseline and up, so the y position will actually dictate where the text bottom starts.
You can manipulate text like you manipulate any other shape objects.
Manipulating existing fonts
You can use the Rune.Font plugin to load existing fonts. Here’s a simple sketch to show that.
Project Examples
So why do I say that I don’t believe in computational typography? Because typefaces have a distinct function: readability. This can often only be achieved by fine-tuning every single point by hand. This is not something that programming is good for.
Still I see a ton of these projects. Destroying beautiful fonts by moving their outlines:
Who cares about making a font uglier?
These next examples go a little beyond that. I still think half of them are unsuccessful, but at least there’s some kind of compositional beauty. sThis is a showcase of final projects from a class on generative typography. Read more on the class website.
Here’s a few examples of projects that I really like, because it’s more a case of testing a specific set of rules, than it is to move outline points around randomly:
John Maeda describes this project by Peter Cho as “unique for marrying extremely simple numerical form with true elegance in craft”. 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.
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.
Here’s some examples of the work of Jonathan Puckey. I really like them because it’s not so much about manipulating outlines of a font. He’s building new designs from a set of simple rules.
Here’s his project “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 next project is really great. It’s a dynamic typeface made for the small film studio “Lava Films”. It’s based on the concept of natural disasters: Things moving to non-anticipated places. So is the font.
.. but it’s not created with programming.
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.
Of course there’s Karsten Schmidts evolutionary typeface, that he made for “Print” magazine.
