Typography - Task 1 : Exercises
23/09/2024- 21/10/2024 (week 1 - week 5)
Typography / Bachelor of Design (Hons) in Creative Media / Taylors University
Task 1 : Exercise 1 & 2
Lecture 1 : Typo_0_Introductions
- typeface is the name of the specific collections of fonts
- fonts are individual writing style that has different weight within the type face. for example for the typeface "Avenir", the fonts are accompanied by different weight and style like black, book, oblique, light, heavy, condensed, italic, bold, and many more.
Lecture 2 : Typo_1_Development
|
|
| fig.1.1. Phoenician letter evolution |
|
| fig.1.2. Baustrophedon |
- Square Capitals : they uses reed pen in the 60° angle that creates different width in some strokes that makes it appear thinner or thicker.
- Compressed ver. Square Capitals / Rustic Capitals : written in 30°, easier to write, can be written twice as many words than before but its harder to read since it became smaller in size and thicker in width
- Roman Cursive : The appearance of lowercase letters was the results of writing uppercase letter forms quickly
- Uncial : has the meaning of "twelfth of everything". it's also easier to read because it has lowercase letters (specifically : A, D, E, H, M, U, Q) but there are still combination of uppercase letter.
- Half-Uncial : became the mark of the beginning creations of lowercase letterform after 2000 years from Phoenician.
- Caroline minuscule : Charlemagne the first unifier of Europe since Romans issued an Edict in 789 to standardize all text. Alcuin of York and Abbot of St Martin of Tours, wrote it in both Uppercase and lowercase that set the standards for calligraphy for a Century.
- Blackletter : the way of writing gives impact on the making of blackletter / texture and it gains popularity in the Northern Europe.
- Gutenberg : Gutenberg who has a skill in Metal smithing, Engineering, and Chemistry creates molds and stamps to make scribes writings. because at that time Religion is an important thing and their bible are written by scribes or monks so that it can be passed on. From this, Gutenberg creates a bigger amount of book copies than the monks could.
|
| fig.1.3. Hand script from 3th-10th Century |
- 1450 Blackletter : based on the hand copying styles that were used for books in northern Europe
- 1475 Old style : based upon lowercase form used by Italian Humanist Scholars and the lowercase are from inscribed roman ruins
- 1500 Italic : used to be their own typeface but at the end became a part of roman forms
- 1550 Script : attempt to replicate engraved calligraphic forms. it's form could be formal and traditional to casual and temporary
- 1750 Transitional : advanced casting and printing that It doesn't follow the writing system anymore
- 1775 Modern : further rationalization of old style letter forms. the contrast of thick and thin line is extreme
- 1825 Square Sherif : originally bracketed sherif. mostly needed for heavy type commercial printing
- 1900 Sans Sherif : Eliminated all sherifs together. referred as Grotesque.
|
|
fig.1.4. Type Classifications by Alexander
Lawson |
Lecture 3 : Typo_3_text_P1
Kerning and Letter spacing
- Letter spacing = add space between letters
- Kerning = automatic adjustment of space between letters. Mostly used in making of big headline
- When letter spacing and kerning is done together it’s called tracking.
Text formatting
- Flush left = text align from left to right that mirrors the asymmetrical experience of handwriting
- Centered = imposes symmetry upon the text, assigning equal value and weight to both ends of any line
- Flush right = places emphasis on the end as opposed to its start usually used for extra explanation in text
- Justified = imposes a symmetrical shape on the text
Texture
Different typefaces affect how dark or light the text appears on the page and gives impact on readability too
Leading and line length
- Type size : need to be a large enough size to be read easily
- Leading : space between each line of text
- Line length : appropriate leading for text
Type specimen book
Printed reference to show different typeface various size to get better image when designing
|
| fig.1.5. anatomy of typeface |
Lecture 4 : Typo_4_text _ P2
- Pilcrow = symbol thats used in text for paragraph spacing
- Leading = space between each line of text
- Indicating paragraph =
- could be done with making indent the same size of line spacing of the same point size of your text. Best when the text align is justified
- Widows and orphans
- Widows is a short line of type left alone at the end of a column of text
- Orphan is a short line of type left alone at the start go a new column
- False line break symbol can be used to solve widows
- Highlighting text = can be done with italic, bold, using different typeface, different colors, creating box, quotation marks,
- Headline within text
- A head = indicates a clear break between the topics within a sections
- B head = subordinate of A head, indicate new supporting argument for the topic at hand
- C head = highlights specific facets of materials within B head text
- Cross alignment = subtext next to the body of text
|
| fig.1.6. headline within text |
Typo_2_Basic
|
| fig.1.7. describing letterform sketch |
I did a sketch on what part I understand using my name and a word fish while there are some that are not included,
- Em/en = referring to the uppercase letter “M” width
- Loop = the bowl created in the descender of the lowercase G
- Swash = the flourish that extends the stroke of the letterform
- Terminal = self contained finish of a stroke without a finish
The font
- Small capitals = uppercase letterforms draw to the x-height of the typeface
- Uppercase numerals = numerals are the same height as the uppercase letter
- Lowercase numerals = numerals are set to x-height with ascenders and descenders.
- Italic = the form refer back to Italian cursive handwriting
- Punctuation, Miscellaneous characters = character used for separating ideas, organizing text and providing cues for the reader to understand structure
- Ornaments = used as flourishes in invitations or certificates.
|
| fig.1.8.describing typeface |
Describing typeface
- Roman = derived from inscriptions of Roman Monuments
- Italic = named for 15th century Italian handwriting
- Oblique = conversely are based on roman form typeface
- Boldface = characterized by thicker stroke than Roman form
- Light = lighter stroke than the roman form
Exercise 1 : Type Expression
On the first Typography class, we were given 6 words to draw the expression of. The words that were given are : Pull, Explode, Chop, Rush, Wind, and Tangle. Between six of them, I chose the words : Explode, Chop, Rush, and Tangle. But in the middle of drawing process I decided to draw pull and wind too.
1. Research
during the research, I only decided to browse the word that I want to focus on so here's some picture that I got reference from when I'm doing my sketches. although its not many, I did most of my sketches on my own without looking around so much. but I search for expression of the word thinking maybe I could align the expression with the typography.
fig.2.1. Research and Reference
2. Sketches
fig.2.2. sketches of the expression words. (28/09/24)
the whole drawing process are being drawn using Procreate. although I chose four words. I decided to draw two each of the word I didn't choose cause. I struggle in realizing the sketches in tangle and rush.
3. Digitization
|
|
fig. 2.3.1. first attempt for word Explode (04/10/24) |
What I had in mind on the picture was, the word explode exploded just like the sketches attempt 1 but I feel like its not good enough. I used the C and 3 as a cloud effect and rotate it and attach it to the P and O of the word EXPLODE so it looks like the big explosion, but the font choice for this one is a little bit too bold. So from Bodoni Std type face, I tried using Futura Std. But it still doesn't look like how I expected it to be. So I left it there for a day and tried doing the other word expression. After doing most of them I got back to do the word Explode but I used the Gill Sans Std Shadowed font and it makes it more comic like and I use parentheses as the effect and go creative with the rotation, size and position.
|
|
fig.2.3.2. attempt before final Explode
(04/10/2024~05/10/2024) |
after doing the 1st and 2nd attempt in Explode I decided to do the word Rush. for this type expression, I used the one I got in sketches Rush #4. First I make a circle path, Select it, then used the "Type on path Tool" and typed rush a couple of times. till it goes around and I used i and l as the clock hands.
|
|
Fig 2.3.3. Attempt in making Rush (04/10/24) |
then for the word pull, I type the word in serif std type face and rasterize it, after that I outline it and select some points and pull it to the top and to the bottom. for word Chop, I type it out in uppercase letter, then use a knife tool and randomly slicing it trough any side.
|
| Fig. 2.3.4. attempt in making Pull and Chop (4/10/24) |
Final Type Expressions
%20_%20Type%20Expression_after%20Feedback.jpg)
|
| Fig.2.3.6. Final digitization after feedback - JPEG (07/10/24) |
4. Animation
|
| fig.2.4.1. first animation attempt (07/10/24) |
|
| fig.2.4.2. second animation attempt |
|
| fig.2.4.3. animating process (13/10/24) |
|
| fig.2.4.4. final animation - before feedback. (13/10/24) |
Final Animation
Exercise 2 : Text Formatting
|
| fig.2.5.1. text format practice with kerning (19/10/24) |
|
|
fig.2.5.2. text format practice without kerning
(19/10/24) |
 |
| fig.2.5.3. kerning practice comparison (19/10/24) |
|
| fig.2.5.3. first text format lay out progress (19/10/24) |
|
| fig.2.5.4. text formatting progress screenshot (20/10/24) |
|
| fig.2.5.5. final text formatting layout before feedback (20/10/24) |
I added the credit of the designer who created the picture and done with it. but I feel bored so I made another one just incase. which is the layout under this text. I used the same picture but change the text position, the typeface, and the headline Layout. and I just ended my work there before week 5 comes
|
| fig.2.5.6. second final text formatting before feedback (20/10/24) |
|
| fig.2.5.7. other text format layout with different images (21/10/24) |
FINAL TEXT FORMATTING LAYOUT
|
| fig.2.5.8. Final Text formatting Layout without Grids-JPEG (25/10/24) |
|
| fig.2.5.10. Final Formatting Layout with grids - JPEG (25/10/24) |
Specific Feedback : -
General Feedback :
Mr. Vinod gave us some explanations about this module and what task and activities that we are expecting for the next few weeks. The first task that we got is to set up our portfolio, watch at least 2 lectures from Mr. Vinod ’s Youtube and Start doing sketches on type expressions
Week 2
The feedback that mr. Vinod gave me specifically from the sketches that I've done, among 6 sketches of Explode expression, he like the first one but choice of fonts are important, chop number 2 is good, then for the word expression rush, the 4th sketch is okay but I need to avoid putting to much illustration. Pull number 2 is okay too.
General Feedback :
Mr. Vinod gives us feedback about our sketches. To sum it up, the type expressions in that we draw, we need to decide and think of what type of typeface and font that we are going to use, it can be different weight or different font, not to put too much illustrations or doodle (it can be replaced with other fonts as the drawings), also distortion is okay but not to much to the point that the font main structure is gone. he also ask us to do evaluation on our work using the question he provided in ms. Teams
1. Are the explorations sufficient?
not really, because I didn't do a better or wider research of the typography but rather the action expressions of the word. hence why I used more illustration than the font itself. not only that, most of the students almost have the same idea of the type expression as me.
2. Does the expression match the meaning of the word?
Yes. they do match the meaning of the word.. although there are also some that couldn't express the word correctly because I just draw what I think would do. especially for the word rush and pull.
3. On a scale of 1–5, how strong is the idea?
I believe on the scale of 1-5 my idea is 4. Some of the design that I focus on more actually not similar with other student's ideas. while some are similar but think some of the stuff that I sketched are pretty different from what most of them come up with.
4. How can the work be improved?
I need to do more research and understand the Adobe Illustrator tool better so I can get more creative about the type expressions.
Week 3
Specific Feedback :
For today’s class, Mr Vinod gave me a lil bit feedback on my type expression. For the word Rush, he said that it’s too crowded and there’s no need for shadows. The i and l as the clock hands can be make in Futura Std Light. Then for the Chop word he said the one I make starting to not look like the word has been chopped but crushed. It needs to be minimized. Then for explode he wants it to have more clouds using repeated words. So there would be better image of what I’m trying to implement there.
General Feedback
overall, its good but needs more fixing. dont need tout too much expression, one expression is enough.
Questions-digitization
not really. I couldn't find a fitting font for the word expression that I sketched the most and after the feedback from mr Vinod, I found my self not thinking further about the word potential that I make and some of them are also too much
yes
3b. Is the composition engaging? Impactful?
some of them are impactful but some are not. and I found out when Mr. Vinod gave me his feedback
more research and experiment. I also could've reflected on it in a day so I could observe and evaluate it before the day
Week 4
Specific feedback :
Mr. Vinod said that my pull animation can start at the top and I could make it bounce down gradually.
General Feedback :
Mr. Vinod gave us some feedback about our final type expression digitization and animation. He gave us new exercise which is the text formatting, gave us some short explanations about text formatting, and what needs to be done for this week
Week 5
Specific feedback :
Mine specifically he said that I should not use text images as the elements and I could remove the lines below cause it's unnecessary. Between the two text format that I make, he choses the second one and ask me to change the images
Mr. Vinod gave us feedback about our work, the image have to be black and white because the thing we need and not much text, Headline doesn’t need different treatments, Too much image is not necessary, Headline size needs to be considered with the document size, using bold affects readability, Gutter can be smaller 10-5 mm
Experience
during these exercises I experience new things like receiving feedbacks that are sometimes different from what I think. I feel guided that there's someone that could give me feedback because sometimes I couldn't figure out whats wrong with my work until someone comments on them. I also enjoy expressing my creativity when making the type expression word. moreover, focusing on typography first in design really gives me something fresh as I have been drawing posters and characters during my high school year.
Observations
during feedback sessions, I see some of the other students artwork and it gives me wider vision of people thoughts. when I see the past students work and they said that they found that their work are somewhat similar with others, contrast to that, I see that other students work have their own personality and creativity. Even just one type expression word can make different type of visuals from different people.
Findings
I found that typography is something that I really need to work on because when I watch some of the lectures, some phrase are still new to me. when I was applying for this program, I thought that typography is just going to be a side subject, but after learning it for 5 weeks so far, I realize that typography is an important subject to study as a designer.
|
| fig.5.1. Thinking With Type by Ellen Lupton (2004) |
- A grid system helps organize elements on a page, creating a structured layout. It enhances readability and visual appeal when aligning text and images.
- Using contrast in typography—through colors, sizes, and weights—can make text stand out and improve legibility. It’s essential to ensure that the text is accessible.
|
|
fig.5.2. Typographic design: Form and communication (2015) |
it also describes different styles of type, like serif and sans-serif, and explains why they are important in different cultures and periods, how technology has influenced typography, especially with the rise of computers and digital fonts.
Overall, the chapter shows that typography keeps evolving to help us communicate better in different ways, whether in print or online.
 |
| fig.5.3. A type primer by John Kane (2002) |
Making sentences, finding sense
explains about text alignments that could be used in making a paragraph (flush left, flush right, centered, justified, etc.) the choice of typeface that are used could depend on the context of the text the tone of author voice, the timeline the text was written, and all of them could affect the quality of the text. or theres a method where we could break up the text to make the sentences more expressive. Bolding the letters, and manipulate the character size is also one way to make the text more expressive
Comments
Post a Comment