No edit summary |
No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 85: | Line 85: | ||
= Generating Fonts = | = 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 == | == Homework 2 == | ||
Line 92: | Line 97: | ||
# Document your approach in the wiki | # Document your approach in the wiki | ||
# Create a true type using the fontastic processing library | # Create a true type font using the fontastic processing library | ||
# Publish the font file and screenshots on your page | # Publish the font file and screenshots on your page | ||
Some things to keep in mind: | ''Some things to keep in mind:'' | ||
* Don't stick to the forms of the letters, think abstract! | * Don't stick to the forms of the letters, think abstract! | ||
* Think about compound glyphs, as in the pie chart font example | * Think about compound glyphs, as in the pie chart font example | ||
* Look at the [[Schrift#Exotische_Schriften|Exotic Writing Systems]] for inspiration | * Look at the [[Schrift#Exotische_Schriften|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 == | == Links == | ||
* [http://www.ricardmarxer.com/geomerative/ Geomerative] | |||
* [http://code.andreaskoller.com/libraries/fontastic/ Fontastic] | |||
* [https://github.com/bitcraftlab/Principia-Textilica-Course/tree/master/04-notation-systems/demos/10PRINT 10PRINT Font] | * [https://github.com/bitcraftlab/Principia-Textilica-Course/tree/master/04-notation-systems/demos/10PRINT 10PRINT Font] |
Latest revision as of 16:10, 24 November 2015
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
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