From Point to Line to Letter

Font Representation

Fonts can be represented as

Raster Graphics or Pixel Graphics
Vector-Graphics
- Outlines or Midlines
- Curves or Line Segments
- Circular Arcs or Bezier-Curves

What are the pros and cons of the various representations?

Parametric Letters

Letter J example

This is an example of a parametric `J` for Processing 3.0.
It uses midlines rather than the outlines to represent the letter
`tweak` the sketch to play with the parameters.

Source Code

You can also find the source code here and in the Wild Type Class Room OpenProcessing.

////////////////////////////////////////////////////////
//                                                    //
//          P A R A M E T R I C   >> J <<             //
//                                                    //
////////////////////////////////////////////////////////
 
// This is a really simple example of parametric type design.
 
// HOMEWORK:
// Create your own parametric letter
 
void setup() {
  size(400, 400);
  noFill();
}
  
void draw() {
  
  int gap = 60;
  int pos = 250;
  int maxheight = 320;
  int thickness = 20;
  int dx = 120;
  int dy = 120;
  
  background(0);
  stroke(255);
  strokeWeight(thickness);
  line(pos, gap, pos, maxheight - gap);
  arc(pos - dx/2, maxheight - gap, dx, dy, 0, PI);
  
}

Examples

Don Knuth's Metafont (TeX)
MeekFM (Font Synthesizer)
Prototypo (Open Source)
Project Faces (Adobe)

Homework

Pick a letter from the alphabet and create your own parametric letter
Upload the sketch to OpenProcessing and add it to our class room
Add a screen shot to your wild-type wiki user page for this course

Links

Wild Type Class Room

Generating Fonts

In this class we learn how to:

Create your own TTF and Web fonts from scratch using the Fontastic library.
Import TTF fonts into Processing using Geomerative library.

Homework 2

Finish the task you have been working on:
Create a simple typographic system from scratch

Document your approach in the wiki
Create a true type font using the fontastic processing library
Publish the font file and screenshots on your page

Some things to keep in mind:

Don't stick to the forms of the letters, think abstract!
Think about compound glyphs, as in the pie chart font example
Look at the Exotic Writing Systems for inspiration

Your second task:

Transform a font of your choice using both Geomerative and Fontastic.

Import a true type font and get the outline using geomerative
Do something with the outline of each letter
Turn the result into a new font using fontastic
Publish the font file and screenshots on your wiki page

Some things to explore:

Look at the examples to figure out how to use the libraries
Think of a creative transformations! Here are some things you could do
- geometric transformations (reflecting the letters)
- sampling (creating a pixel font based on the original font)
- messing with the outline
- create an abstract glyph based on properties of the original letter
- explore how far you can mutilate the original glyph, without destroying it

Links