Typography Task 1

on

26.09.2023-17.10.2023 (Week 1-Week 4)
Ng Kar Yee / 0367743
Bachelor of Design (Honours) in Creative Media
Typography / Task 1

LECTURES

Week 1⇒Introduction And Briefing

What is Typography?

  • the creation of typefaces/type families
  • animation (Animation forms/Movie tittle/Gif Animations)
  • the art and technique of arranging type, making written language legible, readable and appealing when displayed
Typography has evolved over 500 years, from 
Calligraphy
(refers to writings styles) 
⇓
Lettering 
(draw out the circumstances of the letters)
⇓
Typography 

Where do we see typography?

  • website design
  • app design
  • signage design
  • bottle design
  • books 
  • posters
  • logo types

Terminology 

  • Fonts
  • Typeface

1. Fonts

  • Individual font/weight within typeface
  • For Example: Georgia Regular, Georgia Italic, and Georgia Bold
Figure 1.1 Fonts, Week 1 (27/9/2023)

2. Typeface

  • The entire family of fonts/weights that share similar characteristics/styles
  • For Example: Georgia, Arial, Times New Roman, Futura and Didot
Figure 1.2 Typeface, Week 1 (27/9/2023)

Week 1⇒Development

1. Early letterform development: Phoenician to Roman

  • uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.
Figure 1.3 Phoenician Evolution Timeline , Week 1 (27/9/2023)
  • Phoenicians write from right to left while the Greek developed a style of writing called ‘boustrophedon’ (how the ox ploughs) which meant that the lines of text will be read alternately from right to left and left to right
  • As they change the direction of reading, they also changed the orientation of the letterforms
  • the Greek like the Phoenicians as there did not use letter space or punctuations. Latter or the Greeks would move to a strictly left-to-right

    Figure 1.4 Latter or the Greeks would move to a strictly left-to-right writing., Week 1 (27/9/2023)
    • Certain qualities of their strokes from Etruscan (and then Roman) carvers had a change in weight from vertical to horizontal, a broadening of the stroke at start and finish has carried over into the carved letterforms

    Figure 1.5 Phoenician⇾Greek⇾Roman, Week 1 (27/9/2023)


    2. Hand script from 3rd – 10th century C.E. A) Square capitals

    • Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes
    Figure 1.6 4th/5th century Square Capitals, Week 1 (27/9/2023) 

    B) Rustic Capitals

    • A compressed version of square capitals
    • There occupied a smaller space and took lesser time to write however there were more difficult to read
    Figure 1.7 Late 3rd – mid 4th century Rustic capitals, Week 1 (27/9/2023)

    C) Roman Cursive

    • Both square and rustic capitals were typically reserved for documents of some intended performance and everyday transactions, however were typically written in cursive hand in which forms were simplified for speed
    Figure 1.8 4th century Roman cursive, Week 1 (27/9/2023)

    D) Uncials

    • Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q
    • ‘Uncia’ is Latin for a twelfth of anything
    • Uncials can be refer as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals
    Figure 1.9 4th – 5th century: Uncials, Week 1 (27/9/2023)

    E) Half-Uncials

    • A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders
    Figure 2.0 C. 500: Half-uncials, Week 1 (27/9/2023)

    F) Caloline miniscule

    • Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts
    • Alcuin of York, Abbot of St Martin of Tours rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century
    Figure 2.1 Caloline miniscule, Week 1 (27/9/2023)

    3. Blackletter to Gutenberg’s type

    • In northern Europe, a strongly condensed vertical letterform are known as Blackletter or textura.
    • In the south, a rounder more open hand gained popularity, called ‘rotunda’
    • The humanistic script in Italy is based on Alcuin’s miniscule
    Figure 2.2 Blackletter (Textura), Week 1 (27/9/2023)
    • Gutenberg’s type mold required a different brass matrix, or negative impression, for each letterform
    Figure 2.3 Johann Gutenberg, Mainz, Week 1 (27/9/2023)

    Text type classification

    • Typeforms have been developed in response to prevailing technology, commercial needs, and esthetic trends
      1. 1450 Blackletter
      • The earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe.
      2. 1475 Oldstyle

      • the lowercase forms used by Italian humanist scholars for book copying while the uppercase letterforms found inscribed on Roman ruins

      3. 1500 Italic

      • Echoing contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page.

      4.  1550 Script

      • Originally and attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in lengthy text settings.
      • Forms now range from the formal and traditional to the casual and contemporary.

      5. 1750 Transitional

      • this style was achieved in part because of advances in casting and printing. Thick to thin relationships were exaggerated, and brackets were lightened.

      6. 1775 Modern

      • Serifs were unbracketed, and the contrast between thick and thin strokes extreme

      7. 1825 Square Serif / Slab Serif

      • heavily bracketed serif with little variation between thick and thin strokes were dropped as they evolved.
      •  these faces responded to the newly developed needs of advertising for heavy type in commercial printing

      8. 1900 Sans Serif

      • these typefaces eliminated serifs all together.
      • Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). 
      • Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic.

      9. 1990 Serif/Sans Serif

      • A recent development, this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets 

      Figure 2.4 Text type classification, Week 1 (27/9/2023)

      Week 2⇒Text Part I

      Kerning and Letterspacing

      • term ‘kerning’ refers to the automatic adjustment of space between letters
      • letterspacing means to add space between the letters
      • The addition and removal of space in a word or sentence is referred to as ‘tracking’ (Combination of kerning and letterspacing)


      Figure 2.5 Type and differences of text, week 2 (03/10/2023)

      When using uppercase, it is advised to kern bit 
      • To increase letter size⇾ Control key + Shift + < // Control key + Shift +Alt 
      • Letterspacing⇾ Alt + Left/ Right Arrow 
      • To reduce speed of kerning⇾ Edit>Preferences>Kerning reduce to 5 

      Formatting Text

      1. Flush Left

      • 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 
      2. Centered 

      • This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line
      • It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature

      3. 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

      4. Justified 

      • this format imposes a symmetrical shape on the text 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

      Figure 2.6 Formatting Text, week 2 (03/10/2023)
      Texture

      Figure 2.7 Texture, week 2 (03/10/2023)

      Leading And Line Length

      • The goal in setting text type is to allow for easy, prolonged reading

      1. Type size

      • Text type should be large enough to be read easily at arms length

      2. Leading 

      • Text that is set too tightly encourages vertical eye movement
      • Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

      4. 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 while longer lines require more. Extremely long or short lines lengths impairs reading.
      • A good rule of thumb is to keep line length between 35-65 characters. 
      Figure 2.8 Bad Examples of Leading, week 2 (03/10/2023)

      Type Specimen Book

      • A type specimen book or an e-book for screen is to provide an accurate reference for type, type size, type leading, type line length 
      Figure 2.9 Sample Type Specimen Sheet, week 2 (03/10/2023)
      • It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below
      10 Type Families we will be using this semester

      Figure 3.0 10 Types of Type Families, week 2 (03/10/2023)

      Week 3⇒Text Part II

      Indicating Paragraphs
      • There are several options for indicating paragraph
      Figure 3.1 Types of Indicating Paragraphs, week 3 (10/10/2023)

      Line Space Vs Leading

      Figure 3.2 Differences Between Line Space and Leading, week 2 (03/10/2023)

      Windows And Orphans

      • Widow⇒ a short line of type left alone at the end of a column of text.
      • Orphan⇒ is a short line of type left alone at the start of new column.
      Figure 3.3 Examples of windows and orphans, week 3 (10/10/2023)

      Highlighting Text
      • Examples of how to highlight text within a column of text
      Figure 3.4 Examples of highlighted text, week 3 (10/10/2023)

      • Example if the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5
      Figure 3.5 Examples of highlighted text, week 3 (10/10/2023)

      • Example if reduce aligned figures (numbers) or All Capital acronyms embedded in text by .5 as well, to ensure visual cohesion of the text
      Figure 3.6 Examples of highlighted text, week 3 (10/10/2023)

      • when highlighting text is placing by a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best
         ❌                                                               ✅
      Figure 3.7 Examples of highlighted text, week 3 (10/10/2023)
      • It is necessary to place certain typographic elements outside the left margin of a column of a type (extending as opposed to indenting) to maintain a strong reading axis
      Figure 3.8 Examples of highlighted text, week 3 (10/10/2023)

      Headline Within Text

      1. A Head

      • A head indicates a clear break between the topics within a section
      • In the following examples ‘A’ heads are set larger than the text, in small caps and in bold
      • The fourth example shows an A head ‘extended’ to the left of the text
      Figure 3.9 Examples of A Head, week 3 (10/10/2023)

      2. B Head

      • The B head here is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do.
      • Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

      Figure 4.0 Examples of B Head, week 3 (10/10/2023)

      3. C Head

      • The C heads are not common, highlight specific facets of material within B head text however they do not materially interrupt the flow of reading
      • As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold
      • C heads in this configuration are followed by at least a space for visual separation
      Figure 4.1 Examples of C Head, week 3 (10/10/2023)

      4. Hierarchy

      • Putting together a sequence of subheads⇾ hierarchy
      • There is no single way to express hierarchy within text; in fact the possibilities are virtually limitless
      Figure 4.2 Examples of Hierarchy, week 3 (10/10/2023)

      Cross Alignment

      • Cross aligning headlines and captions with text type reinforces the architectural sense of ⇾the page ⇾the structure while articulating the complimentary vertical rhythms
      • In this example, four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts)
      Figure 4.3 Examples of Cross Alignment, week 3 (10/10/2023)
      • Other example when one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type.
      Figure 4.4 Examples of Cross Alignment, week 3 (10/10/2023)

      Week 4⇒Basic

      Describing Letterforms

      Figure 4.5 Describing Letterforms, week 4 (17/10/2023)

      Figure 4.6 Describing Letterforms, week 4 (17/10/2023)

      The font

      1. Uppercase 

      • Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures
      Figure 4.7 Uppercase, week 4 (17/10/2023)

      2. Lowercase 

      • Lowercase letters include the same characters as uppercase
      Figure 4.8 Lowercase, week 4 (17/10/2023)

      3. Small Capitals 

      • Uppercase letterforms draw to the x-height of the typeface
      • Small Caps are primarily found in serif fonts as part of what is often called expert set
      • Most type software includes a style command that generates a small cap based on uppercase forms
      Figure 4.9 Small Capitals, week 4 (17/10/2023)

      Figure 5.0 Small Capitals, week 4 (17/10/2023)

      4. Uppercase Numerals

      • Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width
      • They are most successfully used with tabular material or in any situation that calls for uppercase letters
      Figure 5.1 Uppercase Numerals, week 4 (17/10/2023)

      5. Lowercase Numerals

      • Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders 
      • They are best used when ever you would use upper and lowercase letterforms
      • Lowercase numerals are far less common in sans serif type-faces than in serif
      Figure 5.2 Lowercase Numerals, week 4 (17/10/2023)

      6. Italic 

      • Most fonts today are produced with a matching italic small caps, however, are almost always only roman
      • The forms in a italic refer back to fifteenth century Italian cursive handwriting
      • Oblique are typically based on the roman form of the typeface

      Figure 5.3 Italic, week 4 (17/10/2023)

      7. Punctuation, miscellaneous characters

      • Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface
      • It’s important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job
      Figure 5.4 Punctuation, miscellaneous characters, week 4 (17/10/2023)

      8. Ornaments

      • Used as flourishes in invitations or certificates
      • They usually are provided as a font in a larger typeface family
      • Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro)
      Figure 5.5 Ornaments, week 4 (17/10/2023)

      INSTRUTIONS

      TASK 1

      EXERCISE⇒TYPE EXPRESSION

      For our first assignment, Mr Vinod introduced Type Expression to us, which may be think as type that not only says words but also communicates concepts with highly visual representation. After a few suggestion and voting between the class, our assignment was concluded and was to pick 4 words and come up with 3 to 4 type expression ideas on the following words 
      • Chop-Chop
      • Windy
      • Dive
      • Stab
      • Roar
      • Illusion
      • Huge
      • Shock

      RESEARCH

      The idea of type expression is to associate each language constructed with an expression describing its type. To have a head start on the assignment, I did some research on what is type expression and the examples of designs done by others.


      Figure 1.1.1  Examples from Google
      1. Exit
      The designer designed the letter X like a person walking towards the letter I which looks like a door. 

      2. Spider Man
      The designer designed the letter M to imitate a spider hanging off the roof/wall.

      Figure 1.1.2 Examples from Instagram
      Figure 1.1.3 Examples from Pinterest

      SKETCHES

      I have chosen the following words as my head was popping with ideas the second I saw the words
      • illusion
      • windy
      • shock
      • roar 
      Figure 1.1.4 First Attempt, Week 1 (27/9/2023)

      Figure 1.1.5 Second Attempt, Week 1 (27/9/2023)
      Figure 1.1.6 Final Sketch, Week 1 (27/9/2023)
      Illusion
      Sketch 1 
      • The letter is designed to be in a spiral shape as it refers the delusional appearance to be in a spiral shape
      Sketch 2 
      • The letter is designed with the fonts type Gill Sans Std-Light Shadowed as the shadows of the fonts type makes the illusion appearances 
      Sketch 3 
      • I envisioned having the colours of the letter messed with by placing a gradient tool on it. I would applied a grayscale from black to white to show the illusion appearances.

      Windy 
      Sketch 1 
      • I envisioned the current design’s letters are near together as like there are holding on to each other closely to prevent themselves to be blown away. The letter y would act like it’s holding on the ground firmly being the main supporter.
      Sketch 2 
      • The letter is designed to be in a curl imitating the wind
      Sketch 3 
      • The letter is designed to be in a few curl imitating a commonly seen wind logo
      Figure 1.1.7 Final Sketch, Week 1 (27/9/2023)
      Shock 

      Sketch 1 
      • I envisioned the current design’s letters are near together and bit inclined towards the inside as it imitates hands on a person’s faces while the letter o is bigger than others as it imitates a person’s mouth widening during shock. The whole design can be seen like the shock emoji
      Sketch 2 
      • I envisioned the current design’s letters are near and closely place with one another as it imitates of a person needing support after hearing shocking news
      Sketch 3 
      • I envisioned the current design’s letters are scatter around as it imitates a person’s thought being confused or ‘blank’ after hearing shocking news
      Roar
      Sketch 1 
      • I envisioned the current design’s letter R imitating a lion who roars while the letter O A R which are bit scatter are the other creatures who are afraid and trying to get away
      Sketch 2 

      • I envisioned the current design’s letter R will be bigger than others as it imitates the lion while the letters o a r will be getting smaller and smaller as the letters imitates the creatures who are afraid hiding behind one another
      Sketch 3 
      • I envisioned the current design’s letters size will be sort from small to big while having the word being a bit incline. With the help of the perspective distort tool, the design can be shown as the lion roaring loudly

      DIGITIZATION

      After getting Ms Low and Mr Vinod's feedbacks for the final sketching, I began with Mr Vinod's tutorial videos on digitization. Then, I started trying digitization.

      Figure1.1.8 Digitization Process For Illusion, week 2 (03/10/2023)
       
      For the current design, I picked Bodoni Std-Poster as the fonts as it was similar from what i imagined. I started playing around with the grayscale, making the letter slowly fating away from dark to light to make the illusion appearances.

      Figure 1.1.9 Digitization Process For Windy, week 2 (03/10/2023)

      I chose the Adobe Casion Pro-Italic fonts for the current design as the cursive letters may be imitated as the hands holding on to each other. I designed the letters in the current way to express there are holding on to each other from blowing away. 

      Figure 1.2.0 Digitization Process For Shock, week 2 (03/10/2023)

      For the current design, I chose ITC Garamond Std-Bd Cond as the font as it was similar from what I envisioned. I made the letters bit curved and the letter O bigger than others as the design can be seen like the shock emoji.

      Figure 1.2.1 Digitization Process For Roar, week 2 (03/10/2023)
      I chose Gill Sans Std- Shadowed for the current design as the font was similar to animated manga/firm. With the help of the perspective distort tool, the design can be shown like the lion roaring loudly 

      FINAL DIGITIZATION

      Figure 1.2.2 Final Digitization (JPEG), week 2 (03/10/2023)

      Figure 1.2.3 Final Digitization (PDF), week 2 (03/10/2023)

      ANIMATION GIF

      After getting Ms Low and Mr Vinod's feedbacks for the final digitization, I began with Mr Vinod's tutorial video on how to animate words into a gif. After understanding the concept, I started trying it. We were instructed to pick a word from our final digitization and animate the word into a gif.

      1. Shock

      Figure 1.2.4 Shock Animation Gif Process, week 3 (10/10/2023)

      Figure 1.2.4 Shock Animation Gif Process, week 3 (10/10/2023)

      For the word shock, I started the words with a further tracking to a closer tracking to each other. The letter O also becomes bigger and bigger while the words becomes more incline. This is because I wanted to imitate the shock emoji. I started to sort the words into how I wanted in Adobe Illustrator and animate the words into gif in Adobe Photoshop.


      Figure 1.2.5 Shock Final Gif, week 3 (10/10/2023)

      2. Windy

      Figure 1.2.6 Windy Animation Gif Process, week 3 (10/10/2023)

      Figure 1.2.7 Windy Animation Gif Process, week 3 (10/10/2023)

      For the word windy, I made the word incline left to right and right to left as I wanted to imitate the word windy like a plant being blown in the wind. I started to sort the words into how I wanted in Adobe Illustrator and animate the words into gif in Adobe Photoshop.


      Figure 1.2.8 Windy Final Gif, week 3 (10/10/2023)

      EXERCISE⇒ TEXT FORMATTING

      For our second assignment, Mr Vinod introduced Text Formatting to us, which may be think as styling letters or characters with kerning, leading, alignments, paragraph spacing and different fonts. Mr Vinod gave us a head start by showing us a basic tutorial videos on how to do text formatting with our own names. 
      Figure 1.2.9 Text Formatting Without Kerning, week 4 (17/10/2023)

      Figure 1.3.0 Text Formatting With Kerning, week 4 (17/10/2023)

      RESEARCH

      The idea of text formatting is digital text which has styling information beyond the minimum of semantic elements. For example, colours, styles (boldface, italic), sizes, and fonts. To have a head start on the assignment, I did some research on what is text formatting and the examples of designs done by others.

      Figure 1.3.1 Examples from Pinterest, week 4 (17/10/2023)

      Figure 1.3.2 Examples from Pinterest, week 4 (17/10/2023)

      TEXT FORMATTING LAYOUT

      For the current assignment, Mr Vinod gave us a short abstract which is I am Helvetica by John Doe. We were instructed to think of different layouts and style the layout with suitable leading, kerning, alignment and etc. After watching and getting hang off Mr Vinod's tutorial video, I started on the layout.
      Figure 1.3.3 Layout 1 with grid & baseline, week 4 (17/10/2023)

      Figure 1.3.4 Layout 1 without grid & baseline, week 4 (17/10/2023)

      HEAD
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 72pt
      • Leading: 86.5pt
      BODY
      • Font/s: Adobe Casion Pro,Regular
      • Type Size/s: 10pt
      • Leading: 12pt
      • Paragraph spacing: 12pt
      • Characters per-line: Below 65 characters
      • Alignment: Justified Left
      Margins: 12.7 mm top + 12.7 mm left + 12.7 mm right + 50 mm bottom
      Columns: 4
      Gutter: 5 mm

      Figure 1.3.5 Layout 2 with grid & baseline, week 4 (17/10/2023)

      Figure 1.3.6 Layout 2 without grid & baseline, week 4 (17/10/2023)

      HEAD
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 65pt
      • Leading: 72pt
      BODY
      • Font/s: Adobe Casion Pro,Regular
      • Type Size/s: 10pt
      • Leading: 12pt
      • Paragraph spacing: 12pt
      • Characters per-line: Below 65 characters
      • Alignment: Justified Left
      Margins: 12.7 mm top + 12.7 mm left + 12.7 mm right + 50 mm bottom
      Columns: 4
      Gutter: 5 mm

      Figure 1.3.7 Layout 3 with grid & baseline, week 4 (17/10/2023)

      Figure 1.3.8 Layout 3 without grid & baseline, week 4 (17/10/2023)
      HEAD
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 80pt
      • Leading: 95pt
      BODY
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 10pt
      • Leading: 12pt
      • Paragraph spacing: 12pt
      • Characters per-line: Below 65 characters
      • Alignment: Justified Left
      Margins: 12.7 mm top + 12.7 mm left + 12.7 mm right + 30 mm bottom
      Columns: 4
      Gutter: 5 mm
      Figure 1.3.9 Layout 4 with grid & baseline, week 4 (17/10/2023)

      Figure 1.4.0 Layout 4 without grid & baseline, week 4 (17/10/2023)

      HEAD
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 65pt
      • Leading: 70pt
      BODY
      • Font/s: Adobe Casion Pro, Regular
      • Type Size/s: 10pt
      • Leading: 12pt
      • Paragraph spacing: 12pt
      • Characters per-line: Below 65 characters
      • Alignment: Justified Left
      Margins: 12.7 mm top + 12.7 mm left + 12.7 mm right + 50 mm bottom
      Columns: 4
      Gutter: 5 mm

      FINAL TEXT FORMATTING LAYOUT

      After getting some feedbacks from Ms Low for the layouts, I finalized with layout 3. I adjusted the heading and added caption to the picture to make it more complete.

      Figure 1.4.1 Final text formatting layout with grid & baseline (JPEG), week 4 (17/10/2023)

      Figure 1.4.2 Final text formatting layout with grid & baseline (PDF), week 4 (17/10/2023)

      Figure 1.4.3 Final text formatting layout without grid & baseline (JPEG), week 4 (17/10/2023)

      Figure 1.4.4 Final text formatting layout without grid & baseline (PDF), week 4 (17/10/2023)

      FEEDBACK

      WEEK 2 

      General Feedback

      • Bonder line in blog missing
      • Image taken is advised to have no shadow
      • Explanation and dates are required for figure
      • Label sketches
      Specific Feedback
      • Theme is not advisable to customize yet
      • Refection and further reading is not complete for week 1
      • Sketches not need to be too detail or large
      • Sketches are advised following the 10 fonts
      WEEK 3

      General Feedback

      • Good practice to label figures
      • Feedbacks and reflection need to be always updated

      Specific Feedback

      • Well done on documentation
      • Need to double check all presented links to make sure there are public

      WEEK 4

      General Feedback

      • Advised to embed files only for final PDF/JPEG
      • Need to double check all presented links to make sure there are public

      Specific Feedback

      • Quality for uploaded image need to be improved
      • Work progress completed

      REFLECTION

      Learning typography was quite interesting as I didn't know we could be so creative with only letters. We learnt what was typography and learnt it's histories, seeing how it has evolved to the current fonts. It was quite a challenge for me at first as it was also my first time sketching and using illustrator to do digitization but with the guidance, I managed to finish the assignment.

      FURTHER READING

      A Type Primer By John Kane

      Figure 3.0.0 A Type Primer 
      • Typography employs a number of technical terms. 
      • It is a good idea to familiarize yourself with this lexicon. 
      • Knowing a letterform's component parts makes it much easier to identify specific typefaces.
      Figure 3.0.1 Types of Letterforms

      Figure 3.0.2 Types of Letterforms

      Figure 3.0.3 Types of Letterforms

      The Font

      the full font of a typefaces contains more than 26 letters, 10 numerals and a few punctuation marks.

      1. Uppercase
      • Capital letters
      • accented vowels
      • the c cecillia
      • the n tilde
      • the a/e
      • o/e ligatures

      Figure 3.0.4 Uppercase

      2. Lower Case

      • Lowercase Letters 
      • f/i
      • f/l
      • f/f
      • f/f/l ligatures
      • the 'esset'

      Figure 3.0.5 Lower Case

      3. Small Capitals

      • Uppercase letterforms, drawn to the x-height of the typeface
      • Small caps primarily found in serif fonts

      Figure 3.0.6 Small Capitals

      4. Uppercase Numerals

      • These numerals are the same height as uppercase letters and are all set to the same kerning width
      Figure 3.0.7 Uppercase Numerals

      5. Lowercase numerals

      • Also called old-style figures or text figures
      • these numerals are set to x-height with ascenders and descenders
      Figure 3.0.8 Lowercase Numerals

      6. Italic

      • Most fonts today are produced with a matching italic 
      • Small caps however are almost always only roman
      Figure 3.0.9 Italic

      7. Punctuation, miscellaneous characters

      • Although all fonts contain standard punctuation marks, miscellaneous characters can change from type-face to typeface
      Figure 3.1.0 Punctuation, miscellaneous characters
      8. Dingbats
      • Various symbol and ornaments that intended for use with type are call dingbats
      • The majority of dingbats are marketed as their own fonts and not in conjunction with any particular typeface
      Figure 3.1.1 Dingbats

      Comments

      Post a Comment