TYPOGRAPHY TASK 01 / EXERCISES
Typography / Bachelor of Design (HONS) in Creative Media
Task 01 - Exercises: Type Expressions & Text Formatting
LECTURES
WEEK 1
-
INTRODUCTION & E-PORTFOLIO BRIEFING
TYPOGRAPHY - "The art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process."
Typography is an essential skills in any design discipline, it allow us to develop attributes and characteristics of design elements such as the details and layouts. Typography is also visible in a lot of design discipline and in our real lives such as in animation, websites, app design, signage design, book and poster design, logo types, etc. A good typography can better communicate the message such as in signage design and create a more user friendly interface for software application.
"Typography is an art, and good Typography is art" - Paul Rand
It is difficult to teach art, but processes that is necessary to create good art can be taught.
Understand the rules before breaking them
Get used to getting feedback and criticism, be determined and persistent in learning.
FONT - refers to the individual font or weight within a typeface, I.e.:
Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman,
etc.
|
|
|
| Figure 1.3 Examples of typeface |
|
| Figure 1.4 Words chosen for Task 1: Type Expression |
-
TYPOGRAPHIC DEVELOPMENT
The first lecture begins with a disclaimer that a lot of the information presented are from the perspective of the western community which may contain incorrect information and we should do our own research to justify our perspective.
"GIVE VOICE TO THE VOICELESS" - research more on local content or other aspect of community that are less known and contribute knowledge to a larger body of knowledge.
The lecture then continues about the development and timeline of typography.
Early letterform development: Phoenician to Roman
|
| Figure 1.5 Evolution of letterform from the Phoenician |
|
| Figure 1.6 Phoenician to Roman |
|
| Figure 1.7 "Boustrophedon" - Direction of writing for the Greeks |
The writing direction of Phoenicians is from right to left.
The Greeks
changed the writing direction to 'Boustrophedon’ (how the ox ploughs), which read alternately from right to
left and left to right. They also changed the direction of the
letterforms.
|
|
WEEK 2
-
BASICS IN TYPOGRAPHY
Describing Letterforms
Baseline - Imaginary baseline
Median - Imaginary line that defines
x-height
X-height - Height of the lowercase x in any typeface
|
| Figure 2.1 Typography line terms |
Arm - Short strokes
Ascender - Portion of the stem of lowercase letterform that projects above the median
Beak - Half serif finish on horizontal arms
Bowl - Circle found in letterform, I.e. d, b, c, etc. Either opened or closed.
Bracket - Transition between serif and stem
Cross bar - Horizontal stroke that joins two stems
Cross stroke - stroke found in lowercase t and f
Crotch - Interior space within letterform
Descender - Portion of stem below baseline
Ear - Stroke that is extending out of the main stem of letterform
|
| Figure 2.2 Uppercase & Lowercase |
|
| Figure 2.3 Describing typefaces |
|
| Figure 2.4 10 Typefaces |
BASICS IN TYPOGRAPHY
Typography: Text / Tracking: Kerning and Letter spacing
Kerning - Automatic adjustment of spacing between letters
Tracking -
Addition and removal of space in a word or sentences
|
| Figure 3.1 Comparison of kerning and without kerning |
|
| Figure 3.2 Comparison of tracking |
Centered - Symmetry upon text, assigning equal value and weight to both ends of any lines.
Flush right - Emphasis on the end of line as opposed to its start
Justified - Imposes symmetrical shape on text by adding or reducing space between words
Texture of text
 |
|
Figure 3.3 Anatomy of A Typeface |
|
| Figure 3.4 Type size, leading and line length |
|
| Figure 3.5 Sample Type Specimen Sheet |
WEEK 4
-
BASICS IN TYPOGRAPHY PART 2
Indicating paragraph
|
| Figure 4.1 Line space vs leading |
Widow - Short line of type left alone at the end of a column of a text
Orphans - Short line of type left alone at the start of new column
|
|
Figure 4.2 Widow vs Orphan |
WEEK 5
-
UNDERSTANDING BASIC ASPECTS OF
TYPOGRAPHY
Understanding letterforms
Uppercase letter may appear as symmetrical but it is actually not
symmetrical in a close examination.
The stroke on the left and right
have unequal weight.
Maintaining x-height
|
| Figure 5.1 Maintaining x-height |
|
|
Figure 5.2 Counterform |
|
| Figure 5.3 Contrast of letter |
|
| Figure 6.1 Screen design for website |
Type was designed intended for reading from print long before we read from screen.
Print type
Good typeface for print - Caslon, Garamond, Baskerville, they are highly readable when set at small font size.
Screen type
 |
| Figure 6.2 Type for screen |
 |
| Figure 6.3 Font size on screen vs on print |
 |
| Figure 6.4 Motion Typography |
INSTRUCTIONS
TASK 1 - EXERCISE 1: TYPE EXPRESSION
Distort // Bite // Cozy // Fragile // Box // Accelerate
PROGRESS
-
SKETCHES FOR TYPE EXPRESSION DESIGN
 
|
|
Figure 7.3 & 7.4 Digital Sketches (Week 2, 6/9/2022)
Figure 7.5 & 7.6 Improvised Digital Sketches (Week 3,
13/9/2022)
FINAL
- TYPE EXPRESSION |
|
|
Figure 7.7 Final version of type expression - JPEG (Week 3,
13/9/2022) |
-
ANIMATION OF CHOSEN TYPE EXPRESSION
|
| Figure 7.10 First Attempt of GIF (Week 3, 13/9/2022) |
|
| Figure 7.9 Animation of "bite" in photoshop (Week 3, 13/9/2022) |
|
| Figure 7.11 Timelines of frame for the final GIF (Week 4, 20/9/2022) |
FINAL
-
"BITE" ANIMATED GIF
|
| Figure 7.12 Final version of animated GIF (Week 4, 20/9/2022) |
TASK 1 - EXERCISE 2: TYPE FORMATTING
|
| Figure 8.1 Kerning Exercise (Week 4, 20/9/2022) |
|
|
Figure 8.2 Exercise of Tracking, Alignment, Ragging of text (Week 4,
20/9/2022) After doing the exercises, I'm more familiar with the tools in Adobe
InDesign and how to make a layout for the text formatting exercise. I made
two layout draft and go with draft #2 for the final version of this
exercise. |
 |
| Figure 8.3 Draft layout #1 (Week 4, 20/9/2022) |
 |
| Figure 8.4 Draft layout #2 (Week 4, 20/9/2022) |
FINAL
-
TYPE FORMATTING
|
| Figure 8.5 Final layout - JPEG (Week 5, 27/9/2022) |
|
| Figure 8.6 Final layout with visible guides and grids - JPEG (Week 5, 27/9/2022) |
HEAD
Font/s: ITC Garamond STD Light & Ultra Narrow
Leading: 24 pt
Paragraph spacing: -
Leading: 11pt
Paragraph spacing: 3.881mm
Characters per-line: 8 - 44
Alignment: Align left
Margins: Top , Left , Right - 12.7mm
Bottom - 80mm
Columns: 3
Gutter: 4.233mm
FEEDBACK
-
-
Sizing and composition within a frame is important to create visual impact within a space.
SPECIFIC FEEDBACK
Pause for a few seconds at the end of the frame to get a smoother loop of the animation
REFLECTIONS
-
I learned on how to use Adobe Illustrator and Adobe InDesign in doing the exercises of type expression and type formatting task. It was difficult as first when I was attempting on my first digital sketch, but after watching the lecture playlist and tutorial videos I am more familiarize with how to use the softwares. The first exercise on type expression are a bit challenging for me as only minimal distortion is allowed and overly relying on graphical elements are not allowed. When doing the second exercise, I get to learn about the basics of type formatting using Adobe InDesign and have created a layout for the task.
I have observe that I work better after receiving feedbacks or tutorial in doing the exercises. I need to document more process of my thoughts and sketches when doing the task. I should organise my thoughts and knowledge gain right after the class end. I have also observed that I need more practise in order to improve my skills to create a better type expression, better flow of animation and a better layout for text formatting.
-
Throughout learning in this module, I get to know that typography is an essential skill for me to learn to further my study in the design area. There are a lot of rules and terms in typography that can be hard to memorise but with more practise and doing more practical exercises, I believe I can get more familiar with it and create a better design with my knowledge in typography.
by Massimo Vignelli
|
| Figure 9.1 The Vignelli Canon book cover |
We could search for the meaning by doing research on the subject before we start working on any assignments or projects. [Pg 11]
- I.D.E.A.S. COMPUTER TYPOGRAPHY BASICS
by David Creamer
 |
| Figure 9.2 Front page of the book - I.D.E.A.S. Computer Typography Basics The book stated that the main goal of typography is the readability. The main duty of typography is to transfer information to the reader in an efficient manner. Typography is a tool that can helps us to communicate our idea more efficiently. By learning about the differences between fonts, how fonts "work" on the computer, we can produce a typography of design that not only contains useful information but is easy to read and easy to understand. Special Glyphs (Characters) [Pg 14] Most computers have an option for using foreign characters and special symbols. Adobe InDesign has a built-in Glyph palette, making the special character selection very easy. For other programs, use either Key Caps (Macintosh) or Character Map, available in the system accessories/utilities folder. |
 |
| Figure 9.3 Examples of Special Glyphs Characters |
The font used - some fonts require more line spacing than others to keep their ascenders and descenders from touching with each other
Normally, the percentage option, or auto leading, should be avoided because it can make larger heads look too spread out. When in doubt, use the exact method for all line spacing.
 |
| Figure 9.4 Comparison of percentage and absolute line spacing |
Comments
Post a Comment