Typography Task 1 / Exercises

4/4/2022 - Ending Date / Week 1 - Ending Week
Dominic Lim Yan Hong / 0354235
Bachelor of Creative Media Design
Task 1: Exercises

LECTURES:

Week 1: Development

Typography: The art of arranging and creating typefaces to make written text legible, readable and appealing when displayed.
Typeface: The family of fonts or weight that share a similar style
Fonts: Individual fonts or weights within a typeface

Development History:

Early letterform development: Phoenician to Roman:-

It was initially meant to be merely scratching wet clay with sharpened stick or carving into a stone with a chisel.
The forms of uppercase letterforms for nearly 2000 years can be seen to have evolved out of these tools and materials. At their core, uppercase forms are simple combination of straight lines and pieces of circles as the materials and tools of early writing required.
This is the earliest form of typefacing.

The greeks however, changed the direction of writing. Phoenicians, like other Semitic people, wrote from right to left.
This style of writing called 'boustrophedon', which meant that the lines of text read alternately from right to left and left to right.
The orientation of the letterforms changed with the changes as the direction of reading also changed.
This required people to read from both left to right like a novel and right to left in reverse.

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

This is the timeline of early letterform development:

Hand Script from 3rd to 10th Century C.E.

Square capitals were the written version that can be found in Roman monuments.
These letterforms have serifs added to finish the main strokes. The variety of stroke was achieved by the reed pen held at an angle of approximately 60 degrees off the perpendicular.

A compressed version of square capitals otherwise known as rustic capitals can allow for twice as many words on a sheet of parchment and therefore took far less time to write. This time, the pen was held at approximately 30 degrees off the perpendicular. Although, they were faster and easier to write, they were slightly harder to read due to the compression.

Both square and rustic capitals were reserved for documents of some intended performance. Everyday transactions, however, were typically written in cursive, this allowed forms to be simplified for the purpose of speed. This is also the beginning of what is referred to as lowercase letterforms.

Uncials incorporated some aspects of the Roman cursive hand especially in the shape of the A, D, E, H, M, U and Q. Uncials are simply known as small letters. The broad forms of uncials are more readable at smaller sizes in comparison to rustic capitals.

The further formilization of the cursive hand, half uncials mark the formal beginning of the lowercase letterforms.

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks that he entrusted rewrote the texts using uppercase, miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

The dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform known as Blackletter gained popularity. In the south, a rounder more open hand gained popularity, called rotunda. The humanistic script in Italy is based on Alcuin's miniscule.

Blackletter to Gutenberg's type

Gutenberg's skills included engineering, metalsmithing and chemistry. He marshaled them all to 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.

Typeforms have developed in response to prevailing technology, commercial needs and aesthetic trends. Certain models have endured well past the cultures that spawned them.

The following typeform classification here, based on one devised by Alexander Lawson only covers the main form of text type.

1450 Blackletter:
The earliest printing type, its forms were based upon the hand-copying styles that were used for books in northern Europe.

1475 Oldstyle:
Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England.

1500 Italic:
Echoing contemporary Italian handwriting, the first italics were condensed and closed-set, allowing more words per page. Since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms.

1550 Script
Originally, an attempt to replicate engraved calligraphic forms. Not entirely appropriate in lengthy text settings
In shorter applications, however, it has always enjoyed wide acceptance. Forms now range from formal and traditional to casual and contemporary.

1750 Transitional
A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing. Thick to thin relationships were exaggerated and brackets were lightened.

1776 Modern
This style represents a further rationalization of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes extreme.

1825 Square Serif / Slab Serif
These faces responded to the newly developed needs of advertising for heavy typefaces in commercial printing. As they evolved the brackets were dropped.

1900 Sans Serif
As the name implies, these typefaces eliminated serifs altogether. 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 and Gothic.

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 (and often stages between the two).

Week 2: Typo 3 - Text Part 1

The term 'kerning' refers to the auto adjustment of space between letters. Often mistaken as letterspacing. Letterspacing means to add space between the letters. The addition and removal of space in a word or sentence is referred to as 'tracking'.

Graphical creations are done in Adobe Illustrator, thus typography, which is in the realm of design, generally will be working in illustrator.

An example of normal tracking, loose tracking and tight tracking:

The more tight the tracking is, the harder it is to read in comparison to a text of looser tracking. Therefore sacrificing the quantity of words in a page for readability with loose tracking and vice versa.

Designers always letterspace uppercase letters, but there has long been strong ressistance within the type community to letterspace lowercase letters within text.

Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

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. Space between words are consistent throughout the text, allowing the type to create an even gray value.

Centered: This format imposes symmetry upon text, assigning equal value and weight to both ends of any line.
Centered types create 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.
The resulting openness of lines can occasionally produce 'rivers' of white space running vertically through text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

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 function of line length as it is for the type size and leading. Shorter lines require less leading while longer lines require more. Good rule of thumb is to keep line length between 55-65 characters.

A type specimen book is to provide an accurate reference for type, type size, type leading, type line length etc.

Compositional 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 (on the left) not a series of stripes (as seen on the right).

It is often useful to enlarge types to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

Week 3: Typo 4 - Text Part 2

There are several options for indicating paragraphs. In the first example, we see the pilcrow (¶), a holdover from medieval manuscripts seldom used today.

The second example is that of a line space between paragraphs. In this case, the line space is 12pt, then the paragraph space is 12pt. This ensures cross alignment across columns of text.

Line space vs Leading

The next example displays the standard indentation. Typically, the indent is the same size of the line spacing or the same as the point size of your text.

This method of extended paragraphs below creates unusually wide columns of text. Despite these problems, there can be strong or compositional reasons for choosing it.

A widow is a short line of type left alone at the end of a column of text.

An orphan is a short line of type left alone at the start of a new column.

This is a method of highlighting text

In this example the sans serif font has been reduced by .5 to match the x height of the serif typeface.

Week 4 Typo_2_Basic

Typography emploiys a number of technical terms. These mostly describe specific parts of the letterforms.

Baseline: The imaginary line the visual base of the letterforms.
Median: The imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase 'x'.

Stroke: Any line that defines the basic letterform.

Week 5 Typo_5_Understanding

The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see two different stroke weights of Baskerville stroke form. More noteworthy is the fact that each bracket connecting the serif to stem has a unique arc.

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.

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

Curved strokes must rise above the median (or sink below the baseline) of the x-height in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Letters / Contrast

The basic principles of graphic design apply directly to typography. The following are siome examples of contrast, as applied to type, based on a format devised by Rudi Reugg

The simple contrasts produce numerous variations:

INSTRUCTIONS

Task 1: Exercises - Type Expression

This certain task, our lecturer instructed us to construct a type of design for four words. Letting the meaning of certain individual words be displayed on how the font and text is distorted, melded and added onto.

SKETCHES:

We were advised to create sketches for the fonts however, due to the distortion of the texts and how much it relies on the design elements of the specific meaning of said words are simply too much.

Figure 2.1 (10/4/2023)

However, I utilised certain aspects in the sketch for my future digitilisations of the texts and developed them from there.

DIGITALISATION OF WORDS:

Figure 2.1 Initial Digitilization (20/4/23)

My initial idea was to capture the meaning of said texts without abusing the the aspect of distortion while also not using too many graphical elements. However, it seems I still might have used too much of it as apparently, the shockwave visualisation under the word 'Crush' was too much.

Text 1:

Fig 2.2 First Text (15/04/23)

This was the first text that I made to start off the process of the way I was working with the words I was provided.

Fig 2.3 Addition of initial reflection (15/04/23)

I then proceeded to add a pseudo reflection of sorts, creating a puddle like visual for this text.

Fig 2.4 Opacity Gradient addition (16/04/23)

I have added a gradient to the opacity so I can hammer in the puddle like visual, with the way light particularly reflects off of a puddle.

Fig 2.5 Addition of Distortion effect. (17/04/23)

The distortion effect on the reflection helps to boost the visualisation of the puddle.

Text 2:

Fig 2.6 Separation of text (14/04/23)

I created a separation between the Cr and Sh, by separating the U in half, almost creating a crack of some sorts.

Fig 2.6 Addition of a piece of the letter U (14/04/23)

I added the small piece in between the cracked U to create a visual connection and still forming a U without explicitly connecting the two halves together.

Fig 2.7 Added the effects (15/04/23)

I proceeded to give the Crush text, the effects needed to eccentuate the meaning of the text. However, in the next picture, I do not stick with this for long.

Fig 2.8 Removal of ground wave (16/04/23)

As previously stated, I removed the ground shockwave effect as my lecturer advised against it and it makes the text more simple-looking.

Text 3:

Fig 2.9 Creation of the text (14/06/2023)

The creation of this text, I decided to make the 'i' a lowercase letter.

Fig 3.0 Simple addition of bright circle in the middle of the dot on the 'i'

I put a white circle into the top of the i as it creates a glow much like fire does.

Fig 3.1 Visual addition for flame like pattern.

I then added the finishing touches to create a visual and to add in some more subtle flames on the dot.

Text 4:

Fig 3.2 Simple visual addition

I made this very simple and added some subtle details to the letters to avoid heavy distortion while keeping the overall meaning.

Fig 3.3 More dissipation addition

I then created more visuals by giving more letters a bit more dissipation as well.

Final Texts:

Fig 3.4 Final Texts

Fig 3.4.5 PDF of Final Texts

Animated Texts:

I opted to use the word Crush for this as I believe it was the most optimal and fun word to use for this task.

Fig 3.5 Process of developing animation

I utilised the program known as VSDC for this animation as I feel it is the best suited for creating a more dynamic text for this task

Fig 3.6 Initial Animation

Initially, I wanted to use this animation as my final piece for the dynamic texts. However, my lecturer advised me to not use the slow motion for the ending part of the animation as well as inverting the colours of both the background and the text.

Final Animated Text:

Fig 3.7 Final Animation

Exercise 2: Text Formatting

Fig 3.8 Initial Text Formats

I ran through many different formatting with my texts but some of them either had bad ragging, too small of font size, or too bad kerning.

Final Text Formatting:

Fig 3.9 Final Texts

Fig 4.0 PDF of Final Texts

Fig 4.0.5 Final Texts with Grid

Fig 4.06 PDF of Final Texts with Grid

FURTHER FEEDBACK:

Week 1: E-Portfolio Tutorial, Remember to add a label, description and pictures for assignments. Ran through the Module info. Words to choose are: Rain, Fire, Crush, Water, Freedom, Dissipate, Sick. Choose four, sketch out at least three ideas per word. On the subject of the video, Mr. Vinod introduced the aspect of typography and how it is used throughout history.

Week 2: Lecturer introduced us to a more detailed description of himself, and his professions. Understood that feedback given to other students and works may be applicable to my own work. Distortion in text is not acceptable most of the time. Second Crush sketch may work as it is a logical distortion with the letter 'C' crushing the 'r, u, s, h'. Overuse of graphical elements is not allowed. By week 3, digitization of work is required in the template provided in the same folder that the 10 fonts originated from.

Questions to ask:
1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1-5, how strong is the idea?
4. How can the work be improved?

Week 3: Think of the overall composition and how much space the word takes up the blank square, vary up fonts perhaps so it fits better, for dissipate, Add more actual dissipation onto the letters, perhaps making the other letters have the same properties as the 'E'.

Week 4: It would be best to pause at the end before looping (last frame can hang for about 2 or 3 seconds). Rule of thumb is applied the same as the static images, don't use too much graphical elements. Crush animation should be adjusted, no slow motion and no shift from white to black when impacting the ground, keep it simple.

Week 5: We've been given these questions for text formatting:
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?

Apply grid system onto text for better alignment of the texts.

REFLECTION:

Experience:
This assignment was quite an interesting learning process into the basics of typography and how to make designs around simple typefaces. I have learnt that creating designs for typefaces was not as easy as I thought as I had to work within the rules of the text, making sure the overall structure of each letter must be maintained and carefully enhanced. The requirement to not make use of distortion of the text puts a necessary limitation so as to not make the typeface unrecognizable. We also learnt not to rely too much on the details of the graphics around the text as that would take the focus away from said text. It was a very interesting challenge and I greatly enjoyed the process. These same principles go for the animation as well.

Observations:
Another piece we learnt about in regards to the second exercise, where we were tasked to form a passage to be readable and interesting while following the rules of text formatting. Keeping in mind of factors such as kerning, cross alignment, paragraph spacing, etc.

Findings:
I have very much understood the concept of what makes not only a piece of text readable, but also a relative grasp on how to achieve that. The real challenge for me mostly comes in the compulsory nature of the lecture notes as well as the further reading, and as much as I enjoyed the assignment as a whole, I frankly do not feel the same way with the notes and in my opinion, felt unnecessary. However, despite that, I felt like I learned a lot from constructing my designs and learning about the intricacies of text formatting and this has been a very eye opening experience.

FURTHER READING:

Fig 4.1 Typography Referenced Cover

We were tasked with reading this for further information into our subject of typography and it provides some relative insight.

Fig 4.2 Examples of braille and sign language

This book contains the foundation of what constitutes as typography and typographic design.

Fig 4.3 An example of type design

Excerpt taken from the book:
Typeface design is personal and social at the same time. It sits at the intersection of a designer’s desire for identity and originality, the demands of the moment, and the conventions shared by the intended audience. The designer also needs to take into account the constraints of the type-making and typesetting technology, the characteristics of the rendering process (whether printing or illuminating), and the past responses to similar conditions by
countless designers. A good visual history of past designs is an essential element of every designer’s toolkit.

In fifth century BCE, greek lapidary letters were letters carved into hard surfaces and one of the first formal uses of Western letterforms. The greeks then changed several letters and created the foundation for Western writing.

Then in First Century BCE, Roman monumental capitals became the foundation for Western type design, as well as the ancestor of all serif typefaces

Search This Blog

Dominic Lim Yan Hong (0354235)

Typography Task 1 / Exercises

Comments

Post a Comment

Popular posts from this blog

VSP Project 1

Project 3: Creating a Single-Page Website for Your Favourite Artist