Typography Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

May 19, 2024

Typography Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

27 April 2024-

CHONG CHENG TAO (0371072)

Typography | Bachelor of Design in Creative Media | Taylor's University

Task 2: Typographic Exploration & Communication (Text Formatting and Expression)

List

LECTURES

Week 5:

Typo_5_Understanding

1. Letters / Understanding Letterforms

The uppercase letters are suggested to be symmetry, but in fact it is not all symmetry. The letterforms below both have their own expressions and both are internally harmonious.

Baskerville stroke form : Easy to identify two different stroke weights

Univers stroke form : The left width is thinner than the right width.

Fig 1.1.1 Baskerville "A", Univers "A"

These are lowercase letter "a" of Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 1.1.2 Helvetica "a", Univers "a"

2) Letters ? Maintaining x-height

X-height generally describe the size of the lowercase letterforms. There is some additional points, curved strokes, such as in ‘s’, must rise above the median or sink below the baseline. This make the letters appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 1.1.3 X-heights for lowercase letter

3) Letters / Form / Counterform

Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (negative space) —the space describes, and often contained, by the strokes of the form. The spaces between letters make up the counterform when they are combined to form words. The determine the readability of a word.

Fig 1.1.4 Form and counterforms

One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making.

Its worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to loose its identity, as individual elements are examined without the context of the entire letterform.

Fig 1.1.5 Form and counterforms

Contrast is a crucial component of design that is used in typography as well.

Variation for contrast in typography

Small + Organic
Small + Dark
Large + light
Negative + Positive

Fig 1.1.6 Combination of contrast in Typography

Week 6:

Typo_6_Screen & Print

1) Typography/ Different Medium

In the past, typography was viewed as living on paper. Good typography and readability were the result of skilled typesetters and designers. Today, typography exists not only on paper but on a multitude of screens and devices. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more.

2) Print v.s. Screen Type

Primarily, type was designed intended for reading from print. A good typeface for print such as Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their elegant characteristic and highly readability. They are versatile and easy to digest for viewers.

Fig 1.2.1 Example of Print Type

Fig 1.2.2 Example of Print Type

On the other hand, typefaces used on the web are modified to enhance readability and performance on digital screen.

For example:

Taller x-height
Reduction of ascenders and descenders
Wider letterforms
More open counters
Heavier thin strokes and serifs
Reduction of stroke contrast
Modification of curves and angles
More open spacing (especially for smaller sized typrface)

All these are aiming to improve letterforms recognition and readability in the screen medium like web, e-books, e-readers, and mobile devices.

Hyperlink

Hyperlink is existed in web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default. When the cursor is moved over a hyperlink, the arrow should change to 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.

System Fonts for Screen/ Web Safe Fonts

Each device comes with its own pre-installed font selection, different operating system might have different selection.

Thus ‘Web safe’ typefaces are important to know. They’re the small collection of fonts that overlap from Windows to Mac to Google. These are the example:

Open Sans
Lato
Arial
Helvetica
Times New Roman
Times
Courier New
Courier
Verdana
Georgia
Palatino
Garamond

The text displayed on PCs, tablets, phones and TVs are in different proportion too because of different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.

Fig 1.2.3 Size of type in displayed in different screen

3) Static v.s. Motion

Static Typography

Static typography expresses words with little characteristics. Dynamic features have much more expressive possibilities than traditional attributes like bold and italics.

Fig 1.2.4 Static Typography

Motion Typography

Typographers have the chance to "dramatize" type through temporal media, making letterforms more "fluid" and "kinetic". Typographic information is presented in film title credits, frequently animated to bring the text to life. Animated text is a common feature of motion graphics, especially in the branding of film, television production films, music video and advitisement.

Fig 1.2.5 Motion Typography

INSTRUCTIONS

This is the Module Information Booklet for this module:

Task 2: Editorial Text Formatting

In this task, we need to design a editorial layout by using the text given by Mr Vinod. There is three options which are "The role of Bauhaus thought on Modern Culture", "Unite to Visualise a better world" and "A Code to Build on and Live by".

I choose "The role of Bauhaus thought on Modern Culture" as my formatting text. This is because I am always have pasison on shapes and geometry graphics.

1) Research

Bauhaus design is often abstract, angular, and geometric, with little ornamentation. Its goal was to merge all artistic mediums into one unified approach, that of combining an individual's artistry with mass production and function.

Fig 2.1.1 Bauhaus Design

Some characteristic of Bauhaus design:

Form follow functions
Minimalism
Simplicity
Primary colours
Geometry shapes
Balanced asymmetry

These are some of the reference:

Fig 2.1.2 Bauchaus Design Reference

Since we are not instructed to use colour in the design, I convert these references into greyscale to observe the brightness.

Fig 2.1.3 Bauhaus Design School

Fig 2.1.3 Bauhaus Design School artwork

I found out the iconic Bauhaus school picture. This gave me inspiration of doing the design in 45 degrees angles.

These are my rough design sketch for this exercise:

Fig 2.1.4 Rough design sketch 1

Fig 2.1.5 Rough design sketch 2

After that, I started to digitise them in Adobe Illustrator.

Fig 2.1.6 & Fig 2.1.7 Digitised rough designs

I placed them into Adobe InDesign to test out the overall effect and composition. More elements were added during this session. As the text placed in 45 degree will decrease readability, I placed it normally instead.

Fig 2.1.7 Rough Design 1

Fig 2.1.8 Rough Design 2

Ms Hsin thought the approach of Fig 2.1.8 shows more characteristic of bauhaus, I was instructed to add more bauhaus related elements.

FIg 2.1.9 Rough Design 3

I tried to combine the characteristic of Rough Design 1 and Rough Design 2. Later, I did the final adjustment by simplifying the design to emphasis on the title and the text.

Fig 2.1.10 Final Layout Block

Fig 2.1.11 Editorial Text Formatting Design (JPEG)

Fig 2.1.12 Editorial Text Formatting Design (PDF)

Fig 2.1.13 Editorial Text Formatting with Grid (JPEG)

Fig 2.1.14 Editorial Text Formatting Design with Grid (PDF)

Formatting Details:

Layout Design:

Font/s: Univers LT Std 67 Bold Condensed, Futura Std Bold, Futura Std Book

Type Size/s: 135 pt ("Bauhaus"), 48 pt ("Modern"), 40 pt ("The Role Of & Culture"), 33pt ("Thought on")
Leading:-
Paragraph spacing:-

Head Line:

Font/s: Futura Std Bold

Type Size/s: 14 pt
Leading: 14 pt
Paragraph spacing:-

Body:

Font/s: Univers LT Std 55 Roman

Typ Size: 9 pt, 19 pt (Drop Cap)
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 55
Alignment: Left aligned

Margins: 12.7 mm
Columns: 2
Gutter: 5 mm

FEEDBACK

Week 6:

General feedback:

Caption is usually placed below the image.
Finalise Task 1.

Specific feedback:

Try to avoid too much reading direction, limit it to 2 or 3.
The approach of Fig 2.1.8 shows more characteristic of bauhaus, try to add more bauhaus related elements.
For Fig 2.1.8, try not to remain the stem of the letter "B" to make it more recognisable.

Week 7:

General feedback:-

Specific feedback:

Bauhaus design is not emphasis on the continuous of desogn element.
Since the overlapping on the word "Bauhaus" already emphasis the word, limit the use effects, keep the overall design clean .

Week 8:

General feedback:

Specific feedback:

The final design is fine, submit it in e-portfolio.

REFLECTIONS

Experience:

During this module, I had the opportunity to delve deeplyd into practical skills in Adobe InDesign. One of the significant aspects of my experience was learning to format text using Adobe InDesign. This software is incredibly powerful for creating visually appealing layouts. I spent time to familiarize myself with skills such as setting up margins,selecting typeface, utilizing the grid systems and achieving cross alignment. This hands-on experience was valuable in helping me enhance layout design skills.

Observations:

Throughtout this module, I noted the significant impact that proper text formatting can achieve the readability and overall aesthetics of a design. Furthermroe, adjusting kerning and leading, as well as experimenting with different typefaces, allowed me to see firsthand how these elements influence the perception of text. Moreover, I observed that the grid system and columns, which is a fundamental aspect of InDesign, give impact in balancing and structuring the whole layout. Moreover, I found out the relationship between the size of typeface, leading and letterspacing, which a small adjustment can largely affect each others.

Findings:

A key finding from my studies was the rationale and historical background of Bauhaus design and its influence on modern design. Understanding the Bauhaus principles help me to gain a deeper understanding in minimalist desigh. By studing Bauhaus, I'm more aware of simplicity and funtionality in my own work. Besides, I developed my sensitivity on the combination of lines, geometric shapes and greyscale colours.

The name itself is derived from the Latin word rotundus, which refers to a building that has a round, circular floorplan. Although Rotunda letterforms share many of the same structural qualities as textualis letterforms, they contain more rounded strokes. This adds more variety to the alphabet and makes the style far more legible when written narrowly.

Fig 5.4 Rotunda

Bastarda (14th – 16th Century AD)

Bastarda (also known as “hybrida”) is an evolved variety of textualis for,s that surfaced in Northern Europe in the late 14th century. True to their name, bastarda scripts can be characterized as bastardized treatments of textualis since the style itself is defined as a hybrid mix of traditional textualis and the simplified cursiva styles that came about thereafter.

Bastarda scripts were quicker to write as their letterforms involved less reorientation of the pen. The deliberation of formality and consistency ranged contextually. Some manuscripts were carefully written while other forms of correspondence were loose and more informal. Because of this spectrum of application, as well as the regional varieties and nuanced treatments of the letterforms, bastard fonts are difficult to categorize holistically.

Fig 5.5 Bastarda

Fraktur (16th – 20th Century AD)

Fed up with the difficult-to-read textualis hands, German emperor named Maximillian had his chancery Leonhard Wagner work with a woodblock cutter, Hieronymus Andreae to develop a new typeface, which is Fraktur.

Fraktur letterforms are broken apart into fractured strokes laid out at many angles. This variety of angles make Fraktur more legible, compared to textualis, which were vertically rigid and narrow.

Fig 5.6 Fraktur

Search This Blog

CHONG CHENG TAO (0371072)