Typography | Task 1: Exercises

Typo_0_Introduction - In this lecture we were told to make our own e-portfolio using blogger.com. It is used to keep store our progress and projects.

Typo_1_Development - Typography is a form of art where it is expressed with letters and texts in a way that makes the copy legible, clear, and visually appealing to the reader. Typography has evolved dramatically over the past half a decade, showing changes that reflects in culture, technology, and aesthetics. The development mainly focuses on the western influence, particularly the evolution of Roman letters and influences from the Phoenicians.

Early letterform development: Phoenician to Roman

Fig. 1.1.1 Phoenician Letter Evolution

Is done by scratching into wet clay with sharpened stick or by craving into stones.
What tools were used can affect how the letterform looks.

Phoenician writes from right to left, Greeks write from right to left and left to right or known as "boustrophedon". How it is written, changes the flow of the words.

Fig. 1.1.2 boustrophedon, Greek writing style

Fig. 1.1.3 Early letterform development

2. Hands Script from the 3rd - 10th C.E.

Fig. 1.1.4 Development of Hand Script

Square Capitals can be seen in Roman monuments. This letterform have serifs at the end of the main strokes. The variety of strokes are created by how the pen was held, which was held in approximately 60 degree angle off the perpendicular.
Rustic Capitals is faster and easier to write but slightly harder to read. Rustic capitals are more compact compared to the square capitals. This writing was achieved by holding the pen at an angle approximately 30 degree off the perpendicular.
Roman Cursive were used in an everyday transaction. This was the beginning of what we call as lowercase letterform.
Uncials incorporated same aspects of Roman cursive hand. In Latin "Uncials" means 12th of anything.
Half Uncials marks the formal beginning of lowercase letterform.
Caloline miniscule, Charlemagne is the first unifier of Europe since the Romans.

Fig. 1.1.5 Blackletter to Gutenberg

Blackletter gained it's popularity in Northern Europe. The humanistic script in Italy is based on Alcuin's miniscule
Gutenberg's skill involves engineering, metalsmithing, and chemistry. His type mold needed a different brass matrix, or negative impression for each letterform.

TIMELINE

1450 Blackletter - earliest printing style, (e.g. Cloister Black, Goudy Text).
1475 Old-style - uppercase letterforms are found inscribed on Roman ruins (e.g. Bembo, Caslon, Garamond).
1500 Italics - were condensed and close-set to allow more words in a page.
1550 Script - not entirely appropriate in lengthy text settings (e.g. Mistral, Kuenstler Script).
1750 Transitional - a refinement of old-style forms (e.g. Baskerville, Bulmer).
1775 Modern - serifs were unbracketed and the contrast of thick and thin strokes were extreme (e.g. Bodoni, Didot).
1825 Square / Slab Serif - initially were heavily bracketed serif, however, as they evolved, the brackets were dropped (e.g. Rockwell, Serifa).
1900 Sans Serif - these typefaces eliminated serifs all together. Became wide-spread at the beginning of the twentieth century (e.g. Gill sans, Futura, Helvetica).
1990 Serif / Sans Serif - A recent development, this style enlarges the idea of the family of the typeface that involves both serif and sans serif alphabets (e.g. Rotis, Scala, Stone).

WEEK 2 - Typography

Typo_3_Text_P1 - All about text formatting,

Kerning is an automatic adjustment of space between letters and is often confused with letter spacing. This is used to improve the visual outcome of the text. Mostly used for speeches with less words (e.g. titles)
Letter spacing means to add space between the letters.
Tracking is the addition and removal of space in a word or sentence (there's 3 types of tracking: normal, loose, and tight tracking).

Formatting text

Fig. 1.2.1 Formatting text
https://medium.com/creative-repository/when-in-doubt-align-left-bdc121619718

Leading and Line Length

The goal is to set the text to allow easy, prolonged reading, what contributes into this?

Type size : large enough you can read easily at arms length .
Leading : if it set too tightly, it encourages vertical eye movement. If it set too loosely, it can distract the reader from the material at hand.
Line Length : A good tip is to keep line length between 55-65 characters. An extremely long or short line lengths impairs reading.
Compositional requirement : text should create a field that can occupy a page or a screen.

WEEK 3 -

Typo_4_Text_Part2

Leading vs Line Spacing

Fig. 1.3.1 Leading vs Line Spacing

Leading is the space between texts

Line Spacing is the space between a baseline and the other ascender / descender

Indentation

Fig. 1.3.2 Standard Indentation

Fig. 1.3.3 Extended Indentation

Widows and Orphans

Fig. 1.3.4 Widow and Orphan

Widow is a short line left alone in the end of the column.

Orphan is a short line left alone at the beginning of a new column.

Highlighting Text

Fig. 1.3.5 Highlighting Text

Can be done by:

using italics
increase the boldness
change the color of the text body (black, cyan, magenta)
highlight the body of the text with grey or vibrant colors

Headline within Text

Fig. 1.3.6 "A" Head

"A" Head to indicate a clear break from text to indicate a new body of text.

Fig. 1.3.7 "B" Head

"B" Head is the subordinate to "A" heads. This head indicates a new supporting argument.

Fig. 1.3.8 "C" Head

"C" Head highlights specific facets of material of within "B" head text.

Hierarchy - putting them together as a sequence

WEEK 4 - Basic / Describing Letterform

Typo_2_Basic - Typography employs a number of technical terms Mostly describe specific parts of the letterform.

Key components of letterform:

Fig. 1.4.1 Components of letterform

Baseline - the imaginary line that defines the visual base of letterforms.
Median - the imaginary line that defines the x-height of the letterforms.
X-height - the height of the lowercase letter "x" in any typeface and is crucial for understanding letter proportions.
Strokes - any line that defines the basic letterform, can be thick or thin.
Apex/Vertex - by joining 2 diagonal stems, an/a apex/vertex is created (apex above, vertex below).
Arm - short strokes off the stem of the letterform. Can be horizontal (E/F/L) or vertical (K/Y).
Ascender - strokes that exceed the medium line (b/d/h/k).
Descender - strokes that exceed the baseline.
Barb - the half-serif finish on some curved strokes (C/G/S).
Beak - the half-serif finish on some horizontal arms (E/T/L).
Bowl - the rounded form that describes a counter, can be either open or closed (b/d/p/q).
Bracket - the transition between the serif and the stem.
Cross bar - Is what connects 2 stem strokes. (A/H)
Cross Stroke - the horizontal strokes in the lowercase letterforms f/t.
Crotch - the interior space where 2 strokes meet.
Ear - the strokes extending out from the main body of the letterform (g/r).
Finial - the rounded non-serif terminal to a stroke (f/a).
Leg - short stroke off the stem of the letterform, can be at the bottom (L) or incline upwards (K/R).
Ligature - the character formed by the combination of 2 or more letterform (fl/fi).
Link - the stroke that connects the bowl and the loop of a lowercase "g".
Stress - the orientation of the letterform, can be shown by the thin stroke in round forms.
Swash - the flourish that extends the stroke of the letterform. (do not use swashes in capital letters together to form a word!)

Type-family consist of uppercase, lowercase, small capitals, uppercase & lowercase numerals, italics, romans, punctuations, miscellaneous characters, ornaments. Combination in type-families : Roman, italics, boldface, light, condense, extended.

Fig. 1.4.2 Typeface combinations

WEEK 5 - Letters / Understanding letterforms

Typo_5_Understanding

Symmetrical or not?

Uppercase letterform - Seems symmetrical but it is actually not.

Fig. 1.5.1

Both Baskerville and Univers shows the meticulous care a type designer takes to create letterforms, both are internally harmonious and individually expressive.

Fig. 1.5.2 Helevetica (left) Univers (right) lowercase 'a'

Subtle difference makes a huge differences. A comparison of how the stems of the two letterforms above finish. How the bowls meet the stems reveals the palpable difference in character among the two letterform.

Maintaining x-height

Fig. 1.5.3

Fig. 1.5.4

As we have learnt, x-height describes the size of the lowercase letterforms. Curved strokes like 's', must rise above the median or sink below the baseline to appear to be the same size as the vertical and horizontal strokes they adjoin.

Form / Counterform

Fig. 1.5.5

Knowing the negative space of the letterform is as important as recognizing letterforms. Examining them in close details can provide a good feel for how balance between form and counter.

Contrast

Simple contrast produces many variations:

small + organic/large + machined ; small + dark/large & light ....

Fig. 1.5.6 Contrast in Letterform

INSTRUCTION

Fig. 2.1 <iframe src="https://drive.google.com/file/d/14n43noxq07szHB9wVs_0TxDa5Jd1R_kh/preview" width="640" height="480" allow="autoplay"></iframe>

>Task 1 : Exercise | Type Expression

Compose and express 4 chosen words with the use of Adobe Illustrator using any of the 10 typefaces given. For the first few weeks we were told to make a minimum of 4 sketches for each word (melt, burn, grow, fade).

1. Exploration

Fig. 3.1.1 Moodboard

For a better understanding of the task, I explored my pinterest for inspiration. I also took a look from the previous works from the seniors, to have an idea of what I need to do.

2. Ideation

Fig. 3.2.1 Melt Sketches

Melt - Personally, "melt" is my favorite word to design. However I was worried that i might distort #3 too much.

Among the 6 sketches, I like how #2 and #4 turned out. The idea was an ice cube melting. During consultation, Mr. Max chose #2 to digitize.

Fig. 3.2.2 Burn Sketches

Burn - I face the same issues with burn also, I was afraid that I might change to font too much for #3 and #4, so i decided keep it more simple but trying to deliver the message through the design. Mr. Max ended up choosing #3 and #5, I settle with #5 as I felt #3 was not unique enough.

Fig. 3.2.3 Fade Sketches

Fade - Mr. Max approved #3 and #4, I ended up with #3. The idea was to make it looks like it is fading from the center, that is why I tilted the words to make a perspective as if it is fading.

Fig. 3.2.4 Grow Sketches

Grow - I find "grow" to be the hardest to compose. Most of the ideas I had was already on the internet. However, during the exploration, I had an idea as if it was "growing" like vines, so I connected all the letters (#4), and fortunately, it is what Mr. Mr. Max picked.

Fig. 3.2.5 Final Sketches

Here is the 4 chosen sketches for the 4 words.

3. Digitalization

Fig. 3.3.1 10 Typefaces

Firstly, I typed out all 4 words with the 10 Typefaces given to see and chose what worked best for each words.

Fig. 3.3.2 Process

Since it is my first time using Adobe Illustration, I was having a hard time getting it right. But after a lot of trial and errors, I eventually get used to the tools.

At first, I turned the "MELT" into a cube by pulling each anchor, but Mr. Max showed me how to do it easier and faster by the help of the perspective tool. For "grow" and "burn" I mainly use the pen tool and the curve tool to achieve them. "Fade" was the easiest for me, since I just pulled the anchors and with the help of 2 lines to help guide me.

Final Digital Type Expression

Fig. 3.3.3 Final Digital Type Expression - JPG

Fig. 3.3.4 Final Digital Type Expression - PDF

4. Type Expression Animation

After the final type expression, we were asked to chose 1 word amongst the 4 to animate. I initially wanted to do the "grow" however I decided to animate "burn" instead.

Fig. 3.4.1 Burn Animation Artboard

I had the idea to start the fire small, and making it bigger.

Fig. 3.4.2 Burn Animation Artboard #2

In total, I have 28 artboards. To make it smooth, I only change little by little in each frame.

Final Animated Type Expression

Fig. 3.4.3 Final Animated Type Expression - GIF

> Task 1 - Exercise 2 | Text Formatting

Kerning & Tracking

Fig. 3.5.1 (without kerning & tracking)

Fig. 3.5.2 (with kerning & tracking)

Text Formatting

Fig. 3.5.3 Text Formatting Process

Here, I paid great attention to the leading, kerning, and tracking. I made sure to fix the ragging or rivers that may appear on the text. The most interesting process for me is where I need to check the line length where each line are recommended to have 50-60 characters. Hyphenation and adjustment to the baseline is also taken care of.

Fig. 3.5.4 First trial

Layouts

We then were asked to make 6 layouts with the specification of :

HEAD LINE

Typeface: Bembo Std

Font/s: Bembo Std Bold

Type Size/s: 72 pt

Leading: 36 pt

Paragraph spacing: 0

BODY

Typeface: Bembo Std

Font/s: Bembo StdType Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 50-60

Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

Fig. 3.5.5 Layouts 1-3

Fig. 3.5.6 Layouts 4-6

FINAL TEXT FORMATING LAYOUT

Fig. 3.5.7 Final text format layout without grid (JPEG)

Fig. 3.5.8 Final Text format layout without grid (PDF)

Fig. 3.5.7 Final Text Format Layout with Grid (JPEG)

Fig. 3.5.10 Final Text Format Layout with Grid (PDF)

FEEDBACK

WEEK 1

General Feedback - Introduction to Typograph and setting up our blog. At the end we have to vote for the 4 words we are going to do as our assignment, it settled with "burn", "grow", "melt", and "fade"

WEEK 2

General Feedback - An introduction to Adobe Illustrator's tools, file, tabs, control panel, and shortcuts. Mr. Max then reviews the sketches and got some feedbacks. All of my sketches were approved.

Specific Feedback - Mr. Max like the ice cube melting idea, but asked me to make some changes to make in more readable. And this also got approved in the same meeting.

WEEK 3

General Feedback - Digitalization begins and I had some trouble with the technicalities and asked Mr. Max to help me.

Specific Feedback - Mr. Max suggested to use the perspective tool for the "melt" instead of pulling the anchors one by one.

WEEK 4

General Feedback - Finished digital type expression and I start on my animation. In class, Mr. Max taught us an introduction to Adobe Photoshop to help us with or animation process.

Specific Feedback - Gave me some insights to my "grow" type expression to make the 'w' longer.

WEEK 5

General Feedback - Started on exercise 2 (Text Formatting), and using InDesign for the first time, but Mr. Max guided us trough the process. Learnt about kerning, tracking, and other minor mistakes that many people may not notice.

Specific Feedback - Asked Mr. Max about my typeface final animation, and Mr. Max said he likes it.

REFLECTIONS

Experience - To be frank, when i read the modules of BDCM, I was least interested in Typography (sorry sir :'). However, during this course, I genuinely enjoyed it very much!

At first it was frustrating as I have very little to no experience in the programs (Adobe Illust. ,Photoshop, Indesign). However with many trials and errors and with the help of the teachers (Mr. Max & Mr. Vinod), I am surprised of how much I have learn in the past few weeks. I get to learn new tools and shortcuts in the program. Additionally, the sketching and brainstorming part of each exercise really opened my mind regarding typography.

Observations - This module gives out very clear instruction and criteria for every assignment, which I love. At the first class, Mr. Max was very welcoming and understands that some of the students do not have any experience of the program. Therefore, he guides us at every start of the lecture how to properly do our work for us to get good grades.

I like the part where we go to Mr. Max to get feedbacks to our sketches, he stated clear and very helpful feedbacks. I get to see so many talents among my peers as well which was very fun to look at the different styles of each of them.

Findings - All in all, Typography is how we express our ideas with the manipulation and design of the words, letters, and layouts. Mr. Vinod's videos enlighten me with the history, and the little details in typography that makes a huge difference, and where most people will not notice.

FURTHER READING

Fig. Typographic System by Kimberly Elam

Typographic System by Kimberly Elam

4. Random System (68-76)

Introduction

The random system involved elements that are arranged without a fixed aim, pattern, direction, rule, method or purpose. This system often started by scattering elements in the compositional field with free abandon. However, the alignments and composition may feel intentional. And surprisingly, the randomness of the placements often makes a dynamic and spontaneous outcome, that is visually interesting but a little bit hard to read.

Random traits - even though there are no rules for this system, the goal of the experiment is to achieve a visually pleasing result with an experiment. Random elements are often:

overlapped
cropped
angled
textured
not horizontal
not aligned
not patterned

Fig. Random Traits

The Ba-Tsu 1994, there are no alignments and the visual relationship that can be seen are disrupted. The individual letter form moves and tilts randomly in this piece.

" I follow the instincts of my senses or my imagination" quote Makoto Saito. He defines tradition by approaching each project with fresh artistic expression.

Fig. Ba-Tsu 1994, Makoto Saito

Thumbnail Variations

The direction indicated a sense of order and intention. Multiple angles indicated a sense of randomness and the more dramatic and varied the angles, the stronger the random sense is.

Fig. Initial Phase

Initial Phase - designers discover that leaving the line of text on a horizonal base line or only tilting it slightly does not fully communicate randomness.

Fig, Intermediate Phase

Intermediate Phase - the angles become more dramatic as the designer grows more comfortable with overlapping lines, this can reduces legibility.

Fig. Advanced Phase

Advanced Phase - designer pushes the sense of randomness by using repetition, breaking the lines to individual words, and even to compose of individual characters.

Fig. Thumbnail Variations

Random systems

Type only

Fig. Matt Greiner

With the random system composition, readability of the message are often weakened. Which does not go well with the utility as a method of communication. The aim of working with the random system is experimentation, and during the process there are differing levels of readability. The smaller composition are early, more legible works and the larger composition are later, less legible works.

Nonobjective Elements

Fig. Melissa Pena

Fig. Jon Vautour

Through diversity objects and shape can enhance the random composition. At times, a nonobjective element can modify a word or line and improve communication in a chaotic environment.

Repetition

Fig. Chad Sawyer (top), Wendy Ellen Gingerich (bottom)

Repetition is one of the random traits. Excessive repetition is to create an interesting textural composition may leads to loss of communication. Another strategy that preserves communication, is to employ in the composition opposite on the bottom, is the enlarged repetition of the message, also can enhance with color change or with the help of uppercase text.

Search This Blog

Feilycia Joy Kurniawan (0373400)

Typography | Task 1: Exercises

Comments

Post a Comment

Popular Posts

Advanced Typography: Task 1 Exercise

Advanced Typography | Task 3 : Type Exploration and Application