Typography Task 1
23.09.2024 - 28.10.2024 (Week 1 - 6)
Eric Chang / 0378298 / Bachelor of Design In Creative Media
Typography
Task 1
hr here
Table Of Contents:
1. Lectures
2. Instructions
3. Process Work
1. Lectures
Typo_1_Development
The pre-recorded lecture discusses the history of typography over 500 years,
and also mentioning on the evolution of letter forms, tools, and
materials. Mr. Vinod encourages us to explore typography's rich history
and to consider how design choices influence communication.
Phoenician to Roman:
Originally, writing involved scratching into wet clay with a sharpened
stick or chiseling into stone. For nearly 2000 years, uppercase letterforms
were the only ones used, and they evolved from these primitive tools and
materials. At their core, uppercase forms are straightforward combinations
of straight lines and parts of circles, as the early tools required such
simplicity.
After that writing was changed by the Greeks. The Greeks created a writing style known as "boustrophedon" (meaning "as the ox ploughs"), in which lines of text alternated reading from right to left and then left to right, in contrast to the Phoenicians and other Semitic peoples who wrote from right to left. As the reading direction shifted, this also resulted in the letterforms' orientation altering.
Hand Script (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 the finish of the main
strokes. The variety of stroke width was achieved by the reed pen held at an
angle of approximately 60° off the perpendicular.
Blackletter to Gutenberg's Type:
Gutenberg's skills included engineering, metalsmithing, and chemistry. Using
these skills, he created pages that mimicked the work of scribes, specifically
the Blackletter style of northern Europe. His type mold required a different
brass matrix, or negative impression, for each letterform.
Text Type Classification:
- 1450 Black Letter: The earliest Printing type, it forms were based upon the hand-copying styles that were used in northern Europe. The examples are Cloister Black and Goudy Text.
- 1475 Oldstyle: Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline miniscule) 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: In the 1500s, italic typefaces emerged, reflecting contemporary Italian handwriting. They were compact and close-set, allowing more words per page. Initially a separate class, italics soon complemented roman forms, and since the 16th century, almost all text typefaces have included italic versions.
- 1550 Script: Originally an attempt to mimic engraved calligraphic forms, this type class isn't ideal for long texts but is popular for shorter uses, ranging from formal to contemporary styles.
- 1750 Transitional: Refinement of old-style forms, this style was achieved in part because of advances in casting and printing.
- 1775 Modern: This style evolved from old-style letterforms with unbracketed serifs and extreme stroke contrast. English versions, known as Scotch Romans, are similar to transitional forms.
- 1825 Square Serif: Initially, heavily bracketed serifs with minimal variation in stroke thickness were created to meet advertising needs in commercial printing. As they evolved, the brackets were eventually removed.
- 1990 Sans Serif: The most recent development this style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets
Typo_3_Text_P1:
Text/Tracking: Kerning and Letterspacing
The term 'kerning' means the automatic adjustment of space between letters,
however it is often mistaken as 'letterspacing'. letterspacing is adding space
between the letters, and adding or removing a space in a word/sentence is
called 'tracking'.
Difference Between Normal Tracking, Loose Tracking and tight tracking:
Text / Formatting Text:
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.
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 material that is
non-pictorial by nature.
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. It is achieved by expanding or reducing spaces between words and,
sometimes, between letters.
Leading and Line Length:
Type Size: Big Enough to be read at arms length, just like reading a
book in your lap.
Leading: A text that's too tight might encourages
vertical eye movement and may cause a reader to loose their place,
however a Type that's set too loose might create striped patterns which
distract the reader from the material at hand.
Line Length: A Shorter line makes less reading; and longer will need
more. So a good rule of thumb is to keep the line length between 55-65
characters. A long line or a short lines lengths might impairs reading.
Typo_4_Text_Part 2:
Indicating Paragraphs:
We can use pilcrow or line space (leading) to indicate paragraph
|
|
Line Space Vs Leading |
Windows and Orphans:
In traditional typesetting , there are two unpardonable mistake that's widows
and orphans.
Windows: A widow is a short line of type left alone at the end of a
column of text.
Orphans: An orphan is a short line of type left alone at the start of a
new column.
Typo_2_Basic:
Describing Letterforms:
Typography has a lot of new technical terms over the past 500 years, primarily
describing specific parts of letterforms. By Understanding the components of a
letterform makes identifying particular typefaces much easier.
Baseline: The imaginary line at the visual base of the letterforms.
Median: The imaginary line defining the x-height of letterform
X-height: The height in any typeface of the lowercase ‘x’.
Small Capitals are uppercase letterforms drawn to the x-height of the typeface. Small Caps are
primarily found in serif fonts as part of what is often called expert
set.
Uppercase Numerals or lining figures, is numerals which are the same height
as uppercase letters and are all set to the same kerning width. They are
most successfully used with tabular material or in any situation that calls
for uppercase letters.
Lowercase Numerals: Also known as old-style figures or text figures, these
numerals are set to x-height with ascenders and descenders. They are best
used whenever you would use upper and lowercase letterforms. Lowercase
numerals are far less common in sans serif
typefaces than in serif.
Ornaments: Ornaments are used as flourishes in invitations or certificates
and are usually provided as a font in a larger typeface family. Only a few
classical typefaces contains ornamentals fonts as part of the entire
typeface family (Adobe Caslon Pro).
Once We can identify the part of a letterforms we can apply what we know
to identify different type-faces. Some combinations of these styles might
be found within one type family.
Roman: The letterform is called roman because the uppercase forms
are derived from inscriptions of Roman Monuments, A Slightly lighter stroke
in romans is known as "Book"
Italic: This style is named for fifteen century Italian handwriting on
which the forms are based, Oblique conversely are based on roman form of
typeface.
Typo_5_Understanding
Letters:
By comparing the lowercase "a" of two seemingly identical sans-serif
typefaces, Helvetica and Univers, We can see how easy it is to observe how
complicated each individual letterform is. There is a noticeable difference
in character between the letterforms when you compare how the stems finish
and how the bowls meet the stems.
Maintaining X-Height
The size of lowercase letters is usually referred to as the x-height. Curved
strokes, such as those in "s," must, however, extend either below the
baseline or slightly above the median in order to seem the same size as
adjacent vertical and horizontal strokes.
Contrast
The basic principles of Graphic Design apply directly to typography.
The following are some examples of contrast-the most powerful dynamic in
design—as applied to type, based on a format devised by Rudi
Ruegg.
The simple contrasts produces numerous variations:
small+organic/large+machined; small+dark/ large light.
2. Instructions
Research & Sketches :
The four words that were picked for my class is melt,grow,fade and burn. after
the word is decided i immediately come up with a few ideas for my sketches,
the first word that i managed to find a reference to is 'BURN'. Below are my
Reference image and my final & improved sketches.
.jpg)
|
|
Final Improved Sketch |
The reason why my sketches are simple, is because i love something that's
simple, because it makes us easy to remember our design. that's why i decided
to put the flames on the word instead of in the back of the word. Below are
more sketches for this word.
|
|
First Sketches |
|
| Second Sketches |
The image above is my first and second sketches, i didn't use the 2 sketches
above because the 2 sketch above didn't represent the word "burn" nicely. So i
decided to create 1 more
|
| Final unimproved sketch |
This is the final sketch that i made, as you might aware the sketch above is
the sketch that i decided to use, however Mr. Max told me that i could improve
this one by just coloring the word. So that's exactly what i did. The results
is on the above (Final Improved Sketch).
The next word that i decided to create a sketch is 'Grow' because grow is very
simple word, its not very hard to find some reference image. however for this
word i decided not to use any reference image, and decided that i will draw a
sketch using my imagination only. and below are some sketches that i made.
Initially i wanted to use between the 2 design from the above, however i think
that those 2 sketches doesn't really represent grow very much, the first
sketches are does describe the word 'Grow' quite nicely, however Mr. Max told
me that it was a very common design.
So i decided to create another sketch
The sketch above is actually a good one, however i didn't pick this one simply
because the design is more compatible if the word that we pick is "Rise" and
not "Grow". So in the end i decided to create
1 more sketch.
|
| Final Sketch for "Grow" |
the bigger font on the 'O' represent the meaning of the word "Grow". By making
the design very simple, this would enable everyone to memorize the design
easily.
The Next word that i decided to do some research is "MELT". For this word i
found it easier to find some reference on the internet when compared to
"BURN". Below are my reference image.
|
| Reference Image for "Melt" |
For this word there are a lot of reference that i can find on the internet,
however not every design that i saw on the internet represent the meaning on
the word itself. so i decided to create something similar to the image
above. i think that the design above represent the word nicely, however the
font that the creator used isn't capitalized and that bother me slightly.
here is my sketches for the word.
At first i wanted to use the design above because I'm planning to use a
dripping effect on my final design (that's why it's arranged vertically).
however i quickly realized that the design above is not really nice. because
first the font that i create is skinny, making it harder to read from a
distance, secondly the way that i arrange the word (up to down) makes it
even harder to read. So i decided to create another sketch.
The image above is my second sketch, it's easier to read compared to
my first one, however it is still not represent the word nicely. because the
font itself is skinny you can't really tell the dripping effect.
The image above is my final sketches for the word "MELT". it fixed the issue
from my previous sketches, first the font is bold making it easier to see
the dripping effect, and secondly the word is now arranged from Left to
right instead of before (top to bottom or vertically). making it even easier
to read for a small group of people who might have disability. And below are
the unused sketch for this word.
|
| Unused Sketch for "Melt" |
The reason i didn't use the (unused) sketch is because the effect is not
really noticeable, in other word i didn't represent the word "Melt" as i
would like it to.
Finally the final word of this task "Fade". for this word it is not really
easy to find the reference on the internet, because even if there are some,
90% of the time it does not represent the word very nicely or sometimes it
does not align with what i wanted. So for this word here are the
reference that i found,
And my sketches for this word.
|
| Final Sketch for "Fade" |
At first i put the blur effect only on the "A" and "D", however Mr. Max
quickly suggested that i should put the blur effect on all the character.
Once again below are my unused sketches.
|
| First Sketch for "Fade" |
|
| Second Sketch for "Fade" |
|
| Third Sketch for "Fade" |
The reason i didn't use the first and second sketch is because i think that
the word is kind of hard to read. the third sketch is not used because it
didn't represent the word nicely (Needs more blur).
Digitization
Up next is putting all the sketches above on adobe illustrator, This
progress is actually pretty quick for me, since Mr. Max did a great job at
explaining the basics of adobe illustrator. So Below are my digitized work.
PDF File:
As you may have observed, for the word Fade my finalized version is
different from my initial idea, this is because when i was creating the
digitized version for it, suddenly i got a better design for it. And I think
that the finalized version is so much better at representing the word
"Fade".
Animation
This is the last part for the word expression exercise, in this part Mr. Max
told us to animate our finalized word, he told us that we are required to
pick 1 of our word to animate, at first i decided to animate the word "Melt"
because it was the easiest. However at the time i thought that i could do
more, so in the end i decided to animate 3 out of 4 word. The word that i
choose is "Melt", "Grow", and "Fade". Below are the finalized animation of
the word that i picked.
|
| Fade Animation |
|
| Grow Animation |
|
|
Melt Animation |
Text Formatting
For the next exercise, Mr. Max wants us to use InDesign to write our own
names but using the 10 different fonts that was given to us in the first
week of the typography class. This exercise is actually kind of fun, because
it gives us a chance to view the different fonts that was given to us in a
bigger size.
This exercise also teaches us about tracking and kerning.
Below are the results for the first exercise on Adobe InDesign:
And Below Are the PDF file:
Next Up Mr. Max gave us some text and ask us to create 6 different design,
and he will be picking 1 out of the 6 design. For this one there's not a lot
of reference that i use, I just played around and after a few hours i came
up with the 6 design that Mr. Max asked.
|
| Design 1 |
|
| Design 2 |
|
| Design 3 |
|
| Design 4 |
|
| Design 5 |
|
| Design 6 |
Out of the 6 Design above Mr. Max picked the last one (Design 6), This
doesn't surprise me since personally i think that Design 6, has the simplest
design while still being different compared to the others, Below are the Pdf
file for design 6.
And Below Are the PDF with Gridlines:
Below Are the statistics for the final work:
HEAD
Font/s: Bembo Std
Type Size/s: 62 pt
Leading: 11 pt
Paragraph spacing: 0
BODY
Font/s: Bembo Std
Type 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
Self Reflection:
After Doing this task i learned that, creating a typography animation wasn't
that hard. As long as you're willing to put your time into it.
Feedback:
Week 1: Mr. Max introduce us to Adobe illustrator, He teaches us the basic
tools and shortcuts that's commonly used in Adobe illustrator.
Week 2: In Week 2, Mr. Max begins to check on the sketches that i made. He
said that I can use my sketches for the word "Burn", "Grow" and "Melt".
However on this week i still haven't done the sketches for the word "Fade".
Week 3: On this week i finally got approval for my last sketches for the
word "Fade". So on this week i begin putting the sketches inside the
illustrator.
Week 4: I Showed all my digitized version to Mr. Max, He said that all my
digitized version is acceptable. however on the last second i decided to
change the digitized version for the word "Fade", i asked Mr. Max if its
okay. He said that it is okay.
Week 5: On this week, i finally animated all my Typography expression. and i
showed all my word to Mr. Max, he made some adjustment to my animation on
the word "Fade". he said that in the end of my animation he suggested that i
make the word disappeared completely to better express the meaning of the
word. On this week, Mr. max also teaches us how to use Adobe InDesign for
our next exercise. He asks us to try and write our name on the 10 different
font.
Week 6: This is the last week for Task 1, Mr. Max says that he likes the
layout that i created for the latest exercise, He picked the Design 6 and
told me to make some adjustment, after that i show it again to Mr. Max and
he made some minor adjustment to the Heading so it looks more symmetrical.
Further Reading:
This book talks about the basic of Typography, This book helps us understand
the basic of typography. Such as how to use Typography effectively in
design. This book also teaches about font, Font type such As Serif, Sans
Serif and Script.
This book also cover things such as, Font Styles weights and families. In
this book i learned about why choosing the right font type could help with
readability. Important things on typography such as Kerning,Tracking
and line spacing are also mentioned in this book.
Comments
Post a Comment