task[1]

 
27/3/2021—24/4/2021,
w[1]—w[4].

lim jia sheng,
0344034.

BDCM
.Typography
::task[1]





lectures

weekly[1][1]: Introduction/E-portfolio Bootstrapping

In this live class, we had a formal introduction to our lecturers and the expected modus operandi for the module. This includes the usage of Facebook groups as the platform and channel for communication. Other than that, we were also taught on how to structure the e-portfolio for the Typography module. This included proper headings and sections of required info. We were also taught a few HTML tricks to get things working under blogger — <hr>, <iframe>, <br> vs <p>. Besides that, we were also tasked to get started on our to-be first task — creating static representations of words, using their own words. A poll was run to pick the words used, kickstarting the ideation phase of the project.

 

weekly[1][2]: History & Development of Type

In this recorded lecture, it started out with a disclaimer and subsequent monologue, about the Western "bias" that some of the information presented might possess. We were advised to do our own further research into the topics at hand and be wary about similar biases that we may encounter in our search.

After that, it begins its content with the how historically, typography has evolved. The types of tools used historically was credited for how some letterforms turned out, which I thought was really interesting. It continues then to show the important presence of Phoenician characters in our modern language's evolution, birthing what we now know as the Latin and Arabic alphabets.

Figure 1.1.1, Parallels of characters over time, n.d

Continuing on, the idea of reading in "Boustrophedon" was brought up, as how the Greeks read. It is modelled after how a bull plows through farmland, and has a pattern of alternating reading and letter directions.

Figure 1.1.2, Example of Boustrophedon writing system, n.d

In my opinion, this is kind of a genius way to structure text now. Reading speed is constrained normally due to the eye needed to shift and the brain needing to wait for that shift. If said bottleneck is removed, imagine the potential gain efficiency over every reader of modern language. There would definitely be some issues to be ironed out — every piece of text needing to be aligned in justified manner — but just the thought is pretty exciting.

With that tangent out of the way, the documented development of square capitals (or now more simply known as just "serif" fonts) was really interesting as well. Starting from the paint brushes used to mark out chiseled characters, to reed pens being held at certain angles that add ununiform stroke widths and the serif themselves (the ends to a "serif" font). It is also here the trend of compression and writing speed start to emerge, as compressed versions of square capitals and cursive writing emerge.

Figure 1.2.3, Example of compressed rustic captials, n.d

A continuation from that would be an even more interesting piece of fact — lowercase letterforms were born as an effect of writing fast. As a person who very much appreciates the lower of the two cases more than I should, this really tickled my neurons. More detail was went into "uncials" and "half-uncials", and their standardization by Charlemagne, as the smaller letters formally merged into the Latin alphabet.

Here on out starts the modern type. With Johannes Gutenberg's invention of the printing press, type suddenly became a lot more important, as it acted as a vector for the information they stored. Blackletter was originally used as it was the most popular at the time, with characteristics of being condensed and vertical. This lent it to have great information density as well. After that, there came many more developments to type in print, spanning the entire 18-19th century.

Figure 1.1.4, Digital Blackletter typeface, 10/4/2010

Then finally in the lecture, categorization of type is taught. Here is what they basically boil down to:

    1. Blackletter (1450) — Based on hand-copy styles. Has fancy serifs, with multiple vertices.
    2. Oldstyle (1475) — Based on Italian lowercases and Roman uppercases. Has slab serifs.
    3. Itallic (1500) — Based on contemporary Italian handwriting. Condensed & has curvy serifs.
    4. Script (1550) — Based on engraved calligraphy styles. Has fancy and curvy serifs.
    5. Transitional (1750) — Based on Oldstyle. Amplified thickness/thinness & has slab serifs.
    6. Modern (1775) — Based on rationalized Oldstyle. Even more amplified thickness/thinness & has slab serifs.
    7. Square Serif/Slab Serif (1825) — Based on heavily bracketed serif. Little variation in thickness/thinness & has slab serifs.
    8. Sans Serif (1900) — Based on Square Serif/Slab Serif. Has no serifs.
    9. Serif/Sans Serif (1990) — Based on Sans Serif. Threads boundaries of Serif & Sans Serif types, sometimes serifs?

Also, italicized Serif letters is "Italic", white italicized Roman letters is "Oblique"... kinda neat.
 

weekly[2]: Basics of Letterforms

In this recorded lecture, it starts out simply with describing letterforms and their respective components:

    • Baseline — The visual base.
    • Median — X-height — The height of the lowercase "x" in a typeface.
    • Stroke —   The line that defines a basic letterform.
    • Stem — Any vertical line in a letter.
    • Apex/Vertex — The point created from the intersection of two diagonal Stems. (Apex ↑, Vertex ↓).
    • Arm — Short Strokes off the Stem of the letterform, either horizontal (eg. E, F, L) or diagonal (eg. K, Y).
    • Ascender — The Stem of a lowercase letterform above the Median.
    • Barb — The half-serif end of a curved Stroke.
Figure 1.2.1, Anatomy of a letterform, 2/9/2020
    • Counter — The hole/space of an entirely or partially enclosed area of a letter.
    • Bowl — The Stroke around a Counter.
    • Crotch — The hole/space inside the crevasse created when two strokes meet.
    • Em — The distance equal to the size of the typeface (eg. 1em == 48pt).
    • En — Half an Em.
    • Ligature — The character formed by combining two or more letterforms (eg. fi, fl).
Figure 1.2.2, Examples of ligatures, n.d
    • Serif — The foot at the end of the Stroke.
    • Stress — The orientation of the letterform, indicated by the thin parts of the Stroke in round forms.
Figure 1.2.3, Stress of round letterforms, 23/1/2020
    • Swash — The flourish beyond the Stroke.
Figure 1.2.4, Flourish of letterforms, 23/1/2020

    • Terminal — End of a stroke without a serif.
      • Flat (eg. T).
      • Flared.
      • Acute (eg. t).
      • Grave.
      • Concave.
      • Convex.
      • Rounded.
      • Teardrop (eg. e, c).

After all the components were went over and the letterform was now able to be described, we moved on to the font itself. It was emphasized that to work successfully with type, a full fat font with enough variations and familiar characteristics shall be chosen, else things might turn out lacking. After that, the font was broken down into:

    • Uppercase — Capital letters + certain accented vowels, c cedilla & n tilde, and a/e & o/e ligatures.
    • Lowercase — Same character set as Uppercase.
    • Small Capitals — Uppercase drawn to the X-height, primarily found in expert sets of Serif fonts. Can be used for acronyms.
    • Uppercase Numerals — Lining figures — Same height as Uppercase letters, with same kerning width.
    • Lowercase Numerals — Oldstyle figures — Height is at X-height. Most commonly found in Serif typefaces.

Figure 1.2.5, Example of different types of numerals, n.d
    • Italic — Derived from 15th century Itallian cursive. Not common with Small Capitals.
    • Roman — Derived from inscriptions in Roman monuments. A slightly lighter stroke in Roman is known as "Book"
    • Punctuation & Miscellaneous Characters — Made to the style of the fonts; will differ between fonts.
    • Ornaments — Special flourishes, usually found in larger typeface families. (eg. Adobe Caslon Pro).
Now at the latter end of the lecture, comes Roman vs Italic typefaces. Roman vs Italic was touched on at a previous point in the lecture, but only skimmed. Here, it was elaborated that Roman letterforms were derived from inscriptions on Roman monuments. 
 
After that, the lecture moved on to variations of font:

    • Roman — The "regular" version of a font
      • Book
      • Roman
    • Boldface — Thicker stroke than Roman form. 
      • Semi bold
      • Medium
      • Bold
      • Black
      • Extra bold
      • Super
      • Poster (eg. in Bodoni)
    • Light — A lighter stroke than Roman form.
      • Thin
      • Light

Finally, at the final stretch of this information dump, comes something more philosophical. It's mostly regard the question of "why only 10 typefaces?" Regarding that, it's mostly because to limit the scope and facilitate focus onto what makes up the typeface instead of spending time choosing a "suitable" one. The limit also forces us to choose a type of type most suiting to a context, instead of a specific font.


weekly[3]: Text Formatting

This week was all about text & using text practically.

Kerning

 The adjustment of space between pairs of letters.

Figure 1.3.1, Example of text that has Kerning done on it, 15/1/2020

Letterspacing(/Letter Space/Tracking)

The uniform adjustment of space between letters in a group. Generally only applied when the target text is large and has space around it.
Figure 1.4.2, Example of text that has been given Letterspacing, 15/1/2020

Readability

Modified Tracking amounts in general, will cause readability to drop. This is especially true in lowercase letter forms, as they require the counterform created between letters to maintain the line of reading, while uppercase letterforms are drawn to be able to stand on their own.


Linespacing (/Line Space/Leading)

Describes the space between lines. Generally spaced according to the X-Height & Text Size, of a typeface.

Line Space vs Leading

      • Line Space
        • The space between lines + the height of the line.
      • Leading
        • The space between lines (only).

 

 

Gray Value

The perceived brightness of a chunk of text, caused by the spacing and the contrast between letterform and background.


Ragging (Ragged Edges)

 Jagged edges at the ends of paragraphs.

 

Alignment

Flush Left

      • Resembles handwriting, which is normally asymmetrical
      • Every line starts from the same point, ending at every word break.
      • Even Gray Value
      • Has a Ragged right side.

Centered

      • Imposes symmetry.
      • Adds pictorial quality to text.
      • Line breaks should be amended to not have the shape of the paragraph look too jagged.
      • Should only be used in small amounts of text.

Flush Right

      • Places emphasis on the end of line.
      • Useful in situations with ambiguous relationships between image & text (eg. captions)
      • Should only be used in small amounts of text.

Justified

      • Imposes symmetry
      • Expands/reduces spaces between words & letters.
      • "Rivers" can run through the text due to large open spaces.
      • Care must be taken by using hyphenation & line breaks.

One point brought up that sounded super important was — "If you see the type before you see the words, change the type" — which makes a lot of sense, considering type is there to present the author's message.


Texture

    • Type with generous x-height or heavy stroke widths, will seem darker in a page.
    • These traits are important for readability & layout building. 

Formatting

Type Size(/Text Size/Point Size)

Should be large enough to read at arms length.

Type Leading

Should be wide enough to not encourage vertical eye movement, while tight enough to not create distracting striped patterns.

Type Line Length

Should be between 55-65 characters long.

 

Type Specimen Book

    • Showcases typefaces in various sizes.
    • Aims to provide an accurate reference for type, Type Size, Type Leading, Type Line Length, etc.

 

Figure 1.3.2, Example of a "Specimen Sheet", n.d


weekly[4]: Text Formatting 2

This lecture was a continuation of last week's learnings, which touches on various more text formatting techniques.

Paragraph Indication

Pilcrow — ¶

A symbol used to mark a new paragraph or section of text.

Figure 1.4.1, Modern use of the Pilcrow, 17/1/2021


 

Figure 1.4.2, Medieval use of the Pilcrow, 10/7/2013


Paragraph Space

The space between paragraphs or sections of text. Normally equivalent to the Line Space/Leading.

Figure 1.4.2, Showcase of using Paragraph Space to delimit paragraphs, 17/1/2020

 

Indented Lines

The space at the front of paragraphs or sections of text. Normally equivalent to the Line Space or the Type Size. Best used with Justified text align, since it won't have Ragged-ness on the right/left.

 

Figure 1.4.3, Usage of Indents to signify new paragraphs, 17/1/2020


Extended Paragraphs

Inverts Indented Lines; The space at the start of every line every line except for the first one of a new paragraph or section of text. Normally only used in academic writing.


Figure 1.4.4, Usage of Extended Paragraphs, 17/1/2020

Widows & Orphans

They should be avoided as much as possible, especially in Justified text. While Widows are more forgiving with Flush Right/Left aligned text, Orphans are still a big no-no.

Widow

Short line of type left alone at the end of a column of text.

        • Rebreaking line endings throughout the paragraph (without making them seem noticeably shorter) can solve it.

Orphan

Short line of type left alone at the start of a new column. 

        • Might need a lot more care, like moving columns in layouts or reducing line lengths.

Figure 1.4.5, Occurrences of Widows & Orphans, 17/1/2020


Highlighting

Can be achieved by changing the following attributes so that a chunk of text contrasts with its surroundings. 

      • Variety (Itallicize).
      • Weight (Bold).
      • Typeface (eg. Serif → Sans Serif).
      • Type Size (eg. Serif → Sans Serif, because Sans Serifs look larger).
      • Type Colour.
      • Background Colour.
      • Extending Reading Axis (Put type outside of paragraph margins, eg. quotation marks).

Headline

"A" Heads

html <h1 />, md #, Indicates clear breaks between topics within a section.

Figure 1.4.6, Headings/"A" Heads, 17/1/2020

"B" Heads

html <h2 />, md ##, Subject to "A" Heads. Show argument or examples for said subject, without interrupting as much.

Figure 1.4.7, Sub Headings/"B" Heads, 17/1/2020

 "C" Heads

html <h3 />, md ###, Highlights certain aspects of material within "B" Head text, followed by a something to provide visual separation (normally a space).

Figure 1.4.7, Sub Headings/"B" Heads, 17/1/2020


Cross Alignment

Reinforces architectural senses of a page. Achieved by aligning differently emphasized text next to each other.

Figure 1.4.8, Showcase of Cross Alignment, 17/1/2020


 



instructions:




exercise[1]: Type Expression

todo: 

Compose the chosen four words to express their meanings, using the given set of 10 typefaces.

todid: 

As instructed, I started out with some ideation sketches:

Figure 2.1.1, Text expression ideation sketches, 30/3/2021


Feedback was given for the sketches, refer to feedback.week[1].

Figure 2.1.2, Digitized text expression ideation sketches — Main, 6/4/2021


Figure 2.1.3, Digitized text expression ideation sketches — Alternate, 6/4/2021

 

Feedback was given for the digitized sketches, refer to feedback.week[2].

 

Then, we began animating one chosen type expression that we think have reached our own standard of "perfection". For this, I chose the "wave" one, as both Mr. Vinod and I thought that it was the strongest one out of my sketches.

 

Figure 2.1.4, Look into the pathing process in Illustrator, 13/4/2021



Figure 2.1.5, Artboards of the animation in Illustrator, 13/4/2021



Figure 2.1.6, Frames of the animation in Photoshop, 13/4/2021


Figure 2.1.7, The animation of the "wave" type expression, 13/4/2021

 Feedback was given for this first animation, refer to feedback.week[3].



exercise[2]: Type Formatting

todo: 

Create a layout that is conducive to read with proper leading, paragraph, line-length.

todid: 

I started out following the tutorial series uploaded by Mr. Vinod on YouTube, showcasing InDesign as well as taking us through some of the basic principles of typography visually.

The series started with a small warm up by playing with kerning & tracking.

Figure 2.2.1, Name kerning experimentation, 24/4/2021

 

Then, next came the real meat — the first crack at layout design. Since, this was all new, I decided to play it safe the first time. After following everything (sorta) to the tee, I was left with something that had what was taught (in essence at least).

Figure 2.2.1, Layout design first attempt, 24/4/2021

Feedback was given for this first attempt, refer to feedback.week[4].

 

With the main feedback being a bland layout, I decided to go ham & play around with columns, graphic elements, margins, etc. This landed me with a few contenders.

Figure 2.2.2, Layout design subsequent attempts, 27/4/2021

The main differences with this compared to the previous first attempt, was the change of the font to be able to keep a good line length while giving more space to play around.

Finally, I chose to go with one which I thought had the most "edge", which was this:

Figure 2.2.3, Final layout design attempt, 27/4/2021

The main part I liked was the pushing of margins, as it has elements which are positioned all right up to the edges. That coupled with the graphic elements that were connected, created something I feel is super cohesive & """entertaining""" to read.

 

 




feedback:

week[1]:

  • 6/4/2021 — rough sketches
    • Do the expressions match the meaning of the words?
      • Yep, it was noted to be correlative & creative.
    • How can the work be improved?
      • Some of the sketches weren't legible because of the brush I used, thus making some not look like "words".
      • Keep it simple, as those were the ones they found shined.

week[2]:

  • 13/4/2021 — digitized sketches
    • Do the expressions match the meaning of the words?
      • Yep, the ideas were noted to be "advanced".
    • Are the expressions well crafted (crafting/lines/shapes)?
      • Do they sit well on the art-board
        • Yes.
      • Are the compositions engaging/impactful?
        • Yes.
    • Are there unnecessary non-objective elements?
      • The "swoosh" element on the "slice" sketch could be confused as a "c", but it was noted to be acceptable in context of movement.
      • The "eyes" on the "eat" sketch might take away from the word.

week[3]:

  • 20/4/2021 — general
    • The e-portfolio has a few caveats that deviate from the provided format.
  • 20/4/2021 — animation
    • Is the animation suitable?
      • Yes, the wave is "wavey".
    • Does the animation reflect or enhance the meaning of the word?
      • Yes.
    • Does the animation reflect the form being expressed?
      • Yes, even though the meaning is subtle.
    • Does the animation create a smile in your mind?
      • Yes, the wave has been animated smoothly and is """nice to see""".
    • How can it be improved?
      • The animation could be slowed down to create more tension.

week[4]:

  • 27/4/2021 — formatting
    • Is kerning and tracking appropriately done?
      • Yes, but some sentences need a little more attention, as some characters take up less space which wasn't accounted for.
    • Does the font size correspond to the line-length, leading & paragraph spacing
      • Yes.
    • Is the alignment choice conducive to reading?
      • Somewhat, the layout/arrangement can be improved.
    • Has the ragging been controlled well?
      • Yes, but one of the paragraphs has extreme last few lines
    • Has cross-alignment been established using base-line grids?
      • Yes.
    • Are widows and orphans present?
      • No.

 


reflection:

exercise[1]: 

Through this exercise, I feel like I've learnt quite a lot about type and its forms. This was because we were able to go in and get into the nitty-gritty of the letter shapes, as we moved, squashed, & mixed around the the letters to form a cohesive image. The main experiences consist of playing with Adobe Illustrator, headbutting our way through the learning process, as well as real world still & motion graphic skills. Other than that, the overall class experience gave me a great start to charge through the rest of the semester, as well as good enough foundation to stay at that velocity.

Next, one of a few observations I've found along the way include the general "strictness" of the discipline of type. With all the theory stacked and stacked on top of each other, they form deceivingly simple sets of glyphs. Only one property being off (eg. Letter Spacing) will cause the whole design subject to feel off. The most I've found this was trying to position character forms around each other, and trying to balance their weights, eventually resorting to brute force (increasing/decreasing weights and walk far away to look).

Finally, from all that, the largest finding I took away was the new knowledge of type manipulation, as well as the various layout tidbits that were sprinkled along the classes (enforcing hierarchy, clear representation, etc.). 

exercise[2]:

Through this exercise, I feel like I've learnt a whole new set of principles. Instead of zooming in and tweaking around with individual characters in a micro scale, we sat back and looked at everything the characters formed — the layout. This experience was fun-ner than expected, as layout design is a past time I find more entertaining that it has the right to be, being literally a task of shifting things back & forth.

For observations, the main ones I found cool was how much discipline there was in creating something that looked """right""". This formulaic approach isn't new to me, as I come from a background with some coding experience, but the visual form of these rules certainly was. It was become more and more apparent that I would either hate this module or love it, since it differed from every other """design""" approach, which heavily favours expression through our own means instead of some random guy named Gutenberg from ancient times. Only time will tell... or maybe the final compilation post's reflection.

At the end of the day though, the largest finding I took away was the trickery used to get type looking right. I already knew some sly designers were doing black magic to get their type looking better than usual, as I'd previously struggled with text looking just, wonky. What I didn't know was how simple those tricks actually was; simple doesn't mean easy though. Equipped with this knowledge then, I think my next graphic pieces will certainly be able to benefit from proper typesetting, and not look like letter soup.

 


further reading:

Figure 3.1.1, Cover of the above material, 2/8/2016

 

"Typography's more than just the design of letters and characters"

I feel like this quote summarizes this crash course amazingly. It goes through a very detailed but easily digestible """stuffing""" of information, consisting of "what", "why", & "how". The main "what" explaining what the study of typography fundamentally is, and that being the art & technique of arranging type, stretching from the individual vertices of glyphs to the grey tone of a block. The main "why" asked about the importance of typography, which is definitely a question unfairly dismissed by people who are ignorant to the words they read. However, it's not their fault, as it's not easy to spot (literally), thus even harder to explain. What they boiled it down to was, "The little details do matter". With the philosophy out of the way, they went on to describe the typical terms, as well as the anatomy of type; basically teaching how to speak the language of the thing that speaks our languages. I found that most of what we were brought through were outlined in some of the lectures, but their handy little list of font resources at the end definitely wrapped the course up in a neat bow, recommended for all's consumption.


Why does typography matter?

Figure 3.1.2, Title of the article, n.d

My appetite for "why" wasn't satiated yet, so I went on looking for more answers, as it seemed like something people struggle to answer. What I found was this article, talking about reader attention and its correlations to type. It starts of talking about attention itself, and the economics of it. Kicking things off was a spiel to writers about empathizing with their readers, with the largest takeaway from it I feel like was — "most readers are looking for reasons to stop reading". To counteract that force, we may use tools, like typography. It draws a parallel of typography to a first date and it being all about forming an impression. Just like a first date, you make inferences of the other party based on their appearance. Just like a first date, you try to dress nice even if you don't have masters in fashion design. Just like a first date, you try to capture their attention and not bore them, with typography being your looks & content being your personality. Okay I'm definitely taking some liberties with this summary but it doesn't detract from the fact that, this article perfectly answers, and then convinces readers on all of the "why's" one might have about type.

 

Figure 3.1.3, Image taken from article, 21/3/2020


Monospaced fonts are my bread and butter. I mean, you're looking at it! I stumbled upon this question on another crash course while reading up on type, and I couldn't quite shake it. I knew that they had fixed widths, but that was it. This article brings up the past historical significance of it — how they were invented to comply with mechanical requirements of typewriters — as well as the modern historical significance of it — being able to be used in a grid with old limited computer systems instead of calculating widths per character. All this brings to the contrast of "Proportional fonts", which as the name might hint, has a proportional width to the character it represents. The article notes the width is all that differs between these two types of typefaces, but that one property can affect things like legibility on body text (whoops!), but grant benefits as the pseudo-grid look especially when using numerals. Then, at the end, it lists down what to look for in good monospaced fonts — even widths, obvious differences between characters, & style (for typewriters, programming, etc).


Figure 3.1.4, Cover of the above blog entry, 10/2/2020

I've definitely noticed there were a bunch of rules in typography, thus I wanted to try to figure out just what there really is to oblige to. A few key takeaways include the emphasis of visual communication through type, and how that stands above everything else. It notes that there's psychology linked to certain typefaces (as well as their properties, eg. colour, letter spacing, etc), and that should be considered when linking together a design. Something else that hit me hard was the secondary font tip (again, don't look too hard at this blog thanks), as I've always struggled with finding pairings, and their tip for the existence of "font duos" will definitely make my next font endeavor less of a migraine.


Comments

Post a Comment