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

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

1. Document your approach in the wiki
2. Create a true type font using the fontastic processing library
3. 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.

1. Import a true type font and get the outline using geomerative
2. Do something with the outline of each letter
3. Turn the result into a new font using fontastic
4. 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

• Geomerative
• Fontastic
• 10PRINT Font