GMU:Wild Type/Part1

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

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

Links

• Wild Type Class Room