Advanced Typography: Exercises
30/8/23-20/9/23 // W1-W4
Mercy Chong HuiZiun // 0360929 Advanced Typography // BDCM
Lectures + Exercises
Fig 1.1 Axial system
Fig 1.2 Radial system
Dilatational system
> All elements expand from a certain point in a circular fashion.
Random system
> Elements that appear to have no specific pattern or relationship.
Grid system
> A system of vertical and horizontal divisions.
Transitional system
> An informal system of layered banding.
Fig 1.3 Transitional system
Fig 1.4 Modular system
Typographic Systems
Fig 1.8 Typographic systems examples
Fig 1.9 Environmental grid
Fig 1.10 Form & Movement
W3: Context & Creativity
Fig 1.12 Early greek letters
Fig 1.13 Evolution of letters
The oldest writing systems present in Southeast Asia were Indian
scripts. South Indian script originally used for writing Sanskrit
and Tamil.
Fig 1.14 Typeface construction
> Using grids (with circular forms) can facilitate the
construction of a letterform and is a possible method to
build/create/design your letterform.
W5: Perception & Organization
Fig 1.16 Perception & Organization
Fig 1.17 Contrast of the size in letterforms
Fig 1.19 Texture in letters
Fig 1.21 (left): contrast, (right): conflict
Gesalt:
The way a thing has been "placed" or "put together". (German
word)
Fig 1.22 Gesalt Principles
[Task To-do]
.jpg)
Fig 2.4 Radial system
Fig 2.5 Dilatational system
Fig 2.7 Final draft of random system
[ Grid ]
Fig 2.10 Modular systems
Fig 2.11 Transitional system
Fig 2.12 Bilateral system
Final Typographic Systems
-02.jpg)
Fig 2.13 Final Typographic systems combined
> Finding textured images for this exercise. Image selected must have a strong & consistent character to be able to deconstruct the letterforms.
.png)
Fig 3.1 texture image finding
.png)
.png)
.png)
Fig 3.8 Final 'A' Letter
-05.jpg)
.png)
Fig 3.14 Just placing the letterforms onto the image
Fig 3.16 Final outcome of the letterform poster (JPEG)
Mercy Chong HuiZiun // 0360929 Advanced Typography // BDCM
Lectures + Exercises
Lists
Instructions
Lectures
Exercise 1
Exercise 2
Feedback
Reflections
Further Reading
Instructions
Fig 1.0 Module Information Booklet
Lectures
W1: Typographic systems
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
Axial system
> All elements are organized from left to right in a single axis. It doesn't have to be straight as it can be bent.
> All elements are organized from left to right in a single axis. It doesn't have to be straight as it can be bent.
Fig 1.1 Axial system
Radial system
> All elements are extended from a point of focus.
> All elements are extended from a point of focus.
Fig 1.2 Radial system
Dilatational system
> All elements expand from a certain point in a circular fashion.
Random system
> Elements that appear to have no specific pattern or relationship.
Grid system
> A system of vertical and horizontal divisions.
Transitional system
> An informal system of layered banding.
Fig 1.3 Transitional system
Modular system
> A series of non-objective elements that are constructed in as a standardized unit.
> A series of non-objective elements that are constructed in as a standardized unit.
Fig 1.4 Modular system
Bilateral system
> All text is arranged symmetrically on a single axis.
> Was used in invitation cards for instance.
> All text is arranged symmetrically on a single axis.
> Was used in invitation cards for instance.
Fig 1.5/1.6 Bilateral system
An understanding of the system organization process allows the
designer to break free from "the rigid horizontal and vertical grid
systems of letterpress".(Elam, 2007) It allows designers to use more
fluid means to create typographic messages.
W2:
Typographic Composition
Principles of Design Composition
Principles of Design Composition
Rule of Thirds
> A photographic guide to composition, it basically suggests
that a frame (space) can be divided into 3 columns and 3
rows.
> The intersecting lines are used as guide to place the
points of interest, within the given space.
Fig 1.7 Rule of thirds
Fig 1.8 Typographic systems examples
Environmental Grid
> This system is based on the exploration of an existing
structure or numerous structures combined.
An extraction of crucial lines both curved and straight are
formed.
Fig 1.9 Environmental grid
Other models/ systems
Form & Movement
> This system is based on the exploration of an existing Grid
System.
The placement of a form on a page, over many pages creates
movement.
Fig 1.10 Form & Movement
Handwriting
Q: Why is handwriting important in the study of type/typography?
A: Because the first mechanically produced letterforms were designed to directly imitate handwriting.
Handwriting would become the basis/standard for form, spacing and conventions mechanical type would try to mimic.
Fig 1.11 Evolution of the Latin Alphabet
Q: Why is handwriting important in the study of type/typography?
A: Because the first mechanically produced letterforms were designed to directly imitate handwriting.
Handwriting would become the basis/standard for form, spacing and conventions mechanical type would try to mimic.
Fig 1.11 Evolution of the Latin Alphabet
Cuneiform
: The earliest system of actual writing. The cuneiform characters evolved from pictograms and was written from left to right.
: The earliest system of actual writing. The cuneiform characters evolved from pictograms and was written from left to right.
Hieroglyphics
: The Egyptian writing system is fused with the art of relief carving. The system was a mixture of both rebus and phonetic characters -> the first link to a future alphabetic system.
: The Egyptian writing system is fused with the art of relief carving. The system was a mixture of both rebus and phonetic characters -> the first link to a future alphabetic system.
-
Ideograms -> to represent the things they actually
depict.
- Determinatives -> to show that the signs proceeding are meant as phonograms/ indicate the general idea of the word.
- Phonograms -> representing sounds that "spell out" individual words.
Early Greek
: Drawn freehand, not constructed with compasses and rule and they had no serifs.
: Drawn freehand, not constructed with compasses and rule and they had no serifs.
Fig 1.12 Early greek letters
Roman Uncials
: Roman letters became more rounded by the 4th century. The curved form allowed for less strokes and could be written faster.
: Roman letters became more rounded by the 4th century. The curved form allowed for less strokes and could be written faster.
English Half Uncials(8th C.)
: The uncial evolved into a more slanted and condensed form.
: The uncial evolved into a more slanted and condensed form.
Carolingian Minuscule
: Capitals at the start of a sentence, spaces between words and punctuation. It was used for all legal and literary works between various regions of the expanding European empire. It was this style that became the pattern for the Humanistio writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type.
: Capitals at the start of a sentence, spaces between words and punctuation. It was used for all legal and literary works between various regions of the expanding European empire. It was this style that became the pattern for the Humanistio writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type.
Black letter (12-15 C.CE)
: Characterized by tight spacing and condensed lettering. Evenly
spaced verticals dominated the letterform. Condensing line and
letter spacing reduced the amount of costly materials in book
production.
Italian Renaissance
: Humanist named the newly rediscovered letterforms Antica. The Renaissance analysis of form that was being applied to art and architecture was directed towards letterform -> resulting a more rationalized letter.
: Humanist named the newly rediscovered letterforms Antica. The Renaissance analysis of form that was being applied to art and architecture was directed towards letterform -> resulting a more rationalized letter.
Fig 1.13 Evolution of letters
W4: Designing Type
General process of Type Design
- Research
- Sketching
- Digitization
- Testing
- Deploy
1) Research
- Understanding type history, type anatomy and type conventions, terminologies
- Important to determine the type's purpose/what different applications it will be used
- Examine existing fonts that are presently being used for inspiration/ideas/reference etc
2) Sketching
-
Sketching typeface using traditional tools(brushes,pens..)
-> scan them for digitization -
Sketching typeface using digital tools (Wacom etc direcly
into a font design software)
-> much quicker and consistent but can sometimes impede the natural movement and hand strokes.
3) Digitization
- Softwares used to digitize typefaces: FontLab, Glyphs App..
-> Some designers use Adobe Illustrator to design letterforms
and then only to the specialized softwares.
4) Testing
- Results of testing is part of the process of refining and correcting aspects of the typeface.
- Prototyping is part of the testing process- leads to important feedback.
- Depending on the typeface category(display/type/text type) the readability & legibility of the typeface becomes an important consideration.
5) Deploy
- Even after deploying a completed typeface there's always teething problems that did not come to the fore during the prototyping and testing phases.
- The riguour of the testing is important in so that the teething issue remain minor.
Typeface Construction
Fig 1.14 Typeface construction
Construction and considerations
- Different forms and constructions must be taken into account when designing a new type.
- An important visual correction is an extrusion of curved (and protruding) forms past the baseline and cap line(overshoot). This also implies to vertical alignment between curved and straight forms.
- Fitting the type: Visual correction is needed for the distance between letters. The letters must be altered to a uniform white space.
Fig 1.15 Letter constructions and considerations
W5: Perception & Organization
: Perception in typography deals with the visual navigation and
interpretation of the reader via
contrast, form and organisation of the content.
Fig 1.16 Perception & Organization
[ Contrast ]
Size
: Provides a point to which the reader's attention is drawn. Most common use of size is in making a title/heading noticeably bigger than the body text.
Size
: Provides a point to which the reader's attention is drawn. Most common use of size is in making a title/heading noticeably bigger than the body text.
Fig 1.17 Contrast of the size in letterforms
Weight
: Describes how bold type can stand out in the middle of lighter type of the same style. Using rules, spot squares can also provide a "heavy area"other than bold for a powerful point of visual attraction/emphasis.
: Describes how bold type can stand out in the middle of lighter type of the same style. Using rules, spot squares can also provide a "heavy area"other than bold for a powerful point of visual attraction/emphasis.
Form
: The distinction between a capital letter and its lowercase equivalent/a roman letter and its italic variant, condensed and expanded versions of typeface also included under the contrast of form.
Fig 1.18 Form in letters
: The distinction between a capital letter and its lowercase equivalent/a roman letter and its italic variant, condensed and expanded versions of typeface also included under the contrast of form.
Fig 1.18 Form in letters
Structure
: The different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif.
: The different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif.
Texture
: Refers to the way the lines of type look as a whole up close and from a distance. Depends partly on the letterforms themselves/ how they are arranged.
: Refers to the way the lines of type look as a whole up close and from a distance. Depends partly on the letterforms themselves/ how they are arranged.
Fig 1.19 Texture in letters
Direction
: The opposition between vertical and horizontal, and the angles between. Turning one word on its side can dramatically affect a layout.
Fig 1.20 Direction in letterforms
: The opposition between vertical and horizontal, and the angles between. Turning one word on its side can dramatically affect a layout.
Fig 1.20 Direction in letterforms
Color
: Use of color is suggested that a second color is often less emphatic in values than plain black on white.
: Use of color is suggested that a second color is often less emphatic in values than plain black on white.
Fig 1.21 (left): contrast, (right): conflict
- Law of Similarity
- Law of Proximity
- Law of Closure
- Law of Continuation
- Law of Symetry
- Law of Simplicity (Praganz)
Fig 1.22 Gesalt Principles
Exercise 1: Typographic Systems
[Task To-do]
-
Create a design on each of the 8 typographic systems
(total of 8 designs) - Size: 200mm x 200mm
- Software used: Adobe InDesign
- Colors: Black + additional one color
Here's the text given to design based on the systems.
" The Design School,
Taylor's University
All Ripped Up: Punk Influences on Design
Open Public Lectures
June 24 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
June 25 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
Manish Acharia, 11AM-12PM
Lecture Theatre 12 "
Process
Software used: Adobe InDesign
[ Axial ]
Fig 2.1 First few attempts on axial
.jpg)
Fig 2.2 Another axial attempt
Fig 2.3 Final Axial system
[ Radial ]
Fig 2.4 Radial system
[ Dilatational ]
Fig 2.5 Dilatational system
[ Random ]
Fig 2.6 Few random system attempts
Fig 2.7 Final draft of random system
Fig 2.8 First attempt on Grid system
Fig 2.9 Final outcome of grid system
[ Modular ]
Fig 2.10 Modular systems
[ Transitional ]
Fig 2.11 Transitional system
[Bilateral]
Fig 2.12 Bilateral system
Final Typographic Systems
-combined-
-02.jpg)
Fig 2.13 Final Typographic systems combined
Fig 2.14 Final Typographic Systems (No grids)
Fig 2.15 Final Typographic Systems (With baseline grids)
Exercise 2A
Type & Play
[Task To-do]
- Finding an image; preferably textured/patterns
- Deconstructing an image
- Identifying letterforms
- Extracting letterforms
- Identify a reference
- Refining letterforms
Process
Finding image
> Finding textured images for this exercise. Image selected must have a strong & consistent character to be able to deconstruct the letterforms.
.png)
Fig 3.1 texture image finding
After rummaging through the images, in the end I used this yarn
texture that is from a crochet stitch for my letter deconstruction
process.
Fig 3.2 chosen image
Digitizing process
Software used: AI
Software used: AI
.png)
Fig 3.3 Tracing the letters out on the image
> Traced out a few letters on the image(T,Y,L,N,A). The letters appeared to be more rounded and cartoon-like when
extracted.
.png)
Fig 3.4 Extracted characters of letters T,Y,L,N,A
.png)
Fig 3.5 Digitization process of the letters
Fig 3.6 Process of letterforms
Final outcome
Fig 3.7 Final 'L' letter
Fig 3.8 Final 'A' Letter
Fig 3.9 Final 'Y' letter
Fig 3.10 Final 'T' letter
Fig 3.11 Final 'N' letter
-05.jpg)
Fig 3.12 Final letterforms (JPEG)
Fig 3.13 Final Letterforms (PDF)
Exercise 2B
Poster
Poster
> Using the same image that I did for the deconstruction of
letterforms.
.png)
> To cut out the outline strokes on the letters: Select the
stroke> Object> Outline Stroke> Shift + select all (the
whole letter) > pathfinder: Minus Front
Fig 3.17 Final outcome of the letterform poster (PDF)
Feedbacks
W1:In the first week, We had a briefing on this module by Sir Vinod. We
watched the lecture playlist videos on this topic, tried a quick
exercise using the text provided, and were instructed to do one each
on all 8 of the typographic systems as our first exercise.
W2(General Feedback): Do not compress/stretch the text forcibly.
W3(General Feedback): The deconstructed letters should come
with some characteristics as the original image. Consistency is
key.
W4(General Feedback): When creating a wordmark, it should have
a meaning behind it besides only having a visual of what people are
able to see. We need to explain our artwork/sketches more.
Reflections
Experience
For the first exercise Typographic Systems, it was kind of like an
experimental task trying to explore how the text should be placed
according to each of the formats/guidelines of the 8 typographic
systems. The grid and modular systems still got me a little confused but
eventually, I've gotten a better clarification on how to differentiate
these two systems. For the second exercise Type & Play, it was
honestly challenging for me to find a decent image that can be used to
trace out letters from the shapes in the image. Didn't really think that
I executed well in digitizing and refining my own letterforms especially
in the poster part but overall I can say that it was interesting to see
how a typeface can be formed out of an image to slowly refining them
into a well-fitting font.
Observations
From what I have observed in this two exercises, I noticed that having a good layout is crucial when it comes to design.
Further Reading
Typographic design: Form & Communication
Fig 4.1 Typographic design
This book firstly brings us into the evolution of typography and then slowly proceeds further into the anatomy of how the typography has been made and work. By applying the visuals onto this book, it gives a clearer understanding to readers especially designers to understand better on how a typographic element can definitely affect the way we view things.
