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.

Screenshot

Source Code

Here is the source for our little "J" example.

You can also find it 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