Typography Task 1 / Exercises 1&2
Week 1 - Week 5
Marcus Leong Ka Shing / 0363643
Typography / BDCM / Taylors Uni
Task 1
LECTURES
Week 1: Typo_1_Development
The Phoenician letterforms (Fig 1.1) are important as it has the middle ground for both Early Arabic letterforms and the Modern Latin letterforms. Most of these letterforms can be derived from Phoenician.
Etruscan carvers painted the letterforms before carving on the marble stones. Hence the weighted and broadening of strokes at the start and the end of each letter.
Hand scripts from the 3rd to 10th Century C.E.:
- Rustic Capitals (Late 3rd to Mid 4th Century C.E.) were compressed square capitals that could fit twice the amount of words on a sheet of parchment. Took less time to write and was faster and easier to do but harder to read.
- Roman Cursive (4th Century C.E.) were used for everyday transactions. It is simplified for speed and was the beginning of the lowercase letterform.
- Uncials (4th to 5th Century C.E.) included some aspects of Roman Cursive. It is more accurate to think of Uncials as small letters. It is more readable in smaller sizes compared to Rustic Capitals.
- Half Uncials (C. 500) are the formal beginning of lowercase letterforms replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.
- Caloline Miniscule (C.925). Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. Alcuin of York, the abbot of St. Martin of Tours, received the task from him. The manuscripts were rewritten by the monks utilising capitalization, punctuation, majuscules (uppercase), and minuscules, which set the standard for calligraphy for a century.
- Blackletter Textura (C.1300). Regional modifications to Alcuin's writing appeared when Charlemagne's empire fell apart. A condensed, significantly vertical letterform known as Blackletter or textura became popular throughout northern Europe. A rounder, more open hand known as a "rotunda" became popular in the south. Alcuin's minuscule is the basis for the humanistic script used in Italy.
2. Formatting Text
5. Type Specimen Book
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1Vt5_ZBL4PZpAi_UhRrYaHonXdQpSgUIg/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1 - Digitization of Type
I continued with the digitalizing part after sketching out my thoughts and reflecting on Mr. Vinod's criticisms. I decided to refrain from distortion of texts and chose something simple, but expresses it meaning still.
The word Pause was just a very simple design that highlighted the
symbol. I just had the U cut up to create the pause
button.
Exercise 1 - Type Expression Animation
I chose the word Split to animate among the 4 words. I took Mr
Vinod's advice where he said the contrast between 2 fonts are
already expressing the meaning of split. Therefore a further
splitting up of the letterforms are not required. To prepare for
the animation, I made the letterforms change its font one by one
and frame by frame. Then, I exported it into photoshop to create
gifs.
After much consideration, I decided to go with design 1 but refine
it better.
HEAD
FEEDBACK
Week 2
Specific Feedback: Too much distortion in sketches.
General Feedback: Sketches can be messy, then shortlist a few ideas and resketch clearly and neatly. If idea does not work in second resketch, rethink idea. Does the expression match the meaning of the word? On a scale of 1–5, how strong is the idea? How can the work be improved?
Week 3 (PH)
Week 4
Specific Feedback: No need for splitting apart the word. Use
font type duality as a symbol of flip, either one by one or
few characters at once. Therefore it shows a contrasting
effect.
General Feedback: Extending the last frame by a few
seconds and add more frames to prevent a jerky feel and to
give an overall smoother animation.
Week 5
Specific Feedback: The layout's angular elements can
clutter the text and make it hard to read. Increasing margin
width creates more white space and improves visual balance.
Images must be relevant and support the text's message.
Subheadings don't need to be italicized, causing visual noise
and distracting from the main message. Leaving excessive white
space creates an unsatisfying, imbalanced impression.
General Feedback: To prevent rivers from appearing in the
text, it's best to avoid excessive hyphenations and minimize
significant variations in font weight. A dynamic layout can
enhance the visual appeal of the text, but be careful not to
use bold or italics for the entire body of text. Instead,
reserve bold for headings and use italics for emphasis.
REFLECTION
Experience
Through this exercise, I have gained a solid understanding of the fundamentals of typography. Although I faced some challenges during the sketching phase, such as being restricted to using only 10 typefaces and lacking graphical elements, I was able to generate unique ideas. The text formatting exercise proved to be more challenging than I initially anticipated. In particular, I found it frustrating to figure out the baseline grid because my paragraph spacing was not accurate. Overall I believe this exercise was an effective means of teaching us how to work within constraints and explore creative ways of expressing words while arranging and formatting typefaces.
Observation
During the weekly check-ins with Mr. Vinod, I had the opportunity to view the work of my classmates and was able to observe the diverse outcomes. It was interesting to see how each individual approached the task, expressing the same words or text in unique and varied ways. I also learned that typography is linked with other design elements such as alignment, the use of letters for shapes/images, movement, scale, contrast, and value. By incorporating these elements, designers can create compelling and impactful compositions that effectively communicate their intended message.
Findings
One new finding that I discovered is the importance of typography in creating a cohesive and effective design. Through Task 1, I learned how typography can impact the readability and overall aesthetic of a design. I also gained an appreciation for the technical aspects of typography, such as kerning and leading, which can greatly impact the legibility and visual appeal of text. Additionally, I discovered the value of receiving feedback and critiques on my work, as it allowed me to identify areas for improvement. Overall, Task 1 has taught me the importance of attention to detail and the technical aspects of typography in creating impactful designs.
The Graphic Design Idea Book: Inspiration from 50 Masters by Steven Heller, 2016
Week 1
"Good design is not just about aesthetics; it's about function. It's about finding solutions to problems and creating designs that work. A good designer is always thinking about how the design will be used, and how it will affect the end user." page 9, paragraph 1
Week 2
Week 5
Marcus Leong Ka Shing / 0363643
Typography / BDCM / Taylors Uni
Task 1
LECTURES
Week 1: Typo_1_Development
Early letterform Development: Phoenician to Roman
Materials and tools were prominent in the way letterforms were sketched.
Different tools and materials meant different methods of achieving those
letterforms.
.png)
|
| Fig 1.1 |
The Phoenician letterforms (Fig 1.1) are important as it has the middle ground for both Early Arabic letterforms and the Modern Latin letterforms. Most of these letterforms can be derived from Phoenician.
The Greeks then changed the way of reading and the direction of writing. This
style is known as 'Boustrophedon’ (how the ox ploughs).
Greeks and Phoenicians also did not use punctuations, they just read
straight from right to left, and left to right (Fig 1.2).
.png)
|
| Fig 1.2 |
Etruscan carvers painted the letterforms before carving on the marble stones. Hence the weighted and broadening of strokes at the start and the end of each letter.
|
| Fig 1.3 |
Hand scripts from the 3rd to 10th Century C.E.:
- Square Capitals (4th - 5th Century C.E. ) had serifs added to the
finish of the letterforms.
.png)
|
| Fig 1.4 Square Capitals |
- Rustic Capitals (Late 3rd to Mid 4th Century C.E.) were compressed square capitals that could fit twice the amount of words on a sheet of parchment. Took less time to write and was faster and easier to do but harder to read.
.png)
|
| Fig 1.5 Rustic Capitals |
- Roman Cursive (4th Century C.E.) were used for everyday transactions. It is simplified for speed and was the beginning of the lowercase letterform.
.png)
|
| Fig 1.6 Roman Cursive |
- Uncials (4th to 5th Century C.E.) included some aspects of Roman Cursive. It is more accurate to think of Uncials as small letters. It is more readable in smaller sizes compared to Rustic Capitals.
.png)
|
| Fig 1.7 Uncials |
- Half Uncials (C. 500) are the formal beginning of lowercase letterforms replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.
.png)
|
|
Fig 1.8 Half Uncials |
- Caloline Miniscule (C.925). Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. Alcuin of York, the abbot of St. Martin of Tours, received the task from him. The manuscripts were rewritten by the monks utilising capitalization, punctuation, majuscules (uppercase), and minuscules, which set the standard for calligraphy for a century.
.png)
|
| Fig 1.9 Caloline Miniscule |
- Blackletter Textura (C.1300). Regional modifications to Alcuin's writing appeared when Charlemagne's empire fell apart. A condensed, significantly vertical letterform known as Blackletter or textura became popular throughout northern Europe. A rounder, more open hand known as a "rotunda" became popular in the south. Alcuin's minuscule is the basis for the humanistic script used in Italy.
|
| Fig 1.10 Blackletter (Textura) |
Typeforms have evolved in reaction to present technological advancements,
commercial needs, and aesthetic trends. Some models remain long after the
cultures that gave their existence them.
1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750
Transitional ⟶ 1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1990 Serif/
Sans Serif
Week 2: Typo_2_Basic
- Baseline: Imaginary baseline of letterforms.
- Median: Imaginary line that defines x-height.
- X height: Height of 'x' letter in any typeface.
- Ascender: Line that projects above the lowercase letterform.
- Descender: Line that projects below the lowercase letterform past the baseline.
.png)
|
| Fig 2.1 |
- Stroke: Lines that define basic letterform.
- Apex/Vertex: Point that joins two diagonal lines e.g. 'V' and 'A'.
- Arm: Short strokes extending out of the stem of a letterform. Either horizontal or diagonal.
- Barb: Half serif finished on curved letterforms.
- Bowl: Rounded form that describes counter. Can be open or closed.
- Bracket: Transition between serif and stem.
- Cross Stroke: Stroke in lowercase 'f'' and 't'.
- Cross Bar: Horizontal stroke that in a letterform that joins two stems together.
- Crotch: The interior space where two strokes meet.
- Ear: Stroke extending out of from the main stem or body of letterform.
- Em/en: Em refers to distance equal to the size of typeface. An en is half the size of Em and usually refers to Em/en spaces and dashes.
- Leg: Short stroke off the stem of the letterform. Either at bottom of stroke or inclined downward.
- Ligature: Character formed by combination of two or more letterforms.
- Spine: S is the best example for spine.
- Stress: There are vertical and diagonal stress. Diagonal stress is based on handwriting
- Small Capitals: Drawn to the typeface's x-height in capital. When many capital letters are used simultaneously, it is highly helpful to avoid visual disruption.
Typefaces:
- Roman - book
- Boldface - thicker stroke than roman form.
- Light - thinner stroke than roman form.
- Condense - variation of Roman in compressed state.
- Extended - variation of Roman but stretched.
- Italics refers to Italian handwriting.
- Oblique is based on Roman form of type face.
Week 3: Typo_3_Text_P1
Text Formatting
1. Kerning and Letterspacing
|
| Fig 2.2 Normal, Loose, Tight Tracking |
Kerning: Auto adjustment of space between letters
Letterspacing: Add space between letters
Tracking: Removal and addition of space in words and sentences
|
| Fig 2.3 Kerning and Letterspacing |
2. Formatting Text
Flush Left: The layout of flush-left text resembles handwriting, with
each line starting at the same point and ending wherever the last word
on the line ends. The spaces between words are consistent, creating an
even gray value throughout the text.
.png)
|
| Fig 2.4 Flush Left |
Flush Right: Text emphasizes the end of the line, which can be useful
for captions or situations where the relationship between text and
image needs a strong orientation to the right.
.png)
|
| Fig 2.5 Flush Right |
Centered Text: Creates symmetry by distributing equal weight and value
to both ends of the line, transforming the text into shapes and adding
a pictorial quality. However, it's important to adjust line breaks to
avoid a jagged appearance.
.png)
|
| Fig 2.6: Centered Text |
Justified Text: creates a symmetrical shape by expanding or reducing
spaces between words and sometimes letters. This can cause rivers of
white space running vertically through the text, so careful attention
to line breaks and hyphenation is necessary to solve this issue.
.png)
|
| Fig 2.7 Justified Text |
3. Texture
Consider using a different typeface if readers can read the font
before the text.
Higher readability results from ascender and descender heights that
are less than x-height.
|
| Fig 2.8 Anatomy of typeface |
4. Leading and Line Length
- Type size: Large enough to view at arm's length
- Leading: Tightly set type causes readers to move their eyes vertically and makes it easy for them to lose attention, whereas loose type produces a stripped pattern that irritates them.
- Line length: Shorter lines require less reading, while longer lines demand more leading.
- Don't go over 55 to 65 characters each line.
Fig 2.9 Leading and Line Length
Examples of typefaces in a variety of sizes are displayed in a type
specimen book. In order to accurately reference type, type size,
type leading, type line length, etc., it serves as a reference.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1Vt5_ZBL4PZpAi_UhRrYaHonXdQpSgUIg/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1 - Type Expression
A few action words were short listed to be sketched and express.
I chose destroy, split, love and pause. The task was to sketch 3
different expressions per word. I got my ideas and inspiration
from Pinterest. After consulting Mr Vinod, I ended up with the
selection of #1 Split, #2 Pause, #3 Love and a whole new design
for the word destroy.
|
|
Fig 1.1 Sketch Expressions |
Exercise 1 - Digitization of Type
I continued with the digitalizing part after sketching out my thoughts and reflecting on Mr. Vinod's criticisms. I decided to refrain from distortion of texts and chose something simple, but expresses it meaning still.
.png)
|
| Fig 1.2 Split Design Process |
I used two different fonts to create a contrast to express the
word split. I used the knife tool to cut the parts that I wanted
to use and merged them together. To add more expression of the
meaning, I placed it in a way where it is split open from the S
and slowly closes and merges at the end.
.png)
|
|
I wanted to use the letter D to be the rolling stone to
destroy the word. I used the knife tool to cut up many letters
to form clean breaks all over. The letter Y was also used to
create crack like fractures all over. |
.png)
|
||
|
Mr Vinod liked the idea of using counter space to create the
letter E. I imported some heart symbols and grouped them with
a rectangle shape to create it.
.png)
|
|
|
 | |||
|
<iframe src="https://drive.google.com/file/d/1BVdTgJWLi83uxp27wbIrjmCqc6qmDb4j/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 1 - Type Expression Animation
|
|
Fig 1.7 Split Redesign |
|
||
|
Fig 1.8 Frame Selection I loaded the images of the word Split into Photoshop and created a timeline frame. I adjusted the timings and order of frames that would play first. Then I exported it into a GIF.
|
Exercise 2 - Text Formatting
For Exercise 2, we are required to create one final layout that
takes into account many aspects of text formatting, including
kerning, leading, paragraph spacing, alignment, etc. To
practice, we kerned our names using the 10 different fonts
available.
.png)
|
| Fig 2.1 Before Kerning |
.png)
|
| Fig 2.2 Before Kerning |
I started to edit the letterspacing and kerning to make sure I
had an average of 60 characters per line. I then used the
leading and paragraph settings to create a left justified body
text that sits on the baseline to achieve cross alignment.
.png)
|
| Fig 2.3 Text Formatting |
.png)
|
| Fig 2.4 Text Kerning and Letterspacing |
After completion of formatting the text to its requirements, I
decided to create a few ideas of layouts.
|
|
Fig 2.5 Layouts |
|
|
Fig 2.6 Final Layout |
<iframe
src="https://drive.google.com/file/d/11S_e5J72nDTuq_-Pyl0K7jSd2R-QmSJS/preview"
width="640" height="480" allow="autoplay"></iframe>
 |
| Fig 2.7 Final layout with Gridlines |
<iframe
src="https://drive.google.com/file/d/1oeOjbuENHeUi3xWAUTKeb2wQitaV1LMS/preview"
width="640" height="480" allow="autoplay"></iframe>
HEAD
Font/s: Univers LT Std
Type Size/s: 24 pt
Leading: 11.5 pt
Paragraph spacing: 0pt
BODY
Font/s: Univers LT Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: +-60
Alignment: Left Justified
Margins: 12.7 mm top, 12.7mm left and right, 100mm bottom
Columns: 2
Gutter: 6.35mm
Week 2
General Feedback: Sketches can be messy, then shortlist a few ideas and resketch clearly and neatly. If idea does not work in second resketch, rethink idea. Does the expression match the meaning of the word? On a scale of 1–5, how strong is the idea? How can the work be improved?
Week 3 (PH)
Experience
Through this exercise, I have gained a solid understanding of the fundamentals of typography. Although I faced some challenges during the sketching phase, such as being restricted to using only 10 typefaces and lacking graphical elements, I was able to generate unique ideas. The text formatting exercise proved to be more challenging than I initially anticipated. In particular, I found it frustrating to figure out the baseline grid because my paragraph spacing was not accurate. Overall I believe this exercise was an effective means of teaching us how to work within constraints and explore creative ways of expressing words while arranging and formatting typefaces.
Observation
During the weekly check-ins with Mr. Vinod, I had the opportunity to view the work of my classmates and was able to observe the diverse outcomes. It was interesting to see how each individual approached the task, expressing the same words or text in unique and varied ways. I also learned that typography is linked with other design elements such as alignment, the use of letters for shapes/images, movement, scale, contrast, and value. By incorporating these elements, designers can create compelling and impactful compositions that effectively communicate their intended message.
Findings
One new finding that I discovered is the importance of typography in creating a cohesive and effective design. Through Task 1, I learned how typography can impact the readability and overall aesthetic of a design. I also gained an appreciation for the technical aspects of typography, such as kerning and leading, which can greatly impact the legibility and visual appeal of text. Additionally, I discovered the value of receiving feedback and critiques on my work, as it allowed me to identify areas for improvement. Overall, Task 1 has taught me the importance of attention to detail and the technical aspects of typography in creating impactful designs.
The Graphic Design Idea Book: Inspiration from 50 Masters by Steven Heller, 2016
|
| Fig 2.7 The Graphic Design Idea Book |
Week 1
"Good design is not just about aesthetics; it's about function. It's about finding solutions to problems and creating designs that work. A good designer is always thinking about how the design will be used, and how it will affect the end user." page 9, paragraph 1
Week 2
"Good design is not just about making things look pretty. It's
about creating designs that are functional, effective and
meaningful. A good designer is always thinking about the end
user, and how the design will impact their
experience." page 9, paragraph 1
Week3
"Typography is the backbone of graphic design. It is the foundation upon which all other design elements are built. Choosing the right typeface, size and layout can make all the difference in the success of a design." page 80, paragraph 1
"Typography is the backbone of graphic design. It is the foundation upon which all other design elements are built. Choosing the right typeface, size and layout can make all the difference in the success of a design." page 80, paragraph 1
Week 4
"Simplicity is key. A design that is too complicated or
cluttered can be overwhelming and confusing for the viewer. A
simple, clear design is more effective in communicating a
message or idea." page 97, paragraph 2
"Colour is a powerful tool in graphic design. It can create mood
and emotion, and can be used to convey specific messages. The
designer needs to be aware of the psychological and cultural
connotations of different colours, and use them
appropriately." page 121, paragraph 1
Comments
Post a Comment