Typography / Exercises


29.03.2021 - 02.05.2021 (Week 1 - Week 5)
Wong Wan Jun (0338248)
Bachelor of Computer Science (School of Computer Science and Engineering)(Minor)
Task 1 / Exercises


LECTURES

Week 1: Introduction 

In the first lecture, we get to know our lecturers for this module, Mr.Vinod and Mr. Shamsul. Before briefing us on the module information and expectations, they also introduced some platforms that frequently used to share information and take attendance. Moreover, Mr. Vinod shared tutorial video based on E-portfolio. We were asked to update it weekly and keep it organised well so that we are able to document every design process logically.  After that, we are briefed on our first task for Typography which is 'Type Expression' and some lecture videos are provided to us at our own  disposal for independent learning.

Typography
  • basically a creation of a typeface and it is widely used in animations, software applications, website, products labeling, signage system etc. 
  • plays an important role in delivering information.
    • For example, the effectiveness of signage system is directly proportional to the skill levels in typography. 
  • bad typeface will lead to misconceptions and ramifications. 

Week 2: Historical Development & Timeline

Letterform 
  • was early developed by Phoenician back in 4th Century B.C.E.
Fig1.1: Letterforms-Typographic Anatomy

Tools and mediums play an important role on how the letterform looks like. Then, the Greeks decided to change the direction of writing. This style of writing is called Boustrophedon, which meant that lines of text are read alternately from left to right then right to left. The orientation of the letterforms also change followed by the change of direction. 

Timeline of typography development
1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750 Transitional ⟶
1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1990 Serif/ Sans Serif 
Fig1.2: Timeline of Serif Typefaces

Week 3: Basic // Describing Letter Fonts

 Jargon in Typography

Fig1.3: Typography line terms
  • Baseline
    • Imaginary baseline
  • Median
    • Imaginary line that defines x-height
  • x-height
    • Height of the lowercase x in any typeface
  • Stoke
    • Any line that defines basic letterform
  • Apex/ Vertex
    • top point where two strokes are joined together(A for upper, V for bottom)
  • Arm
    • when a horizontal stroke is not attached to a stem on one end
  • Barb
    • Half serif finish of curved stroke
  • Bowl
    • circle found in letterform. Eg. d, b, c, e, o, etc.
  • Cross stroke
    • stoke found in lowercase t and f.
  • Crotch
    • Interior space within letterform
  • Descender
    • part of letter drops below baseline. Eg. g, j, p, q, and y.
  • Finial
    • curved of tapered end of a stroke.
  • Ligature
    • special character that joined 2 characters
    • improve the efficiency of reading. Eg. fi.
  • Spine
    • S is the best example for spine. 
  • Stress
    • diagonal or vertical change in stroke width across a letter.
    • Diagonal stress is based on handwriting.
  • Small uppercase
    • uppercase letterforms drawn to x-height of the typeface. 
    • prevent visual disruption when a lot of uppercase letters were used together.
Ascender height tends to be slightly above capital letter ( cap height) to create an illusion that they are of same height with capital letters.

Describing typeface
  • Roman- book
  • Boldface -thicker stroke then roman form
  • Light
  • Condense - Roman form in compressed state
  • Extended
  • Italics refers to Italian handwriting
  • Oblique is based on Roman form of type face.
TypeTalk: Italic vs. Oblique | CreativePro Network
Fig1.4 : Italic vs Oblique

9 most essential typefaces that represent 500 years of type design: 

Fig1.5 : Typefaces from lecture's video

Week 4: Text 1

Kerning

  • automatic adjustment of space between letters.
  • kern when using full uppercase letters.
Letterspacing
  • need to add space between the letters    

Tracking

  • addition & removal of space in word / sentence 
Counterform
  • blackspaces between the white.
  • is broken when adding spaces between letterforms. 
  • once broken, readability reduced.
Uppercase letterforms: designed to be able to stand on their own.
Lowercase letterforms require counterform to maintain the line of reading.

Fig 1.6: Kerning & Letterspacing

Text Formatting

  • Flush left
    • Each line starts at the same point and ends accordingly to its last word. 
    • Spaces are consistent throughout the text, allowing the type to create evegrey value.
  • Centered
    • Symmetry upon the text, assigning equal weight & value to both ends of line.
  • Flush right
    •  Emphasis on the end of  line as opposed to its start.
    •  Hard to read.
  • Justified
    • achieve symmetrical shape by adding / reducing spaces between words.
Text more important than Type 
If  font before text, reconsider typeface used.
Ascender and descender height <  x-height,  higher readability.

Leading & Line Length
  • Type Size
    • Large enough to read easily at arm's length
  • Leading
    • Over-tightly type encourages vertical eye movement (readers lose focus easily) 
    • Over-loosely type creates stripped patterns that distract readers.
  • Line length
    • Shorter line requires less leading
    • Longer line requires more leading. 
    • Keep line length between 55-65 characters.
    • Extremely long / short line lengths impairs reading.
Type Specimen Book
  • Provide an accurate reference for type, type size, type leading, type line length etc.
  • Shows samples of typefaces in various different sizes (allow reasonable type choice)
  • Compositional Requirement
    • Text should create a field that occupy a page / screen.
  • Enlarge type to 400% on screen to get clear sense of relationship between descenders on one line and ascenders on line below.
  • Nothing replaces looking closely at an actual point out of work.

    Week 5: Text 2

     
    Indicating Paragraph

    • Pilcrow -- ¶
      • indicate paragraph space.
    • Line space
    • Indent
      • size of line spacing / point size of text
    • Indentation is best used when the text is justified.
      • ragging on right is bad.

     Widows & Ophans

    • Reducing 0.5pt
      • match with fonts x-heights
      • don't stand out in a small amount of text
    •  In document which contains large amount of texts, lowercase numeral is recommended.
    • Maintain left reading axis when highlighting text.
      • ensure good readability.
    • Graphical elements bullet points can be placed outside the margin 
    • Single ' : foot ; double '' : inches

    Information of Hierarchy

    • A Head 
      • main headline
    • B Head
      • subheadline
    • C Head 
      • lorem Ipsum

    Cross Alignment 

    • reinforces architectural sense of the structure of the page.


    INSTRUCTIONS

    <iframe src="https://drive.google.com/file/d/1oQcpKqngmynJzprkNH7o5BXnIQWQlL9U/preview" width="640" height="480"></iframe>


    TASKS


    Exercise : Type Expression

    Our task for this week is sketching ideas for word expression based on our creativity. We are asked to pick 4 out of 7 words (slice, scream, wave, punch, eat, spin, point) from poll. We then use Adobe Illustrator to digitise the words based on a set of typefaces provided. 
    Some example of Type Expression:
    Fig 2.1: Wave (Reference: Pinterest), 4th April 2021

    Fig 2.2: Sleepy (Reference: Pinterest), 4th April 2021

    Fig 2.3: Point (by Mr.Vinod), 4th April 2021

    Word selected: Point, Eat, Slice, Spin

    Sketches:
    Fig 3.1: Sketches, 6th April 2021


    Digitized Words:

    <iframe src="https://drive.google.com/file/d/1dI4DnPX0vsps5R6qxljMiE6o4VcIZyal/preview" width="640" height="480"></iframe>

    Fig 3.2: Final Type Expression, 14th April 2021

    Type Expression Animation:

    For animation, I choose the word 'eat'. I plan to make it visually look like the alphabet 'a' and 't' are getting into big 'e'.
    Fig 3.3: Progress of Type Animation (Illustrator), 16th April 2021
    Fig 3.4: Type animation 1st attempt, 16th April 2021

    After animating it, the result not really same as my expectation. The motion of 'a' was too simple and overall the animation move too fast. I decided to improve it by slower the animation and add some motion to 'a'.
    Fig 3.5: 2nd Type Animation, 16th April 2021

    Mr Vinod suggested me to upright my 'e' while 'a' and 't' drop from top.

    Fig 3.6: Progress of Type Animation (Illustrator), 23th April 2021






    Fig 3.7: Final Type Animation, 23th April 2021

    Exercise : Formatting Text

    We were guided by pre-recorded lecture's video to complete exercises by using Adobe InDesign. 
    Fig4.1: Name with different typefaces, 27th April 2021

    We then start to edit document layout. It is important to ensure we have suitable font size (8 to12), line length (55 to 65), leading (+2/2.5/3pt of font size) and paragraph spacing (follow leading). In order to make our document looking better, we may turn off hyphenate and adjust on kerning & tracking(+/- 3). It also reduce ragging of words efficiently.

    Fig4.2: Progress of Formatting Text (Indesign), 29th April 2021

    Fig4.3: Formatting Text, 29th April 2021
    Fig4.4: Final Formatted Text, 29th April 2021

    <iframe src="https://drive.google.com/file/d/1almCwEu0OmPLtNtIVqHsQ7ggl1cc_Dr4/preview" width="640" height="480"></iframe>


    FEEDBACKS

    Week 1: 

    No feedback received.

    Week 2:

    General feedback: 

    For word expression, most of us are insufficient in exploration and slightly word distortion is allowed. We are advised to prevent using graphic elements other than the shades of grey to express the words. Mr. Vinod reminded us to ensure we had done our weekly task before class and avoid getting late to class. 

    Specific feedback:

    I have received feedback from group divided. They like my word design layout which is clean but more exploration will be better.


    Week 3:

    General feedback:
    Mr. Vinod asked us not to delete other people's feedback and change the default typeface. Also, switch on the camera to ensure we are concentrated in class.
    Specific feedback:

    Overall the expressions match the word meaning except for “point” can be improved. They did sit well on art-board but some of the composition was not enough impactful.  I should explore more to improve my design.


    Week 4:


    General feedback:
    Mr Vinod encouraged us to read some related books and reminded us to update our e-portfolio weekly.

    Specific feedback:
    Mr Vinod & Mr Shamsul commented on my e-portfolio. They reminded me to add the horizontal rule to my blog and date to image caption. Also, read some related books so I can fill further reading section. Mr Vinod suggested me on type animation to upright my alphabet 'e' while alphabet 'a' and 't' drop from top. 


    Week 5:


    General feedback:
    Mr Vinod reminded us to watch prerecorded youtube lecture video.

    Specific feedback:

    The kerning and tracking is appropriately done. Adjustment of font size(10pt), line length, leading(12pt) & paragraph spacing(12pt) is suitable and choice of left alignment is pleasant to read. Well controlled ragging and established cross-alignment. Widows and orphans present.


    REFLECTIONS

    Experience:
    I was immersed throughout first lecture given and looking forward to next lecture. After first lecture, I have a clearer understanding on what I am going to learn in this module and what should I do to gain more relevant knowledge. It was undeniable that this module requires a lot of effort in order to complete every tasks given on time. I hope that I could handle this module well.
    Observation:
    Although online learning was a big challenge, both lecturers and students are giving full cooperation on communication. We are able to communicate effectively through online platforms. Our doubts were solved instantly and lecturers were able to receive our respond immediately. However, being a disciplined student is a prerequisite for virtual learning.
    Findings:
    I was inspired when watching video given and doing some readings. Reading is crucial for typography as we could gain better sense and understanding something that cannot be taught by others. It was not easy to process a creative design as every design has a story and it required designer to work hard enough. Documenting every design process was beneficial for me because it makes me feel organised. 


    FURTHER READING


    The Elements of Typographic Style, Version 4.0 – Typographica
    Fig 5.1 The Elements of Typographic Style by Robert Bringhurst, 5th May 2021

    Fig 5.2 Palatino Sans shared, 5th May 2021 
    Fig 5.3 A 42pt roman titling font & 16pt italic text font, 5th May 2021 

    This is a book on typography and style by a Canadian typography, poet and translator -- Robert Bringhurst. I selected this book as it has considered "the finest book ever written about typography". It guide us on basic of typography with different typefaces provided. The essential point to remember while exploring typography style is implementing basic design principles which is scale, direction, repetition, texture, transparency, negative or positive spaces. 











    Comments

    Popular Posts