Typography - Task 1
30.3.2021- 23.4.2021 (Week 1 - Week 4)
Rusydina Fazlin Athirah / 0344000 / Bachelor's in Creative Media
Typography
Task 1
LECTURES
Week 1:
[Course Introduction]
The first week of Typography class was a simple short introduction to the course and the mentors that will be teaching the class. Mr. Vinod along with the assistance of Mr. Shamsul guided the class in knowing all about the programs that are required, starting out blogs, and also commencing into the first task that is to ideate and sketch out the ideas of 4 different words from a pile of 7 words.
Week 2:
[Typography - Development]
April 6th, 2021
-
Week 2's lecture was more towards history and how typography was developed over the centuries. Way back before pencils and pens were invented, sharpened sticks were initially written into wet clay scratching into the clay to form letters or a chisel that can carve letters into stone.
Figure 1.1 -
4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Baal Hammon, Evolution from Phoenician letter
4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit and Baal Hammon, Evolution from Phoenician letter
A fascinating development when it comes to typography was when the Greeks developed a writing style called 'boustrophedon' meaning that lines of text alternately read from right to left and left to right. Changing the direction of reading also leads to the letterform's orientation being changed.
The Romans used square capitals in their monuments from the third to the tenth centuries C.E. Serifs are applied to the ends of the main strokes. A compressed variant of the square capitals was introduced in order to fit more text into parchments. The cursive hand was used for daily transactions, despite the fact that square capitals were used in official documents.
Some aspects of the Roman cursive hand were incorporated into Uncials, particularly in the shape of the A, D, E, H, M, U, and Q. Since the word ‘uncia' means a twelfth of everything in Latin, some scholars believe that uncials refer to letters that are one inch (one-twelfth of a foot) tall. Uncials, on the other hand, maybe better thought of as small letters. Uncials in broad forms are easier to read in small sizes than rustic capitals.
Figure 1.6 - 4th – 5th century: Uncials
Week 3:
[Typography - Text. Part I]
April 13th, 2021
-
In the 3rd week of the recorded lecture for Typography, Mr. Vinod introduced a list of body texts. There were a few terms to these text of bodies which are:
- Kerning refers to the automatic space between letters.
- Letterspacing means adding space between the letters.
- Tracking, the addition, and removal of space in a word or sentence.
Figure 1.8 - Without Kerning (Left) compared to With Kerning (Right)
Figure 1.9 - Normal tracking(top right), tight tracking (bottom left), loose tracking (bottom right)
Text Formatting
Next, Mr. Vinod touched on a subject about 'text formatting', there are a few types of text formatting, which are:- Flush left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value.
- 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 the material that is non-pictorial by nature. Because the 'centered' type creates such a strong shape on the page, it's important to amend line breaks so that the text does not appear too jagged.
- Flush right: This format places emphasis on the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.
- Justified: Like centering, this format imposes an asymmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
"Type that calls attention to itself before the reader can get to the actual words is simply interference and should be avoided. Quite simply if you see the type before you see the words, change the type."
In addition to knowing the unique characteristics of each typeface, it is important to understand how different types feel as text. Various types of messages follow. A good typist must know which typeface fits the message at hand best.
Leading and Line Lenght
Next on the list is 'Leading and Line Lenght'. The aim of this sub-topic in Typography is to enable easy, protracted reading when setting text type. At the same time, a type field should take up as much space on the page as a photograph.- Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.
- Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
- Line Length: Appropriate leading for text is as much a function of the line length as it is a question f type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep the line length between 35-65 characters. Extremely long or short line lengths impair reading.
A type specimen book shows samples of typefaces in various different sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. You only determine your choice on screen when its final version is to read on-screen.
An example book (or screen ebook), type specimen, size, lead type, line length, and such, it should also be used accurately.
Figure 1.2.1 - Sample Type Specimen Sheet
Week 4:
[Typography - Text. Part II]
April 20th, 2021
-
The lecture of this week was a follow-up to last week's topic. Since we began formatting paragraphs. First, there were various options for a paragraph. The Pilcrow (¶) used for the representation of the paragraph distance was one of the earliest forms of paragraph indication.
Figure 1.2.2 - Pilcrow Paragraph Indicator
The "line space" (leading) between the paragraphs is another way of indicating paragraphs. The lead is a space that is different from the line space between two lines of text. Line space begins in the bottom line at the end of the text on the top line and ends at the end of the text.
Figure 1.2.3 - Line Space Paragraph Indicator
Indented lines may also be used to indicate paragraph beginnings. The purpose is usually the same size as the distance between the lines or the same text size. Extended paragraphs also serve as a reference for new paragraphs.
Figure 1.2.4 - Indented Line Paragraph Indicator
Widows and Orphans
- A widow is a short line of the type left alone at the end of a column of text.
- An orphan is a short line of the type left alone at the start of the new column.
Figure 1.2.5 - Widows and Orphans
Another pressing topic discussed during the lecture is the highlighted text. It creates an information hierarchy. In contrast to the main body of the text, different emphases can be used. If a text is too bold, the emphasis must be decreased by 0.5pt. Behind the area to be highlighted can also be a Gray Patch.
Figure 1.2.6 - Itallic Highlights(left) and Bolded highlights(right)
Figure 1.2.7 - Bold San Serif Highlights(left) and Color Highlights(right)
A head indicates that the subjects of a section are clearly divided. In the examples below, 'A' heads are set in small caps and in bold, larger than the text. A 'head extension' to the left of the text is shown in the fourth example.
Figure 1.2.8 - Variations of Main headings
Figure 1.2.9 - Variations of Sub Heading
Figure 1.3.1 - Variations of Sub-Sub Heading
Cross Alignment
Figure 1.3.2 - Cross Allignemnt
Below is one headline-type cross-alignment line with two text-type lines and, (right; bottom left), four headline-type cross-aligned lines with five text-type lines.
Figure 1.3.3 - Cross alignent
INSTRUCTIONS
Task 1:
The first week's exercises were to typographically express 4 words below from the 7 that was chosen:
- Slice
- Scream
- Wave
- Punch
- Spin
- Point
- Eat
Mr. Vinod also provided the class with 10 typefaces that we have to download to use in the exercise when planning out our sketch ideas.
My sketches:
Figure 2.1; scream, April 6th, 2021
Figure 2.2; Point, April 6th, 2021
Figure 2.3; Wave, April 6th, 2021
Figure 2.4; Punch, April 6th, 2021
Improvised sketches:
Figure 2.5; punch improvised sketch, April 6th, 2021
From the feedback I received, I made the sketch seem a lot more visible and add a few elements of movement and collision onto the letter 'P', and for instance, it adds more expression of hitting which regards the word 'punch'. It also adds convenience to digitize it better because it's much more visible!
Digitized sketches:
Figure 2.6; digitalized sketches, April 12th, 2021
Figure 2.7; Refined digital sketch, April 14th, 2021
Task 1A:
April 13th, 2021
-
After completing and refining the sketches to their completion. Mr. Vinod assigned the class to choose one final word of our choice to animate out of the 4 words.
I decided on choosing the word 'Punch' to animate.
Figure 2.8 - Illustrator, progress 1
I worked on about 23 frames in order to animate the expression of my word chosen. Later then, from the directions demonstrated by Mr. Shamsul during week 3's lecture, the animating begins in photoshop.
Figure 2.9 - Photoshop, progress 2
After following the directions provided, I exported the frames and resulted in the final outcome.
Final outcome:
Figure 2.1.1 - Final outcome, punch gif
Figure 2.1.2 - Final outcome, Punch Gif
Task 2
Text Formatting
April 27th, 2021 [Week 5]
-
In task 2, Mr. Vinod started off 'task two' by having us watch a recorded demonstration on text formatting from week 4.
He provided texts and paragraphs and showed us in the recorded video, each step on how to function and work our way through Adobe Indesign.
We were assigned to work on a 'text formatting tryout' to be shown this week (April 27th, 2021), to receive feedback and have more in-depth from Mr. Vinod and Mr. Shamsul's lectures.
There were 3 parts that Mr. Vinod's recorded demo video told us to do, the first part was to attempt typing out our names with typefaces provided by the task module.
Text Formatting, Tryout (NAME):
 |
| Figure 3.1.1 - Text Formatting, Name, April 25th, 2021 |
Text formatting, paragraph tryout:
 |
| Figure 3.1.2 - Text formatting, Paragraph tryout, April 25th, 2021 |
Text formatting completed tryout:
 |
| Figure 3.1.3 - Text formatting, completed tryout, April 25th, 2021 |
PDF VERSION:
Refined:
 |
| Figure 3.1.4 - Refine, Text format, April 25th, 2021 |
PDF VERSION:
Feedback:
-
Feedback from class group:
[April 6th, 2021 (Week 2)]
-
During week 2's class session on Typography, Mr. Vinod and Mr. Shamsul guided the class in summarising last week's exercise which is to work on the words that were given in a more expressive way. Mr. Vinod then explained a topic about 'giving feedback' as a participating session in the class from other students based on their sketches. A part of the classes had to give feedback on each other's work.
My group gave feedback on how each of my words was already expressed vividly when a viewer was to first lay their eyes on that particular word. It was nice to know that, but it only meant I had to progress those sketches to seem more interesting in future stages of the exercise.
Although I had feedback on my expressive sketch for the word 'punch' that had to be more improved. A groupmate of mine mentioned sketch should be more visible to the viewer so in short, they wanted my 'punch' sketch to appeal more visibly and conveniently to a viewer. Which was very kind of them to point out.
From the feedback I received, I decided on keeping the initial ideas I had for my 4 words but did what I could to improve it based on the feedback I got.
Feedback from class group:
[April 13th, 2021 (Week 3)]-
After a few tweaks on my sketches, in week 3 we had the same activity carried out by my groupmates giving feedback. I digitized my sketches and displayed them to get feedback from my peers. They mentioned that the word 'wave' and 'punch' needed more emphasis on them.
Punch had unnecessary elements to it, like the white lines in my opinion were to seem more of an impact. Wave on the other hand should be more directed in one sequence to make it look neater.
Feedback from class group:
[April 20th, 2021 (Week 4)]-
Regarding this week's class, after animating my type expression it was time to showcase each of our works in a break-out room group where we give feedback to our groupmates based on our type expression animations and the feedback I received was that my animation had the expression of the word expressed, overall everything and every attempt was to its full potential, although what needed to be improved was the distortion for the letter 'P' to be less distorted.
Feedback from class group:
[April 27th, 2021 (Week 5)]-
My peers gave feedback on the text formatting practice that we all did, they mentioned that overall I understood the functions and how to work out the program when I watch the recorded demo video by Mr. Vinod. They mentioned maybe to refine it, have it look a little more interesting than 'too simple' but since it was our first tryout, it was understandable.
Feedback from Mr. Vinod:
[April 27th, 2021 (Week5)]-
Mr. Vinod gave very direct feedback on my tryout. He mentioned and pointed out, that the leading was slight, there was minor ragging and supposedly we weren't allowed to use multiple images (only 1) and I missed out on captioning the image displayed, therefore I needed to add that in, to add to that I was using two typefaces for the headlines compared to the body texts when we were only meant to use one.
Reflection:
April 19th, 2021
-
The first few weeks of Typography were challenging I won't lie about that. Although, with the help of Mr. Vinod and Mr. Shamsul's advice, lectures, and generous demonstrations on our works and helping progress in our exercises; the first exercise.
I was able to reflect upon learning a lot more about words, words, and letters that we type out on our devices every day. They have history and meaning behind all of them, whether it'd be towards being organized or just wanting to decorate with the use of Typography.
The first exercise I did, was an interesting take when it comes to verbs. Being able to learn and construct ideas in expressing words according to the meaning of the words was fun but still very hard. In the end, it all resulted in a little breakdown, but with the effort that I was able to build up before the deadline, I really hope with the capability that I carried out on working on my 'expressed word', it may not be much now. Though, I hope to be able to unlock new skills and refine my ways of producing the kind of expected works through this class this semester!
Further reading:
Task 1, further reading (Week 1 - Week 6)
 |
| Figure 3.1.2 - 'The Elements of Typographic Style' book cover |
The Elements of Typographic Style
by Robert Bringhurst (1999)
The book by Robert Bringhurst was originally published in 1999 but is like none else: as an art, a designer's craft, and even a cornerstone in politics and history, he succeeds in combining the intrinsic details of typography.
The last reference manual for type often is considered, but I think that's a lot more so than this; Robert's genuine enthusiasm for word justice more than any booklet can ever do to the world of printed words. This book will please both beginners and professionals in the field, from the creation of a backed-by-math layout to how font design works because it is simply full of very wide-range subjects.
Comments
Post a Comment