week04 01 words - UX-UI-Design-Lab/DesignAesthetics3 GitHub Wiki

agenda:

  1. type by definition
  2. font by definition
  3. string
  4. activity: calligram, rearrange the letters to create meaning
  5. letters in grid
  6. transform the letters
  7. assignment04

type by definition

Type mean a symbol, especially created by impression. (Think of mechanical typewriters.) The similar

  • Type: In late 15th century, ‘symbol, emblem’ from French, or from Latin typus, from Greek tupos ‘impression, figure, type’, from tuptein ‘to strike’. The use in printing dates from the early 18th century; the general sense ‘category with common characteristics’ arose in the mid 19th century.
  • Typography: the style and appearance of printed matter. The rule.
  • Typeface: a particular design of type. The overall design of lettering. (ex. Times New Roman).
  • Font: Each of these variations of the typeface. (ex. Times New Roman Bold 12pt)
  • Glyphs: The design of an individual letter, number, punctuation mark, or other symbol. (ex. the design of A)
  • Letter: a character representing one or more of the sounds used in speech; any symbols of an alphabet.
  • Letterset: a method of printing in which ink is transferred from a raised surface to a blanket wrapped around a cylinder and from that to the paper.

font by definition

Typography is the rule how to apply types; the typeface is the appearance of the letters; font is a specific information how to use typeface (usually the name of typeface and the size, font-size and leading).

With digital fonts, you need to have the typefaces. It is nothing but complex shape. (Think of i, that has a kind of circle or point on top and the vertical line). As a recap, drawing a shape can be either pixels or by points (or, rasterized vs. vector: what is the difference?) and digital fonts have the same categories. But we rarely find bitmap fonts. To make the size flexible and to support various screen resolution, we use vector format. Here you can find the detail file formats for fonts (and a bit of history): https://docs.fileformat.com/font/

One more thing: not every font you experience on your computer is for web. It's better to check the web-safe fonts (the list tents to be updated often): https://web.mit.edu/jmorzins/www/fonts.html

Even some designers who may not familiar with the web environment do make a mistake of assuming (and insisting) the font of their choice should be okay for the web design. (but maybe not depending on the system). Web-fonts need to have processed into css -- there are many web-font converters for that purpose.

Even between system, some fonts may not work properly. https://www.cssfontstack.com/ has interesting estimation how likely each of well-known typefaces can be safe depending on the viewer's system (windows vs. mac).

Maybe some of you might be interested in this Matthew Carter's talk

watch Matthew Carter's TED talk

In p5, to change typeface, use textFont() -- Try to set the typeface you like from the web-safe fonts. https://p5js.org/reference/#/p5/textFont

textStyle is for font style, options are NORMAL, ITALIC, BOLD, BOLDITALIC.

textLeading is for adjusting line-spacing. More space will make each line more sparse.

so interestingly, it is using text- but you can think them as font- specifics for those functions.

And textWidth(), textAscent(), and text Descent()` is for measuring the top (ascent) or bottom (descent) or with of the text.

textWrap() is used when you want to break lines - default is by WORD, so unless you have space (or new line \n), it keeps the letters in the word together. but if you set it as CHAR, the word can be broken and carried to the next line.

This means we can control each character with design properties - keeping the word/ sentence. Next, we will learn more about

string

To use text(), we learned to use "something" -- the data type for this "..." is string. https://p5js.org/reference/#/p5/string

A string is a sequence of characters. (Imagine a train which has one letter for each cargo)

name train

image credit: https://www.etsy.com/uk/listing/784264427/personalised-wooden-colour-name-train

The letter is sitting on each car. -- this structure is called "array" (i.e., string is an array of characters). We won't go deep for with the array, but it is useful to understand the structure of string.

Each character in the string (= letter in the text) can be identified as a number, order of the car. The first character is in [0] car, and the second one is in [1].

For example, I have a word "train", then I can use each character one by one.

 let s; // let's have a variable to store the text
 s = "train";

 // to show train
 console.log(s);

 // to show t in "train"
 console.log(s[0]);

 // for fun, make a train of the characters - we have 5 characters, count 0 -4.
 console.log(s[0], "-", s[1], "-", s[2], "-", s[3], "-", s[4], "-");

 // what happens if you call the car doesn't exist in train, like [5]?
 console.log(s[5]);

It will show "undefined" - which means JS can't find it or doesn't understand what you mean (= saying "you didn't tell me about it... and how do I know?").

So, now you may see the possible way to call each character efficiently. Maybe can we use FOR?

 // pseudo code of how to show each character by FOR
 // for(let i = 0; i < number of characters; i++) {
 //       console.log(s[i]);
 // }

Unfortunately, p5 doesn't seem to explicitly explain how to count (= or measure the length of string) -- let's dig javascript document about string. (most of cases, you can use your js knowledge here in p5.js) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String - and we can see length is the property of string.

or array should have that information too. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/length

In short, to find the information about the length of the string, you will .length

 let s = "train";
 console.log(s.length);

So, we can complete FOR in the above.

 for(let i = 0; i < s.length; i++) {
     console.log(s[i]);
 }

This gives us lots of possibilities to play with the characters.

activity: calligram, rearrange the letters to create meaning

You will pick one title (from the song you choose for assignment02? or your favorite book?) and sketch for typographic composition.

letters in grid

we will put the letters in grid. Like monospace (typewriter fonts). then, maybe change the size increasing? or add noise on y position (baseline shift)? or change color to fade out to the right?

transform the letters

Then, apply some rules to change each letter's design properties.

translate the text by mouseX translate the text centered and rotate the whole text upside down (180deg or PI) rotate each character to go around (about 30deg or PI/6)

assignment04

You will create a typographic composition by p5.