GMU:Wild Type/Part1

From Medien Wiki

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

Wild-type-screenshot-1.png


  • 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

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

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