Typography/ Task 1: Exercises

25 Sept 2023 - 3 Nov 2023 (Week 1 - Week 6)
Natalie Chu Jing Xuan, 0354589
Typography, Bachelor of Design (Honours) in Creative Media
Task 1

Jumplinks



Final outcomes

Lectures


Week 1: Briefing/Introduction (25/10/2023)
Since this is our first lecture of the semester, Mr Vinod gave us briefing about this module. We created our Blogger account and start with our e-portfolio by watching the Youtube instruction video. I found it a bit confusing because it was my first time using Blogger and I learnt that instead of typing multiple dashes to make a divider line, we can switch from 'Compose view' to 'HTML view' to change 'br' with 'hr'. 

1.0 Typography: Development/Timeline
What is typography? According to Google, typography is:-
  • the style and appearance of printed matter.
  • the art or procedure of arranging type or processing data and printing from it,
    The term 'typography' can dates back to the early 17th century, when it originated from Frencch 'typographie' and Modern Latin 'typographia'. 

    1.1 Early letterform development: Phoenician to Roman

    Figure 1.1.1 Evolution from Phoenician letter
    Writing meant scratching into wet clay with sharpened stick or carving into stone with chisel. The forms of uppercase letterforms evolved with the tools and materials to write. This means that the tool that we hold in our hand has a very  important influence on the type of writing that is created. 

    1.2 Hand script from 3rd - 10th century C.E.

    • Square capitals were found in Roman monuments with serifs added to the finish of the main stokes. 
    • Rustic capitals was a compressed version of square capitals but the pen or brush was held at an angle of approximately 30° off the perpendicular. 
    • Roman cursive typically were simplified for speed. 
    • Uncials incorporated some aspects of the Roman cursive and some scholars think that uncials refer to letters that are one inch high. 
    • Caroline minuscule is a mediaeval European script designed to facilitate cross-regional identification of Jerome's Vulgate Bible's Latin alphabet.

    1.3 Blackletter to Gutenberg's type

    Figure 1.3.1 Blackletter (Textura)

    A condensed, sharply vertical letterform known as Blackletter or textura acquired popularity in Northern Europe. In the south, a rounder, more open hand known as the 'rotunda' gained popularity. 

    1.4 Text Type Classification


    Figure 1.4.1 Text Type Classification from 1450-1990

    Week 2: Lecture 2 (2/10/2023)
    Mr Vinod reviewed some of our blogs at random and provided feedback on how to enhance them. He then went on to look at our sketches in the Facebook comment section. I recognised that the concepts for the word "Fire" contain much too many graphics to effectively express it, as well as what are the most typical thoughts and designs for a word. 

    2.0 Text/Tracking: Kerning and Letterspacing
    Definitions for kerning, letterspacing and tracking in typography:
    • Kerning - the automatic correction of space between letters
    • Letterspacing - the act of adding space between letters
    • Tracking - the addition and deletion of spaces within words or sentences
    Figure 2.0.2 Example of Normal tracking, Loose tracking and Tight tracking

    2.3 Text/Texture
    Different fonts are suitable for different messages. A skilled typographer must be able to choose which font best fits the message that is wanted. 

    Figure 2.3.1 Anatomy of A Typeface

    2.4 Text/Leading and Line Length
    • Type size - Text should be large enough to be read easily at arms length.
    Figure 2.4.1 No leading vs Too much leading
    • Leading - Text that is set too tightly encourages vertical eye movement; reader easily loose their place. Type that is set too closely distract the reader from the material at hand.
    • Line length - Maintaining a line length of between 55 and 65 characters is a decent general rule.

    2.5 Text/Type Specimen Book

    Figure 2.5.1 Sample Type Specimen Sheet

    The purpose of a type specimen book is to offer a precise reference for several aspects such as type, size, leading, and line length.

    Week 3: Lecture 3 (9/10/2023)

    3.0 Text/Indicating Paragraphs
    There are several options for indicating paragraphs. 

    Figure 3.0.1 Pilcrow

    Pilcrow - symbol (¶) that indicates the start of a new paragraph or text part.
    Figure 3.0.2 Line space

    Line space - leading between the paragraphs. Hence if the line space is 12pt, then the paragraph space is also 12pt. 

    Figure 3.0.3 Line space vs Leading

    Figure 3.0.4 Standard intention

    Standard intention - the size of the indent is equal to the text's point size or line spacing.
    Figure 3.0.5 Extended Paragraph

    Extended Paragraph - creates unusually wide columns of text.

    3.1 Text/Widows and Orphans
    In traditional typesetting, there are two unpardonable gaffes - widows and orphans.

    Figure 3.1.1 Example of widow and orphan
    • Widow - a short line of type left alone at the end of a column of text.
    • Orphan - a short line of type left alone at the start of new column.
    Both widows and orphans are regarded as serious errors in the justified text. Widows are treated with somewhat more forgiveness in the flush right and ragged left text (but not much). Orphans are still not forgiven.

    3.2 Text/Highlighting Text

    Figure 3.2.1 Examples of how to highlight text

    Different kinds of emphasis require different kinds of contrast.

    Figure 3.2.2 Reduce size of text to ensure visual cohesion of text

    To ensure visual cohesion of the text, we can reduce the size of the text sometimes. 

    Figure 3.2.3 Right example ensures readability is at the best

    Maintaining the text's left reading axis while highlighting text with a coloured field at the back ensures most effective readability. 

    Figure 3.2.4 Typographic elements outside the left margins

    Placing typographic elements outside the left margins to maintain a strong reading axis.

    3.3 Text/Headline within Text
    Chapters texts can be subdivided into a variety of ways. The responsibility of a typographer is to ensure that the reader understands exactly what each of these heads represents in terms of prominence within the text and how they relate to one another.

    Figure 3.3.1 'A' head

    A head signifies a separate division between the topics covered in a section. 'A' heads are bold, small cap, and placed larger than the text. 

    Figure 3.3.2 'B' head

    B head is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. Bold serif, bold san serif, tiny caps, and italics are used to display B heads.

    Figure 3.3.3 'C' head

    C heads, although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. 

    3.4 Text/Cross Alignment

    Figure 3.4.1 Cross Alignment of text

    Cross aligning headlines and captions with text type reinforces the architectural sense of the page-the structure-while articulating the complimentary vertical rhythms.

    Figure 3.4.2 Examples of cross alignment

    Above, one line of headline type cross-aligns with two lines of text type, and four lines of headline type cross-align with five lines of text type.

    Week 4: Lecture 4 (16/10/203)

    4.0 Basic/ Describing letterforms
    Knowing a letterform's component parts make it much easier to identify specific typefaces.

    Figure 4.0.1 Baseline, Median, X-height
    • Baseline - The imaginary line the visual base of the letterforms.
    • Median - The line defining the x-height of letterforms.
    • X-height - The heigh in any typeface of the lowercase 'x'.
    Figure 4.0.2 Stroke
    • Stroke - Any line that defines the basic letterform.
    Figure 4.0.3 Apex/Vertex
    • Apex/ Vertex - The point that created by joining two diagonal stems (Apex above and Vertex below).
    Figure 4.0.4 Arm
    • Arm - Short strokes off the stem of the letterforms, either horizontal or inclined upward. 
    Figure 4.0.5 Ascender
    • Ascender - The portion of the stem of a lowercase letterform that projects above the median.
    Figure 4.0.6 Barb
    • Barb - The half-serif finish on some curved stroke.
    Figure 4.0.7 Beak
    • Beak - The half-serif finish on some horizontal arms.
    Figure 4.0.8 Bowl
    • Bowl - The rounded form that describes a counter. The bowl may be open or closed.
    Figure 4.0.9 Bracket
    • Bracket - The transition between the serif and stem.
    Figure 4.0.10 Cross Stroke
    • Cross Stroke - The horizontal stroke in a letterform that joins two stems together.
    Figure 4.0.11 Crotch
    • Crotch - The interior space where two strokes meet.
    Figure 4.0.12 Ear
    • Ear - The stroke extending out from the main stem or body of the letterform.
    Figure 4.0.13 Finial
    • Finial - The rounded non-serif terminal to a stroke.
    Figure 4.0.14 Leg
    • Leg - Short stroke off the stem of the letterform, either at the bottom or inclined downwards. 
    Figure 4.0.15 Ligature (right)
    • Ligature  - The character formed by  the combination of two or more letterforms.
    Figure 4.0.16 Link, Shoulder, Spine
    • Link  - The stroke that connects the bowl and the loop.
    • Shoulder  - The curved stroke that is not part of a bowl. 
    • Spine - The curved stem of S.
    Figure 4.0.17 Stress
    • Stress  - The orientation of the letterform, indicated by the think stroke in round forms.
    Figure 4.0.18 Swash
    • Swash  - The flourish that extends the stroke of the letterform.
    Figure 4.0.19 Tail
    • Tail  - The curved diagonal stroke at the finish of certain letterform.
    Figure 4.0.20 Terminal
    • Terminal - The self-contained finish of a stroke without a serif. Terminals may be flat ('T' above), flared, acute ('t' above), grave, concave, convex, or rounded as a ball or teardrop.

    4.1 Basic/ The Font
    The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

    Figure 4.1.1 Uppercase(up), Lowercase(down)
    • Uppercase - Capital letters
    • Lowercase - Small letters
    Figure 4.1.2 Small Capitals(up)
    • Small Capitals - Uppercase letterforms draw to the x-height of the typeface. 
    Figure 4.1.3 Uppercase Numerals (up), Lowercase Numerals (down)
    • Uppercase Numerals - Also called lining figures, same height as uppercase letters.
    • Lowercase Numerals - Also known as old style figures or text figures, are set to x-height with ascenders and descenders.
    Figure 4.1.4 Italic
    • Italic - Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. It refer back to fifteenth century Italian cursive handwriting. 
    Figure 4.1.5 Punctuation, miscellaneous characters(up), Ornaments(down)
    • Punctuation, miscellaneous characters - It can change from typeface to typeface although all fonts contain standard punctuation, miscellaneous characters. 
    • Ornaments - Used as flourishes in invitations or certificates. 

    4.2 Basic/ Describing typefaces

    Figure 4.2.1 Roman, Italic, Oblique
    • Roman - The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments.
    • Italic - Named for fifteenth century Italian handwriting on which the forms are based. 
    • Oblique - Conversely are based on roman form of typeface. 
    Figure 4.2.2 Boldface, Light
    • Boldface - Thicker stroke than a roman form. 
    • Light - A lighter stroke than the roman form. 
    4.3 Basic/ Comparing typefaces

    Figure 4.3.1 Different typefaces

    The men and women who rendered them all sought to achieve two goals: easy readability and an appropriate expression of contemporary aesthetics.

    Week 5: Lecture 5 (23/10/2023)

    5.0. Letter/ Understanding letterforms

    Figure 5.0.1 Letter A in Baskerville

    The uppercase letterforms, despite appearing symmetrical, are not due to the Baskerville stroke form's two stroke weights and unique arcs of each bracket connecting the serif to the stem.

    Figure 5.0.2 Letter A in Univers

    The uppercase letterforms, despite appearing symmetrical, have a thinner left slope than the right stroke, showcasing the meticulous care a type designer takes to create harmonious and expressive letterforms.

    Figure 5.0.3 Comparing 'a' of Helvetica(left) and Univers(right)

    The complexity of each individual letterform is evident when comparing the lowercase 'a' of Helvetica and Univers, two seemingly similar sans-serif typefaces. The difference in character between the two is evident through their stem finishing and bowls meeting.

    Figure 5.0.4 Example

    The x-height measures the size of lowercase letterforms, but curved strokes like 's' (figure above) must rise above the media to appear the same size as the adjacent vertical and horizontal strokes.

    5.1 Letters/ Form/ Counterform

    Figure 5.1.1 Example

    Recognizing specific letterforms is crucial, as is developing a sensitivity to the counterform, which is the space described by the strokes of the form. This concept is especially important when working with letterforms like lowercase 'r' without counters.

    Figure 5.1.2 Letter 'S' and 'g'
     
    A detailed examination of a letter's form and counter may provide valuable insights into the composition process and the letter's form, as well as help one appreciate its unique characteristics and the balance between the two.

    Refer to the Figure5.1.2, every time a letterform is enlarged, the 'S' stays the same, but the 'g' becomes less recognisable as individual letters are examined out of context.

    5.2 Letters/ Contrast 
    The basic principles of Graphic Design apply directly to typography.

    Figure 5.2.1 Contrasts

    The simple contrasts produces numerous variations: 
    Small + organic/ Large + machined; Small + dark/ Large + light

    Week 6: Lecture 6 (30/10/2023)

    6.0 Typography/ Different Medium
    Typography can now be found on a variety of screens and is influenced by factors such as operating system, fonts, device, screen, and viewport. As typesetting occurs in the browser, our perception of typography changes based on page rendering.

    6.1 Print Type Vs Screen Type

    Type for Print

    Figure 6.1.1 Example of novel

    Type was initially designed for print reading, prior to screen reading, and it is the designer's responsibility to ensure smooth, flowing, and enjoyable text. 

    Because of their elegant, intellectual, and highly readable characteristics, Caslon, Garamond, and Baskerville are popular print typefaces. These versatile, easy-to-digest classic typefaces have a neutrality and versatility that makes typesetting easy and suitable for small font sizes.

    Type for Screen

    Web fonts are optimised and tweaked to improve readability and performance in a variety of digital environments. Taller x-height, wider letterforms, open counters, heavier strokes, reduced stroke contrast, and modified curves and angles are among them. Open spacing is also essential for smaller typefaces, particularly at smaller sizes. 

    Hyperactive Link/ hyperlink
    A hyperlink is a piece of text or an image that allows users to navigate to a different document or section within the current one. They are typically blue and underlined and can be found on most web pages. When you move the cursor over a hyperlink, the arrow transforms into a small hand pointing at the link.

    Font Size for screen

    In terms of reading distance, 16-pixel text on a screen is comparable to text in a book or magazine. Books are typically set at 10 points, whereas reading them at arm's length necessitates at least 12 points, or about 16 pixels on most screens.

    System Fonts for Screen/Web Safe Fonts

    Based on their operating system, devices come with their own pre-installed font selection. However, each operating system, such as Windows, MacOS, and Google's Android, has its own fonts. 

    Figure 6.1.2 Font size for Screen(left) and Print(right)

    Pixel Differential Between Devices

    Figure 6.1.3 Pixel differential between devices

    Because of the different pixel sizes, the screens on PCs, tablets, phones, and televisions vary in size and proportion. A laptop's 100 pixels are vastly different from a large 60'' HDTV's 100 pixels, indicating significant variation within a single device class.

    6.2 Static Vs Motion

    Static Typography
    Static typography, with its limited expressive potential, is used for a variety of purposes in various forms such as billboards, posters, magazines, and fliers. Its emotional connection with the audience determines its impact, making it appropriate for informational, promotional, formal, or aspirational designs.

    Motion Typography

    Typographers can "dramatise" type using temporal media, resulting in fluid and kinetic letterforms. Film title credits and motion graphics display typographic information over time, which is frequently animated. In music videos and advertisements, type is used to set the tone of the content or to express brand values. The typography on-screen has evolved to be expressive, preparing the audience for the film.

    Instructions


    7.0 Task 1: Exercises - Type Expression
    In this task, we need to design words that shows it own meaning through typography and fonts.

    7.1 Sketches
    There are 7 words to pick, which are: Dizzy, Electric, Fire, Gun, Dizzy, Cry and Freeze. I chose Dizzy, Slide and Fire to start with my sketches.
    • Dizzy

    Figure 7.1.1 Sketches of Type Expression for "Dizzy"

    For "Dizzy", I came out of 4 different designs. I worked with a spiral form on the letter "i" and a circle inside the letter "d" to convey the effect of dizziness. In addition, stars were used to symbolise dizziness. This is because I remembered watching cartoons as a child. When cartoon characters became dizzy, stars would appear on their heads. 

    Figure 7.1.2 Example of dizzy from Tom & Jerry
    • Slide
    Figure 7.1.3 Sketches of Type Expression for "Slide"

    I designed 6 similar designs of 'Slide', because I was trying to work out for better ones. Basically, my inspiration surrounding with the slide we normally seen on playgrounds. 'S' as the sliding part and 'lide' as the ladder. I also figure out that the letter 'l' can also be the slide for the letter 'i' to slide down.

    Figure 7.1.4 Image of slide
    • Fire
    Figure 7.1.5 Sketches of Type Expression for the word "Fire"

    For the word 'Fire', I uses fire and match sticks to design the word "Fire", where I knew later that it was not acceptable. I uses FIRE to create the wood under the camp fire. 
    • Gun
    Figure 7.1.6 Sketches of Type Expression for the word "Gun"

    I designed 3 similar designs of 'Gun'. I uses the letter 'G'/'g' to represent the gun to shoot the letter 'u' and 'n'. 

    7.2 Digitising Type Expression
    After sketching the type expressions for each words, I moved on to digitalise them. 
    • Dizzy
    Figure 7.2.1 Digitising the word "dizzy"

    I chose wavy and curvy types of fonts such as 'Bembo Std', 'ITC Garamond Std', 'Janson Text LT Std', and 'ITC New Baskerville Std'. Just like what I mention in my sketches, I use stars and spiral elements to bring out the dizziness. I also added three lines besides one of the dizzy on the bottom left because of the dizziness that showed up when cartoon characters were dizzy. I did not follow precisely with my sketches because I found out that there are no fonts that may be used. 
    • Slide

    Figure 7.2.2 Digitising the word "Slide"

    I used three types of fonts in creating my 'Slide', which are 'Janson Text LT Std', 'Universe LT Std' and 'ITC New Baskerville Std'. I figure out that I can use the letter 'S' as the sliding part of the Slide and letter 'E' as the ladder. 

    Figure 7.2.3 Sketches of example final outcome

    These four are the words I chose for my final outcome and the rough ideas of all. Firstly, the word "Slide", I picked this because I find it quite fun imagining the letter 'i' sliding down from the letter 'l'. Next, I like the spiral and star element in the word "dizzy". "Fire" on the other hand uses letter 'i' to create a fire element on top of the letter 'i'. Lastly, I uses the letter 'u' as the bullet of the gun shooting out from the letter 'G' to 'N'. 

    FINAL OUTCOME
    Figure 7.2.4 Final outcome of four text expressions

        

    7.3 Animation
    After digitalised 4 different words, I chose Slide as my final animation word because I this is the one I wish I could do at the beginning of this task. I'm looking for something that can conveys the idea well, and I believe my 'Slide' is it. 

    Figure 7.3.1 Progress of animation using Adobe Illustrator

    First, I viewed the tutorial videos by Mr Vinod on Youtube and I start doing my animation with Adobe Illustrator. I made a total of 8 art boards at first to have a quick peek of how my animation will look like. 

    Figure 7.3.2 Progress of animation using Photoshop

    Then, I moved on to Photoshop with my animation, adjusting the flow of the letter 'i' sliding down from letter 'l'.

    Figure 7.3.3 First animation

    After my first attempt, I received feedback from Mr.Vinod that the 'i' can drop and stop for awhile until it slide again. So I continue to create more artboards.

    Figure 7.3.4 Progression of second attempt

    I deleted 2 artboards from the first attempt and added 4 new artboards in the front and 6 new artboards at the end. The first 4 artboards showing the letter 'i' standing on letter 'l' and start to slide off. Then, the last 6 demonstrate how the letter 'i' bumped into letter 'd' and fall down, landing on the floor. 

    Figure 7.3.5 Third attempt

    After adding artboards, I work out the animation again and decided to delete the last 3 artboards that shows the 'i' landing on floor. This is because if it lands on the baseline it looks more like jumping instead of sliding. Therefore, I decided to s    top my animation on the letter 'i' bumping into 'd'. 
    FINAL ANIMATION
    Figure 7.3.6 Final animation of 'Slide'

    8.0 Task 2: Exercise - Formatting Text
    On week 4, we started with our exercise 2. This time, we will be using InDesign to complete our task.

    8.1 Exercise

    Figure 8.1.1 Without kerning, With kerning and With kerning & tracking

    Figure 8.1.2 without kerning VS with kerning & tracking

    This is an exercise to let us understand kerning and tracking before we start with our new task. Figure 8.1.2 shows the differences between text without kerning and text with kerning and tracking.

    8.2 Exercise 2
    Figure 8.2.1 Text formatting exercise

    In this exercise, I uses InDesign to create my text formatting exercise following the tutorial videos of Mr.Vinod. 

    8.3 Text Formatting
    Figure 8.3.1 Progress of Text 

    I tried with the layout by first placing the headline and body text, then finding some related images to fit in the layout. During my research on Helvetica, I discovered that this font was widely used in many companies, including Panasonic, BMW, Jeep, Toyota, and others. 

    Figure 8.3.2 Example of Helvetica font logos

    Figure 8.3.3. Example of Helvetica font at NYC subway
        
    Besides that, Subway in New York City also uses Helvetica fonts. Therefore, I decided to find images of New York City Subway to fit into my task. 

    FINAL OUTCOME OF TEXT FORMATTING:

    HEAD
    Font/s: Bembo Std Regular, Bembo Std Bold, Bembo Std Italic
    Type Size/s: 49pt, 60pt, 13pt
    Leading: 40pt
    Paragraph spacing: Space After 4.233mm

    BODY
    Font/s: Bembo Std Regular
    Type Size/s: 10 pt
    Leading: 12.5 pt
    Paragraph spacing: Space After 4.41 mm
    Characters per-line: 56-61
    Alignment: Justify with last line aligned left

    Margins: 90mm top, 12.7mm left + 12.7mm right + 20mm bottom
    Columns: 2
    Gutter: 8mm
    Figure 8.3.4 Final outcome without grids



    Figure 8.3.5 Final outcome with grids



    Feedbacks


    Week 1
    General Feedback: Watched lecture videos, set up my blog and provide the link in the google sheets.
    Specific Feedback: - 

    Week 2
    General Feedback: Sketches 3 words, "Slide", "Fire", and "Dizzy".
    Specific Feedback: The word "Fire" uses too much graphic to express, but two sketches of the word "Dizzy" looks fine.

    Week 3
    General Feedback: Uses Adobe Illustrator to design the word "Dizzy" and "Slide".
    Specific Feedback: Need more details progression on how to digitalise the type expressions.

    Week 4
    General Feedback: Created my animation for 'Slide'
    Specific Feedback: The letter 'i' of the Slide can slide down from the letter 'l' and drop down, then paused for awhile only replay the gif.

    Week 5
    General Feedback: Use InDesign to complete Task 1 Exercise 2 - Text Formatting.
    Specific Feedback: Busy layout, deleted one of the image and rearrange a bit of the layout. Leading must greater than font size by at least 2.5 - 3.

    Reflections


    Experiences: I have never used Blogger or any other Adobe software before. I had to gradually get used to and figure out this new experience. These tasks and the lecture videos helped me pick up some typographic fundamentals. I had very few ideas at first, so I was really lost. As a result, the ideation and sketching phases will require more time. In addition, I made my own animation for the first time, which opened up a whole new experience for me. I'll need to add more and more artboards in order to produce a smooth animation, which took a lot of effort and time. Making layout for an article was also something interesting. 

    Observations: I've noticed that because I'm not familiar with Adobe Illustrator and Photoshop, I usually find that my creativity is limited when I design with them. Along with learning how to utilise various Adobe software through YouTube videos, I also aimed to produce the ideas I had in my head. And after some practise and a few attempts, I could finally convey what I wanted to. 


    Findings: I've found that sometimes the ideas that come to me are the same as those of my classmates, therefore in order to avoid coming up with ideas that are too similar, I need to come up with some fresh ones. My completion of these tasks has given me the opportunity to learn many typographic skills and basics, which I believe will make my upcoming tasks and experiences go more smoothly. 


    Further Readings


    • Typography Systems: Harmony, Proportion, and Rhythm, by Kimberly Elam
    Figure 9.1 Typography Systems: Harmony, Proportion, and Rhythm, by Kimberly Elam, Week 1 (25/10/2023) 

    Kimberly Elam is the author of "Typography Systems: Harmony, Proportion, and Rhythm". The book investigates the connection between mathematical concepts and typography to produce aesthetically pleasing and harmonic design compositions.


    This book explores the fundamentals of proportion, going over the Fibonacci sequence, the Golden Ratio, and other concepts while offering an introduction to typography and the ideas of systems in design. It also shows how mathematical principles can be applied to typography. In order to create visually balanced typographic layouts, Kimberly Elam explains the significance of achieving harmony and contrast in typography design using grid systems and mathematical principles as a guide. The notion of rhythm in typography, along with the application of Gestalt psychology and visual perception principles to typography, are then concluded in this book. To aid readers in putting the ideas and principles into practise, this book also includes practical exercises and design challenges.

    • A Type Primer, by John Kane
    Figure 9.2 A Type Primer, by John Kane, Week 2 (4/10/2023)

    The basic concepts of typography, including typefaces, fonts, layout, and design, are briefly covered in this book. It is a helpful tool for people who are unfamiliar with typography and want to understand the fundamentals of using type efficiently in graphic design, publishing, and other related professions.

    The topics covered in "A Type Primer" included typography's history, anatomy, typeface classification, typographic hierarchy, composition and layout, typography in practise, software, and typography on the web. 

    It addresses the various elements and parts of letterforms, such as serifs, and examines the historical evolution of typography. In addition, it discusses the use of type to create visual hierarchy and structure in design, with an emphasis on font selection, size, weight, and style. This book also covers composition and layout principles, such as grid systems, alignment, and space. It covers not just the fundamentals of typography but also useful tips, particular difficulties, and efficient project design, ranging from posters to brochures and websites. 

    • Just My Type, by Garfield Simon
    Figure 9.3 Just My Type, by Simon Garfield, Week 3 (15/10/2023)

    "Just My Type: A Book About Fonts" by Simon Garfield is an interesting yet simple look at the world of typography and fonts. It goes into the history and significance of many typefaces, providing light on the importance of fonts in our daily lives and how they influence design, culture, and communication.

    Typefaces and personalities, font design and creation, font usage in daily life, the function of fonts in branding, font fandom and controversies, the influence of technology, popular culture, and lesser-known fonts are some of the themes and subjects covered in this book. 

    Deep study was done by author Garfield, who covered history of fonts from the oldest fonts to today's digital fonts, emphasising key moments and significant designers. This book also explores the emotional and psychological effects of font selections and how different typefaces can portray various moods and expressions. The book also discussed the science and art of font design, the importance of fonts in branding, and how companies select typefaces that best represent their brands.   

    • The Vignelli Canon, by Massimo Vignelli 
    Figure 9.4 The Vignelli Canon, by Massimo Vignelli, Week 4 (20/10/2023)

    Vignelli's design principles and methods for graphic design, typography, and visual communication are discussed in the book. Numerous design-related subjects are covered in the book, such as typography, colour, grid systems, and the use of white space. It provides an understanding of Vignelli's modernist and minimalist design aesthetic, which is defined by clarity, simplicity, and timelessness. 

    The Vignelli legacy, the intangibles of design, the grid, typography, colours, composition and layout, paper and printing, the design process, design discipline, and unsolicited advise are all covered in this book. 

    The design philosophy of Massimo Vignellii is covered initially, along with abstract design concepts like pragmatics, syntactics, and semantics. The significance of applying a grid system to design layout and organisation was then highlighted. The concepts of colour theory, harmony, and contrast were also emphasised in this text, along with the need of following rules and staying away from unnecessary complication. In addition to this, more information regarding the options for paper and printing methods and how they affect the final design were given. Finally, the author shares a variety of aspects of the profession and provides helpful guidance and suggestions for designers.

    • Typography Design: Form and Communication, Rob C., Philip B., Ben D., Sandra M.,Mark S.

    Figure 9.5 Typography Design: Form and Communication, by Rob C., Philip B., Ben D., Sandra M.,Mark S., Week 5 (28/10/2023)

    Co-authors Rob Carter, Ben Day, and Philip B. Meggs, Ben Day, Sandra Maxa, and Mark Sanders wrote the book "Typographic Design: Form and Communication". In the fields of typography, visual communication, and graphic design, it is a highly regarded and frequently used resource. The basic ideas of typographic design are examined in this book, along with how important they are to clear communication. 

    The key topics of the book is the introduction of typography, type anatomy and classification, type as visual language, hierarchy and composition, grid systems, typography in print, in digital media, branding, culture and production. 

    It introduces the idea of type as a visual language, highlighting the function of size, weight, and style in expressing message and emotion. Apart from that, it explores the features of type use in print design, covering legibility, readability, and aesthetics. The use of typographic design in digital media, including websites, mobile applications, and other screen-based platforms, is also covered in the book. 

    [Back to top]


    Comments

    Post a Comment

    Popular posts from this blog

    Major Project I

    Image
    3rd February 2025 - 25th March 2025 (Week 1 - Week 8) Natalie Chu Jing Xuan, 0354589 Major Project, Bachelor of Design (Honours) in Creative Media Major Project I Table of Contents  Module Information Booklet (MIB) Major Project I Task 1: Proposal Development Task 2: Design Proposition Task 3: Concept Presentation Feedbacks Reflection Module Information Booklet (MIB)   Module Information Booklet (MIB) Major Project At the beginning of the semester, we were introduced to Major Project I , the first phase of our Final Year Project (FYP). During the briefing, we gained an understanding of the module's structure and expectations. We were then required to form teams of four and explore different ideas before finalizing a concept that aligns with our UI/UX speci...
    Read more

    Information Design/Final Project: Infographic Video Animation

    Image
    3rd February 2025 - 23th March 2025 (Week 1 - Week 7) Natalie Chu Jing Xuan, 0354589 Information Design, Bachelor of Design (Honours) in Creative Media Final Project: Infographic Video Animation Table of Contents  Module Information Booklet (MIB) Final Project Proposal Pre-Production Production Post-Production Final Outcome Feedbacks Reflection Module Information Booklet (MIB)     Module Information Booklet (MIB) Final Project:   Infographic Video Animation Our group consists of 8 members: Yan Zhi Xuan (0369425) – Leader Sin Jun Ming (0364638) ...
    Read more

    Application Design I / Project 1: Mobile Application Proposal

    Image
    21st April 2025 - 16th May 2025 (Week 1 - Week 4) Natalie Chu Jing Xuan, 0354589 Application Design I, Bachelor of Design (Honours) in Creative Media Project 1: Mobile Application Proposal Table of Contents Module Information Booklet (MIB) Lectures Project 1: Mobile Application Proposal Draft Proposal Research Final Mobile Application Proposal Feedbacks Reflections Module Information Booklet (MIB) Fig.1 Module Information Booklet (MIB) Lectures Week 1/ Introduction to Mobile Application Design During the first week, Mr. Zeon briefed us on the module outline and his expectations for this subject. He introduced us to the basics of mobile application design and emphasized the importance of good app design in enhancing user experience.  He also highlighted that our assignment progress would be closely monit...
    Read more