TYPOGRAPHY - TASK 1: EXERCISES
23.9.24 - 1.11.24 (Week 1 - Week 6)
Michelle (0373843)
Typography / Bachelor of Design (Honours) in Creative Media / Taylor's
University
Task 1: Exercises - Type Expression
TABLE OF CONTENTS
1. Lectures
1.1 Week 1
1.1 Week 1
1.2 Week 2
1.3 Week 3
1.4 Week 4
1.4 Week 4
1.5 Week 5
3.1.1 Research
3.1.2 Ideation3.1.3 Final Outcome
3.1 Text Formatting
3.2.2 Final Outcome
Handscript from 3rd - 10th century C.E.
Preferably, maintain a middle the gray value, not too dark, not too
light.
Indicating paragraphs:
Cry
I struggled the most the word "cry", so I did the most research on it with the addition of other similar word (e.g. drop, tears, water).
Sleep
Cry
Sleep
Swirl
Digitizing Approved Designs
Cry
Sleep
Swirl
Animating the Chosen Word
I already have an idea on how to do the animation from when I do my word sketches, so all I did was plan out how I'm going to convert the idea to the actual animation frames. I did the frames individually in adobe illustrator first, then I inserted it to adobe photoshop to see how it looks and alter its timing. I created guides for me to follow to keep my shapes consistent.
Word Animation
Firstly, we are introduced to InDesign along with some lessons about kerning & tracking to be applied to our name.
3.2.1 Kerning & Tracking
3.2.2 Leading, Paragraph Spacing, Cross Alignment3.2.2 Final Outcome
1. LECTURES
Week 1: Introduction & Development
Typo 0 - Introduction
- Typography: the art and technique of arranging type to make written language legible, readable and appealing when displayed.
- Typeface: the entire family of fonts/weights with similar characteristics/styles.
- Font: the individual style or weight within the typeface.
Typo 1 - Development
Valuable insight gained:
- In a world dominated by western media (e.g., Europe, America), it's crucial for us Asians to raise and publicize the true identity and creations from our comm unity.
- As a learner, it is important to broaden and filter resources because not everything out there is accurate.
Typography's History (from the western perspective)
Early letterform development:
Phoenician to Roman
- Phoenicians, wrote right to left.
- Greeks, invent boustrophedon (a method of alternatively reading text line from right to left then reverse) and changed the orientation of letterforms.
- Both Phoenicians and Greeks didn't use letter space and punctuations.
- Etruscan then Romans, carried certain qualities of strokes to carved letterforms (change weight from vertical to horizontal & broadening stroke at start and finish).
|
| Figure 1.1.1 Letter A Evolution |
Handscript from 3rd - 10th century C.E.
- Square capitals (had serifs to finish main strokes, variety of width stroke
- Rustic capitals (faster & easier to write but harder to read compared to square capitals, developed for pragmatic reasons)
- Cursive hand (simplified handscript for speed, the beginning of lowercase letterform)
- Uncials (mark the formal beginning of lowercase letterform)
- Charlemagne (the first unifier of Europe) - issued edict in 789 to standardize all texts - entrusted task to Acluin of York, Abbot of St Martin of Tours - Monks rewrote text using majuscules, miniscule, capitalization, and punctuation - Sets standart for 1 century of calligraphy.
- The fragmentation of Charlemagne's empire led to regional differences in Alcuin's script. For instance:
- Blackletter/Textura, characterized by its condensed and strongly vertical letterforms, became popular in northern Europe.
- Rounded and open style Rotunda gained favor in the south.
Text Type Classification (by Alexander Lawson)
|
| Figure 1.1.2 Type Classification |
Conclution:
- Typography (the way we write) are influenced by geography, tools available for use, and the characteristic of people.
- Standarization then expression
Week 2: Text - Part 1
|
- Kerning: Automatic adjustment of space between individual letters
- Letterspacing: Add space between the letters (In a sentence, all letters get adjusted)
-
Tracking: Addition and removal of space in word or
sentence
Formatting
|
| Figure 1.2.1 Alignments |
- Flush left, begins at the same point but ends whenever the last word on the line ends, allows consistent spacing.
-
Centered, symmetry: giving equal value and weight to
both ends of each line.
- Adjusting line breaks to prevent unevenness.
- Flush Right, emphasis on the end of a line.
- useful for connecting text and image with right orientation.
|
| Figure 1.2.2 Justify |
- Justified, increasing or decreasing spaces between words.
- can cause rivers (white space vertically).
Texture
|
| Figure 1.2.3 Anatomy of Typeface |
Different types produces different gray values. A type with a
heavy stroke width produces a darker mass on page rather than type
with lighter stroke. Sensitivity to color difference is essential in
creating successful layouts.
|
|
|
Leading & Line Length
- Purpose: easy and prolonged reading
- Type size : large enough to be read easily at arms length.
- Leading :
- Too tight encourages vertical eye movement causes reader to easily loose track.
- Too loose creates striped patterns that distract reader.
- Line length : Rule of thumb : keep line length between 55-65 characters.
- Extremely tight/loose length impairs reading.
Type Specimen Book
Displays examples of typefaces in different sizes as precise
reference for elements like type, size, leading, and line
length.
|
| Figure 1.2.5 Specimen Book |
Week 3: Text - Part 2
Indicating paragraphs:
-
The Pilcrow (¶)
- Line Spacing
- Indentation
-
Extended paragraphs
Widows & Orphans : to be avoided
-
Widows: Short line of text left alone at the end of a column of text.
-
Orphans: Short line of text left alone at the start of new column.
Highlighting text
-
Italic
- Bold
-
Change typeface
-
Change color
-
Placing a field of color behind text
-
Quotation marks (e.g. bullets)
Headline Within Text
-
A head, indicate a clear break between the topics within a
section.
-
Titles are larger than text, in bold and small
caps.
-
B head, indicate a new supporting argument or example for the topic
at hand.
-
subordinate to A head.
-
B heads are shown in small caps, italic, bold serif, and
bold san serif.
-
C head, highlights specific facets of materials within 'B' Head
text.
-
C heads shown in small caps, italics, bold serif, and
bold an serif.
-
Followed by an em space for visual separation.
Cross Alignment
Figure 1.3.1 Specimen Book
Cross aligning headlines and captions with text type reinforces
the architectural sense of page while articulating the
complimentary vertical rhythms.
- Widows: Short line of text left alone at the end of a column of text.
- Orphans: Short line of text left alone at the start of new column.
- Italic
- Bold
- Change typeface
- Change color
- Placing a field of color behind text
- Quotation marks (e.g. bullets)
Headline Within Text
- A head, indicate a clear break between the topics within a section.
- Titles are larger than text, in bold and small caps.
- B head, indicate a new supporting argument or example for the topic at hand.
- subordinate to A head.
- B heads are shown in small caps, italic, bold serif, and bold san serif.
- C head, highlights specific facets of materials within 'B' Head text.
- C heads shown in small caps, italics, bold serif, and bold an serif.
- Followed by an em space for visual separation.
Cross Alignment
 | |
|
Cross aligning headlines and captions with text type reinforces
the architectural sense of page while articulating the
complimentary vertical rhythms.
Week 4: Basic
Describing letterforms
There are many terms used to describe parts which build a letter.
The Font
A full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks. Specifically, it includes:
- Uppercase capital letters
- Lowercase letters
- Small capitals
- Uppercase numerals/lining figures
- Lowercase numerals/text figures
- Italics
- Punctuations, miscellaneous characters
- Ornaments
Describing Typefaces
Type families are often characterized by their origins, allowing you to use this knowledge to identify them, as they typically reflect the era they come from. For instance:
- Roman letterforms are based on inscriptions from Roman monuments,
- Italic letterforms are based on the fifteenth century Italian handwriting.
A well-chosen font effectively conveys the intended message, so it's important to determine the message before selecting a font.
 |
| Figure 1.4.1 Describing Fonts |
Week 5: Understanding
2. INSTRUCTIONS
3. PROCESS WORK
Exercise 1: Type Expression
Research
Climb
The verb climb is used in many cases (e.g. climbing a wall, climbing a mountain, climbing up the stairs), that's why I do some exploration on it to get a clearer vision about the word.
The verb climb is used in many cases (e.g. climbing a wall, climbing a mountain, climbing up the stairs), that's why I do some exploration on it to get a clearer vision about the word.
|
| Figure 3.1.1.1 Climb References (Source: Pinterest) |
I struggled the most the word "cry", so I did the most research on it with the addition of other similar word (e.g. drop, tears, water).
|
|
|
Sleep is the hardest word to come up with a creative idea because a lot
of people seem to have the same idea. To have a wider view of the word, I
did more ecplorations.
Swirl
With the word swirl, I wasn't sure of it's definition, so I searched on it's meaning. According to Oxford dictionary, the verb "swirl" means move in a twisting or spiralling pattern. For more accuracy, I also look for how the word is represented through an image.
|
|
|
With the word swirl, I wasn't sure of it's definition, so I searched on it's meaning. According to Oxford dictionary, the verb "swirl" means move in a twisting or spiralling pattern. For more accuracy, I also look for how the word is represented through an image.
|
|
Figure 3.1.1.4 Swirl References (Source: Pinterest) |
Swirl doesn't take me a lot of researching. With swirl, after getting a
good grasp of it's definition, the ideas just came to me as I sketch.
Ideation
Sketches
After I did my research, I started to do my sketches. Some of these were inspired from my references, and some is an original idea which naturally pops up in my head as I draw. The ones checked with blue is the design approved by Sir Max.
After I did my research, I started to do my sketches. Some of these were inspired from my references, and some is an original idea which naturally pops up in my head as I draw. The ones checked with blue is the design approved by Sir Max.
Climb
|
|
|
|
|
|
|
|
Figure 3.1.2.3 Sleep Sketches |
|
|
|
After I got my sketches reviewed and selected by Mr. Max, I started
digitizing them in Adobe Illustrator.
Climb
Climb
|
|
|
|
|
Figure 3.1.2.6 Cry Digitation |
|
|
|
|
|
|
Animating the Chosen Word
I already have an idea on how to do the animation from when I do my word sketches, so all I did was plan out how I'm going to convert the idea to the actual animation frames. I did the frames individually in adobe illustrator first, then I inserted it to adobe photoshop to see how it looks and alter its timing. I created guides for me to follow to keep my shapes consistent.
|
|
Figure 3.1.2.9 Climbing letters guide |
%20%2028_10_2024%2009_08_10.png)
|
|
Figure 3.1.2.10 Climbing movement guide |
c. Final Outcome
4 Words Type Expression
|
| Figure 3.1.3.1 Final type expression "climb, cry, sleep, swirl" (JPG), Week 3 (7.10.24) |
| Figure 3.1.3.2 Final type expression "climb, cry, sleep, swirl" (PDF), Week 3 (7.10.24) |
Word Animation
|
|
|
|
| Figure 3.1.3.4 Final animated type expression "climb" (GIF), Week 4 (14.10.24) |
Exercise 2: Text Formatting
Kerning & Tracking
In week 5 at class, we created the text formatting below. This exercise is super beneficial in helping us to understand what text formatting is, how InDesign works, and how to do the task.Firstly, we are introduced to InDesign along with some lessons about kerning & tracking to be applied to our name.
|
|
Figure 3.2.1.1 Text formatting introduction (before kerning & tracking) |
 | |
|
Leading, Paragraph Spacing, Cross Alignment
After practicing on formatting words, we learn to format lines and
paragraphs in class. Below are the practice we did together at class.
|
|
Figure 3.2.2.1 Text formatting exercise |
 |
| Figure 3.2.2.2 Text formatting exercise with grid |
Headline
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 65 pt
Paragraph spacing: 0
Sub-headline
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 12 pt
Leading: 22 pt
Paragraph spacing: 0
Body
Typeface: Bembo Std
Font/s: Bembo Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 50-60
Alignment: left justified
Hyphenate: on
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm
After class, We are instructed to create 6 layouts for the task formatting
task to then be selected at class on week 6.
Figure 3.2.2.3 Text formatting options
Figure 3.2.2.4 Text formatting options with grids
Text Formatting 1 - chosen for final
Headline
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 56 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Hyphenate: on
Page Format
Margins: 30 mm top + bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
Text Formatting 2
Headline
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 26 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Hyphenate: on
Page Format
Margins: 80 mm top, 48 bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
Text Formatting 3
Headline
Typeface: Futura Std
Font/s: Heavy
Type Size/s: 32 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: Futura Std
Font/s: Heavy
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: Futura Std
Font/s: Book
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 50-60
Alignment: left justified
Hyphenate: on
Page Format
Margins: 25 mm top + bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
Text Formatting 4
Headline
Typeface: ITC New Baskerville Std
Font/s: Bold
Type Size/s: 30 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: ITC New Baskerville Std
Font/s: Bold
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: ITC New Baskerville Std
Font/s: Roman
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Hyphenate: on
Page Format
Page Format
Margins: 25 mm top + bottom, 12,7 mm left + right
Columns: 2
Gutter: 12,7 mm
Text Formatting 5
Headline
Typeface: Univers LT Std
Font/s: 65 Bold
Type Size/s: 30 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: Univers LT Std
Font/s: 55 Oblique
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: Univers LT Std
Font/s: 45 Light
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 50-60
Alignment: left justified
Hyphenate: on
Page Format
Margins: 30 mm top + bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
Text Formatting 6
Headline
Typeface: ITC Garamond Std
Font/s: Bold
Type Size/s: 55 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: ITC Garamond Std
Font/s: Bold
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: ITC Garamond Std
Font/s: Book Narrow
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Hyphenate: on
Page Format
Margins: 30 mm top + bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
Final Outcome
|
| Figure 3.2.3.1 Final name text formatting (JPEG), Week 5 (21/10/24) |
|
|
Figure 3.2.3.2 Final paragraph text formatting (JPEG), Week 5
(21/10/24) |
|
|
|
| Figure 3.2.3.4 Final paragraph text formatting (PDF), Week 5 (21/10/24) |
| Figure 3.2.3.4 Final paragraph text formatting with grids (PDF), Week 5 (21/10/24) |
Headline
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 56 pt
Leading: 0
Paragraph spacing: 0
Sub-headline
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 12 pt
Leading: 24 pt
Paragraph spacing: 0
Body
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 55-65
Alignment: left justified
Hyphenate: on
Page Format
Margins: 30 mm top + bottom, 15 mm left + right
Columns: 2
Gutter: 15 mm
4. FEEDBACK
Week 1:
General Feedback: Preview of typography class and future
assignments, blogger set up (e-portofolio), 4 words voting for task 1
(climb, cry, cleep, swirl), exploration on ideas for the word
sketches.
Week 2:
General Feedback: Sketch words, lesson about the tools and features in AI useful for the
typography task (digitizing words), handed sketches.
Specific Feedback: Mr. Max suggests me to think more creatively since many
people could think of the same idea, so I widened my
inspirations and upgrade my sketches.
Specific Feedback: Mr. Max suggests me to think more creatively since many people could think of the same idea, so I widened my inspirations and upgrade my sketches.
Week 3:
General Feedback: Short brief about the animation task next week, sketches
review, words digitization with guidance in using Adobe
Illustrator.
Specific Feedback: Got my sketches for the 4 words selected and approved.
Week 4:
General Feedback: Digitized words submission, introduction to Adobe Illustrator and Photoshop for
animation, animating word (Mr. Max told us to keep it simple but impactful).
Specific Feedback: Mr. max picked out which design's best for my final word
digitalization, then told me to consider which design
is more simple to animate and which design should be left as
it is unanimated.
Week 5:
General Feedback: Text formatting, tutorial in Adobe InDesign, animation submission.
Specific Feedback: Mr. Max told me to increase the time period for my last
animation frame to give it a standing still moment before it
repeats, then approved on it.
5. REFLECTIONS
Experience
Overall, this task 1 exercise is both a fun and challenging process for me. Through this task,
I got to know more about digital design and familiarize myself to
three different Adobe softwares (Illustrator, Photoshop, &
InDesign) all in one task, which is awesome!
The weekly progressed tasks and checkpoints also becomes a great
exercise for me to manage my time well and do my best to be consistent,
diligent, and discipline. Special thanks to Mr. Vinod for providing a
very structured and detailed information through teams which
helped a lot in directing us on what to do each week.
I am also really thankful for Mr. Max to have taken the time and energy each week to explain and tutor us in detail, since some of us are still new to Adobe softwares and typography. Having a face to face tutorial each week where we can directly ask and practice in class is very helpful. Not to forget all the tips, notes, and constructive feedbacks given kindly by Mr. Max every week is also very beneficial in making the completion progress easier.
In conclusion, I'm really grateful to have finished typography's
task 1 exercise, and I appreciate Mr. Max and Sir Vinod for
guiding us all until the end of task 1.
Observations
After attending class each week, meeting lots of classmates, I
found out that some people could study new things, find ideas, and
transform it into a design really quickly. I'm the type who likes
to take my time, have reasoning for every decision, then design
carefully. However, it took me much more time and energy, which
makes my work progress very slow. Seeing different types of
learning and designing styles from my classmates inspires me to
keep practicing in order to improve my pace in designing.
Findings
From doing each assignments in task 1, I learned on how to explore
and find unique ideas, select, then transform them
technically into real designs. I leant that little/subtle but
accurate changes/adjustments can have a big and powerful impact. I
also pick up many things outside of typography like how to create a
blog and animation. Moreover, from the recorded lecturers and
further readings, I discovered many new things about typography as
the week goes on. As a person who likes rules and things to be
clear, I enjoyed leaning about the rules and basics of typography
through the lecturers. It makes certain decision in designing
faster. I'm fond of the way typography allows us to merge a set of rules into limitless creativity and possibilities.
6. FURTHER READING
Week 1:
Font Categories
I flip trough how different fonts are categorized, along with the
styles and families displayed in the book as a form of further
exploration since we're given 10 different typefaces to use.
Week 2:
Letters, Words, Sentences
Simple choices in typeface, size, weight, and position on the page can strengthen the words' meaning/description.
I explored more about word representation from the examples provided inside the book.
Simple choices in typeface, size, weight, and position on the page can strengthen the words' meaning/description.
I explored more about word representation from the examples provided inside the book.
Week 3:
Type Classification & Identification
In general, typefaces could be devided in 3 cathegories: with
serifs (little feet/tail), without serifs, and scripts (looks like
cursive handwritting).
To help me choose what typeface to use in my digitalization, I look
through the different typefaces in the book.
Week 4:
Character & Word Spacing
Kerning: character spacing so pleasing to look at
Tracking: adjustment to selection of characters, words and spaces to fit them to a desired space without altering
type size and line spacing.
I dived more into
kerning & tracking outside of class from the book.
Week 5:
Application of character spacing for effect and meaning needs to have readability factor as consideration:
- Loosely tracked text disintegrates vs tightly tracked text sacrifies readibility.
-
Uppercase forms are drawn to stand on their own (epigraphic
origins), however lowercase forms require counter form created between
letters (calligraphic origins) to maintain line of reading.
I kept the insight gained from the book in my mind throughout creating
my text formatting task.
Comments
Post a Comment