Typography - Task 1: Exercises

on
Name: Liong Xenyi (0383125)
Module: Typography (GCD60104)
Date: 21/4/2025 - 23/5/2025 (Week 1- Week 5)
Degree: Bachelor of Design (Honors) in Creative Media 
University: Taylor's University

Task 1: Exercises

Table of Contents
Lecture Notes
Introduction: Type_0_Introduction
What is typography? 
The act of creating letters, the creation of typefaces. Typography is important in every aspect of our lives, where it is used everywhere and anywhere.

Oxford dictionaries suggest it is "the style and appearance of printed matter."

Wikipedia describes it as "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)."

Typography is learned from practice, observation, and reading. It has evolved over 500 years: from calligraphy, to lettering and finally typography. 'Calligraphy' refers to the writing styles, typically traditionally writing on paper, while 'lettering' is drawing out the letters. Similarly with any other crafts that are developed over time, it employs a number of terminologies, conventions and unwritten rules, depending on your disposition or influences with regard to style.

Terminology
Font: a font refers to the individual font or weight within the typeface, i.e.: Georgia Regular, Georgia Italic and Georgia Bold. 
Typeface: a typeface refers to the entire family of fonts/weights that share similar characteristics/styles, i.e.: Georgia, Arial, and Times New Roman.


Lecture 1: Typo_1_Development
Early letterform development: Phoenician to Roman
Left: 4th Century B.C.E - Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Ball Hammon.
Right: Evolution from Phoenician letter

The Greeks changed the direction of writing. Phoenicians wrote from right to left. The Greek developed a style of writing called "boustrophedon" (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right, changing the orientation of the letterforms according to the direction of reading. Greeks, like the Phoenicians, did not use letter space or punctuations.

Etruscan (and the Roman) carvers working on marble painted letterforms before inscribing them. Certain qualities of their strokes - a change in weight from vertical to horizontal, a broadening of the stroke at start and finish - are carried over into the carved letterforms.


Development/Timeline
Hand Script from 3rd - 10th Century C.E.
Square capitals: written version in Roman monuments. Have serifs added to the main strokes, with achieving the variety of stroke widths by angling the reed pen at 60° off perpendicular.

Rustic capitals: a compressed version of square capitals, allowing for twice the words on a sheet of parchment and took less time to write, although it is harder to read. The pen was held at an angle of 30° off the perpendicular. 

Roman cursive: for everyday transactions as the form is simplified for speed. It is the beginning of the lowercase letterforms.

Uncials: incorporated some aspects of the Roman cursive hand. 'Uncia' is Latin for twelfth of anything,which might refer to letters that are one inch (one twelfth of foot) high. However, is is more accurate that uncials are simply small letters.

  Half-uncials: the formal beginning of lowercase letterforms, replete with ascenders and descenders. 2000 years after the origin of the Phoenician alphabet.

Caloline miniscule: Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardise all ecclesiastical texts, entrusting this to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalisation and punctuation which set the standard for calligraphy for a century.

Blackletter to Gutenberg's type
Blackletter (textura) or Rotunda: With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. Blackletter is a strongly condensed vertical letterform that gained popularity in northern Europe. In the south, rounder open hand called Rotunda is more popular.

Gutenberg: Gutenberg's skills include engineering, metalsmithing, and chemistry, He then build pages that accurately mimicked the work of the scribe's hand. His type mold required a different brass matrix, or negative impression, for each letterform.
 


Text Type Classification
1450 Blackletter: The earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe.
Examples: Cloister Black, Goudy Text

1475 Oldstyle: Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found on Roman ruins, evolving away from their calligraphic origins over 200 years, as they migrated across Europe (from Italy to England).
Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino

1500 Italic: Imitating contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page. Originally, it was considered their own class of type, but italics soon were cast to complement roman forms. Since the 16th Century, virtually all text typefaces have been designed with accompanying italic forms.

1550 Script: Originally an attempt to replicate engraved calligraphic forms. This class of type is not entirely appropriate in lengthy text settings. In shorter applications, however, has always enjoyed wide acceptance. Forms now range from formal and traditional to casual and contemporary. 
Examples: Kuenstler Script, Mistral, Snell Roundhand

1750 Transitional: A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing. (Since they were using new technology, they realised they didn't need to use the handwriting styles and made a different one.) Thick to thin relationships were exaggerated, and brackets were lightened.
Examples: Baskerville, Bulmer, Century, Time Roman

1775 Modern: This style represents a further rationalisation of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes become extreme. English versions (like Bell) are also known as Scotch Romans and more closely resemble transitional forms.
Examples: Bell, Bodoni, Caledonia, Didot, Walbaum

1825 Square Serif/Slab Serif: Originally heavily bracketed serif, with little variation between thick and thin strokes. Made for the newly developed needs of advertising for heavy-type in commercial printing. 
Examples: Clarendon, Memphis, Rockwell, Serifa

1900: Sans Serif: Sans means 'without', so this typeface has no serifs at all. The forms were first introduced by William Caslon IV in 1816, but it only became wide-spread in the beginning of the 20th Century. Variation can be either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima).
Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

1900 Serif/Sans Serif: A recent development where this style includes both serif and sans serif alphabets (can be called "semi-serif" or "semi-sans serif").
Examples: Rotis, Scala, Stone



Lecture 2: Typo_3_Text_Part 1
Text: Tracking
Kerning: the automatic adjustment of space between letters. 
Letterspacing: to add space between the letters.
Tracking: the addition and removal of space in a word or sentence


Letterspacing uppercase letters has always been done because they were made to be able to stand on their own, while letterspacing lowercase letters is not well regarded as they were created to maintain the line of reading.

Text: Formatting Text
Flush left: this format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.
Gray value: text on a white page
Ragged: jagged edge or end-point of the left aligned page
Centered: this format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. Because centered type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged.
Flush right: this format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.
Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Text: Texture

Text: Leading and Line Length 
Type size: text type should be large enough to be read easily at arms length.
Leading: text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
Line length: appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading, longer lines require more. (A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line lengths impairs reading.

Composition requirement: text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value, not a series of stripes.
 


Lecture 3: Typo_3_Text_Part 2
Text: Indicating Paragraphs
Several options for indicating paragraphs:
  • Pilcrow (¶) - a holdover from medieval manuscripts seldom used today
  • Line space (leading) - if the line space is 12pt, the paragraph space is 12pt, ensuring cross-alignment across columns of text. (2-3pt larger than the typeface font size)
  • Standard indentation - indent is the same size of the line spacing or the same as the point size of your text (best used when the text is justified/no ragging)
  • Extended paragraph - creates unusually wide columns of text, which can be strong compositional or functional reasons for choosing it (used for academic writing)

Line spacing vs Leading
Line spacing - space between descender of one base line to another descender.
Leading - space between two sentences from one ascender to a descender.

Text: Widows and Orphans
Widow - short line of type left alone at the end of a column of text
Orphan - short line of type left alone at the start of a new column
Designers must take great care to avoid these two things.

In justified text, both widows and orphans are serious gaffes. Flush right and ragged left text is a little forgiving towards widows, while orphans are unpardonable. The only solution to widows is to rebreak the line endings throughout the paragraphs, so that the last line is not noticeably short. Orphans require more effort to make sure that no column of text starts with the last line of the preceding paragraph.

Text: Highlighting Text
Important information can be highlighted with bold, italics, or colours (black, magenta, cyan). When a san-serif font has been bolded, the size is reduced by 0.5pt to match the x-height of the serif typeface.
  • Numbers (aligned figures) or all capital acronyms in the text can be reduced by 0.5pts as well to ensure visual cohesion in the text. The numbers tend to stick out, so reducing it will help align with the letters.
  • When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (on the right) of the text ensures readability.
  • Sometimes, it is necessary to place certain typographic elements outside the left margin of a column of text (extending instead of indenting) to maintain a strong reading axis.
  • Quotation marks can create a clear indent, breaking the left reading axis. Compare the indented quote at the top to the extended quote at the bottom.
Top - Prime  Bottom - Quote
Prime is used for feet and inches, but due to a limited number of keys on the typewriter, they were substituted. This is important to differentiate.

Text: Headline within Text
There are many subdivisions within text of chapters. These has been labelled A, B and C according to the level of importance.

A head indicates a clear break between topics within a section. For example, the 'A head's are set larger than the text, in small caps and in bold.

B heads (subordinate to A heads) indicate a new supporting argument or example for the topic, so they shouldn't interrupt the text as strongly as A heads do. 

C heads (not common) highlights specific material within B head texts. They do not interrupt the flow of reading, usually followed by at least an em space (2 spacebars) for visual separation.

Hierarchy is achieved when putting together a sequence of subheads. There is no single way to express hierarchy within a text, there limitless possibilities.

Text: Cross Alignment
Cross aligning headlines and captions with text type establishes structure while articulating complimentary vertical rhythms.


Back to Table of Contents

Lecture 4: Typo_2_Basic
Basic: Describing letterforms
Baseline: the imaginary line of the visual base on the letterforms
Median: the imaginary line defining the X-height of the letterforms
X-height: the height in any typeface of the lowercase 'x'

Stem: the significant vertical or oblique stroke
Stroke: any line that defines the basic letterform
Apex/Vertex: the point created by joining two diagonal stems (apex - above/vertex - below)
Arm: short strokes off the stem of the letterform, either horizontal (E,F,L) or inclined upward (K,Y)
Ascender: the portion of the stem of a lowercase letterform that projects above the median.
Barb: the half-serif finish on some curved stroke

Bowl: the rounded form that describes a counter - the bowl may be closed or open
Bracket: the transition between the serif and the stem
Cross Bar: the horizontal stroke in a letterform that joins two stems together (A,H)
Cross Stroke: the horizontal stroke in a letterform that joins two stems together (lower lettercase; f,t)
Crotch: the interior space where two strokes meet

Ear: the stroke extending out from the main stem or body of the letterform
Em/En: originally referring to the width of an uppercase M, em is the distance equal to the size of the typeface. An en is half the size of an em. Most often used to describe em/en spaces and dashes

Leg: short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K,R)
Ligature: the character formed by the combination of two or more letterforms

Link: the stroke that connects the bowl and the loop of a lowercase G
Loop: in some typefaces, the bowl created in the descender of the lowercase G
Serif: the right-angled or oblique foot at the end of the stroke
Shoulder: the curved stroke that is not part of a bowl
Spine: the curved stem of the S
Spur: the extension that articulates the junction of the curved and rectilinear stroke

Stress: the orientation of the letterform, indicated by the thin stroke in the round forms
Swash: the flourish that extends the stroke of the letterform

Terminal: the self-contained finish of a stroke without a serif - it can be flat ('T' above), flared, acute ('t' above), grave concave. convex. or rounded as a ball or a teardrop.

Basic: The Font
Small Capitals uppercase letterforms draw to the x-height of the typeface, small caps are primarily found in serif fonts as part of an expert set. Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.

Uppercase Numerals: (A.K.A lining figures) they are the same height as uppercase letters and are set with the same kerning width, best used with tabular material or with uppercase letters.
Lowercase Numerals: (A.K.A old style figures or text figures) they are set to x-height with ascenders and descenders, best used with upper and lowercase letterforms.


Italics: most fonts are produced with a matching italic, but small caps are almost always roman. The forms in italic refer back to the fifteenth century Italian cursive handwriting.
Italic vs Roman

Punctuation/miscellaneous characters: miscellaneous characters can change between typefaces.

Ornaments: used as flourishes in invitations or certificates. Only traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).


Basic: Describing typefaces
Roman: the uppercase forms are derived from inscriptions of Roman monuments, a slightly lighter stroke in roman is known as 'Book'
Italic: based on fifteenth century Italian handwriting, "oblique" conversely are based on roman form of typeface
Boldface: characterised by thicker strokes than a roman form - it can be called semibold, medium, black, extra bold or super. 
Light: a lighter stroke than the roman form, even lighter strokes are called 'thin'
Condense: extremely condensed styles are called 'compressed'
Extended: an extended variation of a roman font

10 Typefaces


Back to Table of Contents

Lecture 5: Typography_5_Understanding
Letters: Understand Letterforms
 The uppercase letterforms are not symmetrical. There are two different stroke widths in the example of Baskerville (left) and Univers (right), creating letterforms that are harmonious and individually expressive.
 

The complexity of each individual letterform is shown by examining the lowercase 'a' of similar sans-serif typefaces - Helvetica and Univers.
 

Letters: Maintaining X-height
Keep in mind that curved strokes, such as 's', must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Letters: Form/Counter-form
Counter-form (counter): the space between when letters are joined to form words (dark space below)
It is important concept when working with letterforms like lowercase 'r' that have no counters.

To better understand form and counter of a letter is to examine them in close detail. It provides a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics, additionally giving a glimpse into the process of letter-making.

Letters: Contrast
The basic design principles can be applied to typography. Contrast can be based on a format devised by Rudi Ruegg. The simple contrasts produces numerous variations: small + organic / large + machined; small + dark/ large + light, and so on.


Back to Table of Contents

Lecture 6: Typo_6_Screen&Print
Typography: Different Medium

Print Type vs Screen Type
Type for Print
Type was designed for reading from print long ago. It is the designer's job to ensure that the text is smooth, flowing, and pleasant to read. 

A good typeface for print - Caslon, Garamond, Baskerville - are the most common typefaces used because of their characteristics which are elegant and intellectual, yet also highly readable when set at small font size. They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting easy.

Type for Screen
Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs, and more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment.

Hyperlink/ Hyperactive Link 
A word, phrase, image that you can click to jump to a new document or a new section within the current document. Text hyperlinks are normally blue and underlined by default, and hovering the cursor over it should change the arrow into a small hand pointing at the link.

Font Size for Screen
16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. When reading books pretty closely (a few inches away), they are typically set at about 10 points. If we were to read at arm's length, 12 points is needed, which is about the same as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little. 'Web safe' ones appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google - Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differential Between Devices
The screens used by our PCs. tablets, phones, and TVs are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 100 pixels on laptop is very different from 100 pixels on a big 60" HDTV.

Static vs Motion
Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties. The level of impression and impact they leave is closely knitted to their emotional connection with the viewers.

Motion typography - temporal media offer typographers opportunities to 'dramatise' type for letterforms to become 'fluid' and 'kinetic' (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type. 

On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.


Module Information Booklet 



Task 1: Exercises

Description: 
The exercises are as follows:
1) Type Expression
2) Text Formatting


1) Type Expression: You will be given 4 words to compose and express. Begin by sketching out ideas. Once the ideas are selected, you will be given a set of 10 typefaces to work with in the digitisation phase. Through iteration, use the appropriate typeface and compose the letters in a manner that allows the meaning of the word to become visible — still and in motion. (2 weeks). Software: Adobe Illustrator and Adobe Photoshop.

Sketches
I need to choose 4 words from this list: STRETCH, SHAKE, JUMP, GROW, FLOW, MELT. 
Before starting, I have to look through and download the 10 typefaces that I have to work with, which are: Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson Text LT, Serifa and Univers LT.

I choose the words: stretch, shake, jump and melt.

Before starting on my sketches, I searched up the meaning of each word to obtain better ideas of how I could express the word more clearly.

Stretch:
verb
1. (of something soft or elastic) be made or be capable of being made longer or wider without tearing or breaking.
2. straighten or extend one's body or a part of one's body to its full length, typically so as to tighten one's muscles or in order to reach something.

noun
1. an act of stretching one's limbs or body.
2. a continuous area or expanse of land or water.

Grow:
verb
1. (of a living thing) undergo natural development by increasing in size and changing physically.
2. become larger or greater over a period of time; increase.

Jump:
verb
1. push oneself off a surface and into the air by using the muscles in one's legs and feet.
2. (of a person) move suddenly and quickly in a specified way.

noun
1. an act of jumping from a surface by pushing upwards with one's legs and feet.
2. a sudden involuntary movement caused by shock or surprise.

Melt:
verb
1. to become altered from a solid to a liquid state usually by heat.
2. dissolve, disintegrate
3. make or become more tender or loving.

These are my initial sketches:
Fig 1.1

Fig 1.2

However, after some feedback, I decided to explore the word designs more and try to express it better. I sketched my drawings on paper instead, as I feel I could express better on that medium. I couldn't generate more ideas for 'Jump', so I tested with 'Flow' instead, and decided to change my word to 'Flow'.

Flow:
verb
1. (of a liquid, gas, or electricity) move steadily and continuously in a current or stream.
2. go from one place to another in a steady stream, typically in large numbers.

noun
1. the action or fact of moving along in a steady, continuous stream.
2. a steady, continuous stream or supply of something.

These are my other sketches:
Fig 1.3

Fig 1.4

There were too many elements in my sketches, so I should simplify my digitalisation. After my sketches were approved, I could move on to digitising my four chosen words, which are 'Flow', 'Melt', 'Stretch', and 'Grow'.

I wasn't sure which was the best version of each word to be expressed digitally, so I experimented around with some of the best sketches of each word. These were some I tried, but didn't quite like the look of it.
Fig 1.5

I did the words again until I'm satisfied. With that, I decided on the ones that are simple enough while being able to express the word. I received feedback on the word 'Stretch', where I didn't need to use an outline. The rest of my words were approved. 

These are my final type expressions.
Fig 1.6 Final Task 1 - Type Expression

This is the PDF version.

I chose the word 'Melt' to animate, as I like the design of the word that I made. 
This is the final GIF.
Fig 1.7 "MELT" GIF


2) Text Formatting: Before commencing watch lectures: Text: P1 and Text: P2. You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment. These minor exercises (1/4; 2/4; 3/4; 4/4; 4/4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout design in A4 size demonstrating what you have learned from the incremental exercises. (2 weeks). Software: Adobe InDesign.

Note*: No colour may be used in the exercises. No visual elements or drawings can be utilised unless permitted. Some minor graphical elements (like line, dot or shade may be used). Use only the 10 typefaces provided to you.

Practice
I followed the tutorials given to familarise myself with the terms and skills I've learned in the Typography lectures. We started with kerning and tracking with my name using the 10 fonts given.
Fig 2.1

Here is the final result.
Fig 2.2

This is the PDF version.



For the Text Formatting task, we were given a text to work with and to choose any image that fits the text. I practiced along with the tutorial with this text. I tried following the lecturer's example and came up with this.
Fig 2.3

Fig 2.4

However, after feedback, I fear I have misunderstood to understand how to properly balance the white space with the text and picture. I should look at publishing page layout examples as references, and choose the one I think would fit the best. 

I redid my layout - changing the text formats and placement, along with a different image that fits more to the text's context. For the first one, I was thinking of going with a more symmetrical design, that balances the white space with the gray space more evenly, which gives a more stable feeling. The contrast between the image and text draws attention, first to the image, which gives context, towards the text.
Fig 2.5

I tried another layout, this time using the rule of thirds and the Golden Ratio in mind. The attention is first drawn towards the image, at the start of the Golden ratio, which later leads the eye towards the title, and towards the text. I balanced the shorter text on the left with the title and image.
Fig 2.6

However, I felt like the title was too big and leaning too much on the left side, so I changed it.
Fig 2.7

Lastly, I tried balancing the words instead, so while it has a the Golden ratio and rule of thirds applied, there would be more order and symmetry to the layout.
Fig 2.8

After comparing, I have decided to use the last layout (Fig 2.7) as my final submission.
Final Submission
Fig 2.9 Text Formatting Final Submission

Fig 2.10 Text Formatting with grids Final Submission

This is the PDF version.


These are my Formatting Details:
HEAD LINE
Typeface: Janson Text LT Std
Font/s: 75 Bold
Type Size/s: 36 pt
Leading: 26 pt
Paragraph spacing: 0

SUB HEAD LINE
Typeface: Janson Text LT Std
Font/s: 76 Bold Italic
Type Size/s: 24 pt
Leading: 26 pt
Paragraph spacing: 0

BODY
Typeface: Janson Text LT Std
Font/s: 55 Roman
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 50-55
Alignment: left-aligned
Margins: 20 mm top, 10 mm left, 10 mm right, 20 mm bottom
Columns: 2
Gutter: 10 mm



Feedback

Week 1: We were given a briefing for this module. We were given 6 words to choose from, and make sketches on how to express the word creatively. We had to watch Lecture 0 and 1.

Week 2: My sketches were too generic and common, and that I could express the meaning of the words more. I should explore each word design with more possibilities.

Week 3: My sketches are better, but there are too many graphical elements to be added, so I should only add some lines or dots when I used Adobe Illustrator.

Week 4: The word "Stretch" doesn't need an outline, as it destroys the effect. The designs I went with are good to go. I should choose the one I like best to animate.

Week 5: My Text Formatting task is not properly balanced. I should look at publishing page layout references for ideas and incorporate the design principles I have learned.


Reflection

Experiences: It was a tough beginning when I started learning typography, as I wasn't sure what was too many details or too simple of a design. I have always liked designing words with colours and different shapes on paper, whether it be taking notes or writing a card, but typography has changed my view on this, as there are much more things to be considered. For now I don't really fancy this topic, and if I am being honest, a little less interesting compared to my other modules, but I hope that I can overcome this hurdle and appreciate typography more in the future. It was also a struggle to learn how to use Adobe application, but it got easier the more I use it.

Observation: I observed that I may not be very confident in my typography, as I tried to follow other's way of designing instead of my own. I am still weak in my communication skills, as I sometimes misunderstand the task at hand, where I am not very clear on how I should approach the task. I also find that I tend to put off this task more often, as I may struggle more with typography. However, I have learned that I am able to improve in areas quickly, and try to achieve a better outcome. I can learn better with clearer instructions and while doing practical tasks instead of just learning the theory of the subject. 

Furthermore, I find that following this task's tutorial is harder compared to other modules, as it is difficult for me to cope with a video format only. I find that a step-by-step instructions in PowerPoint or PDF format is easier to follow and refer to rather than a video. In a video, sometimes I mishear a word, or other times I need to redo a step but forgot how, but it is difficult for me to find the step again as I have to rewatch the entire video. Time-stamps could work better for me.

Findings: To conclude, I have gained deeper insight on typography, and never realised how important it is, even to the point there are jobs just for this specialisation. I enjoyed learning about how English typography came about across different time periods and medium types to now. As for myself, I learned that it is easier and better for me to learn by doing the practical tasks together, as I put my knowledge to use and gain a better understanding. I need to practice using my typography skills more by exploring different techniques and looking for more references by good typography designers, while expanding my knowledge on my own. I find that the knowledge I gained can be used anywhere, as written communication is important, while the visual aesthetic and design is equally important too.



Further Readings

Why is typography important?
by Kristin Lajenesse

Effective typography has the power to make the ideal user experience a quicker connection with the brand, driving graphic balance, establish visual hierarchy and set the overall tone of a website, product, service or brand. It is about being able to communicate a message beyond the words themselves, making typography a key component of design.

Typography:
  • Creates connection and builds brand recognition - the ability to not only strengthen a website or product's personality but to also hold space for a subliminal connection with the brand
  • Holds users' attention - type that's memorable and captivating can impact how long a user spends on a website or sales page
  • Influences decision making - effective, eye-catching typography can express the essence and personality of a brand, creating a specific mood or feeling within the user, generating a sense of persuasion for the intended audience
  • Is a key component of user interface - create a first good impression
  • Establishes a visual hierarchy and harmony - highlight what is important by using different font sizes and types, which helps the audience to understand quickly and should be paying more attention to
  • Optimises readability and accessibility - accessible typography can determine legibility and assist the reader with finding important information
Extra videos: 


10 Quick Tips for Great Type
by Kristin Lajenesse
  1. Justify left - reading from top to bottom, left to right, easier to navigate text
  2. Use one font - typefaces carry different meanings and interpretations, avoid messing with the completements of the typeface
  3. Skip a weight - creates nice contrast
  4. Double point size - Eg: headline of 30pts, half it with a 15pt for body
  5. Align to one axis - align elements to the grid line you've set
  6. Pick any of these fonts - Akzidenz Grotesque, Avenir, Avant-Garde, Bell Gothic, Bodoni, Bembo, Caslon, Clarendon, Courier, Din Mittelschrift, Franklin Gothic, Frutiger, Futura, Garamond, Gill Sans, Gotham, Helvetica, Letter Gothic, Memphis, Meta, OCRB, Rockwell, Sabon, Trade Gothic, Trajan, and Univers
  7. Group by using rules - makes dissimilar objects look more orderly
  8. Avoid the corners - negative space is a good thing, let your design breathe
  9. Mind the gap - Avoid widows and orphans
  10. Relax, it's just type - be bold, or italic. But never regular.


What is Type Anatomy?
by Daniel Skrok

Typography has its own language, full of typographic terms that make up its basic anatomy. Below is a comprehensive list that will help guide you through the common anatomy type terms.
Fig 3.1 Daniel Skrok and Interaction Design Foundation, CC BY-SA 3.0

Anatomy of Type Terms:

Aperture: The partially enclosed space of a letterform.
Ascender: An upward vertical stroke that extends beyond the x-height.
Baseline: The invisible line on which all letters rest.
Bowl: The generally round or elliptical forms which are the basic body shape of letters.
Cap height: The distance from the baseline to the top of the capital letter.
Counter: The white space enclosed by a letterform.
Cross bar: The horizontal stroke in letters.
Descender: A downward vertical stroke that extends beyond the baseline.
Dot: Also known as a tittle, is a small diacritic on a lowercase i or j.
Eye: The closed counter of a lowercase e.
Finial: A tapered or curved end on a letterform.
Ligature: Two or more letters tied into a single character.
Lowercase: A smaller form of letters in a typeface.
Shoulder: A curved stroke originating from a stem.
Spine: The main curved stroke of a lowercase or capital letter.
Stem: A main stroke that is more or less straight, not part of a bowl.
Serif: A stroke added to the beginning or end of one of the main strokes of a letter.
Small Capital: Short capital letters designed to blend with lowercase text.
Stroke: A straight or curved line that creates the principal part of a letter.
Terminal: A circular form at the end of the arm, leg or brow in letters.
Uppercase: A typecase containing capital letters.
x-height: The distance between the baseline and the height of the lowercase letter ‘x’.
Weight: The thickness of a font’s stroke.

Reference: Skrok, D. (2025, March 16). What Is Type Anatomy?. Interaction Design Foundation - IxDF. https://www.interaction-design.org/literature/article/what-is-type-anatomy



Comments

Post a Comment