Typography /Task 1: Exercises
30/8/2022 - 27/09/2022 /// Week 1 - Week 5
Osezua Ehizogie Ejodame / 0351565
Typography /Bachelor of Computer
Science (Honours)/Creative Media Design(Minor)/ School of Computer Science
Task
1 Exercises: Exercise 1 (Type Expressions), Exercise 2(Type Formatting)
LECTURES
Week 2:
Typography:
Development /Timeline
Phoenician to Roman
We begin our history lesson with the Phoenician to Roman letter
forms. Their methods would include scratching marks into wet clay tablets or
carving into stone tablets with tools. The tools they used had an affect on
how the writing turned out. Modern Latin and Arabic can be derived from the
Phoenician alphabet.
The Greeks had developed a writing style called 'Boustrophedon'. I found it very interesting that the text was read from left to right and reversed from right to left. Not only was the reading direction reversed, but so were the letters. The Greeks did not use spaces to separate their letters and did not use punctuation. They would then transition to the left to right writing and reading that we see today.
|
|
Boustrophedon reading direction |
Etruscans would draw out the strokes with a paint brush before carving unto their tablets seemingly to avoid making errors.
|
|
Evolution of letter A from Phoenician to Roman |
The information I obtained from Mr Vinod's lecture stated that the research was written in a predominantly western perspective and did not pay much attention to the accomplishments of the Asian continent, which prompted me to conduct my own research after finishing the lecture.
Hand script
Square capitals had slanted tools at 60 degrees to the writing medium,
allowing for thicker and thinner stroke.
Rustic capitals were easier to write and saved on parchment space compared to square capitals but some would fine its downside being the reduced readability.
1: Roman cursive resembling lowercase letters
2: Uncials resembling uppercase and lowercase letters.
3: Half-uncials where lowercase letterforms officially come into play.
After the attempts at standardization new styles of writing appeared depending on where someone stayed, variation was basically inevitable. Among those variations were Blackletter.
Text type classification
1450 Blackletter the earliest printing type
1500 Italics originate from Italian handwriting.
1900 sans serif removed serifs from their letters as the word sans
means "without".
Week 3: Text 1
Kerning and Letterspacing
Kerning is the adjustment of spacing
between letters. Letterspacing involves adding spaces in between the
letters. Tracking is the increment and decrement in space in a
sentence.
Flush left: In the flush left format it resembles real handwriting in the way each line starts on the same point on the left but on the right they stop at different points based o the length of the words.
Centered: It gives the text a shape but it can be more difficult to
read than flush left. Only advisable to be used in small bodies of text.
Flush right: Words end at a common point on the right side of each
sentence, but words can start at irregular points on the left side. We are
accustomed to reading from left to right so this text format is not ideal for
large bodies of text.
Justified: This text format has words starting and ending at common points, to do this spaces between words have to be increased or decreased.
Week 4: Text 2
The type size should be large enough to be read at arms length, for an a4
paper that size usually falls between 8 and 12 pt.
The general rule for
line length is between 50 to 60 characters for each line.
Bodoni is
viewed as the least readable out of the ten typefaces given to us.
Ragging:
Irregularly aligned text on either the left or right hand side.
Margins
are the spaces around the page that contain no text, margin spacing can be
used to give the page a dynamic look.
|
| The Pilcrow used to save space by indicating paragraphs. |
Other ways of indicating paragraphs include Indentation, line spacing and
extended paragraphs.
Widows are typed text that stand alone at the end of a body of text while orphans are lines of typed text standing alone in the beginning of a new column of text. It is good practice to try and reduce the amount of widows and orphans in our work. It's great to reduce them to none at all but when that is avoidable there should not be more than one or two in each paragraph.
When highlighting text we can use methods such as quotation marks, italics, emboldening words or changing selected texts into different colours.
Week 5: Basic
Describing letterforms
X-height: height of the lowercase
'x'. The X height also has a role in determining readability.
Strokes: Lines that make up letters.
Apex: joining point of two diagonal stems.
Arm: Short strokes coming off the stem of a letterform.
Ascenders are parts of the stem of lowercase letters that stretches above the median while Descenders are lowercase letters whose stem stretches below the baseline.
Fonts include uppercase and lowercase letters as well as numerals and punctuation marks.
Small capitals are uppercase letters that are made to fit the x-height.
Uppercase numerals are numerals that have the same height with uppercase letters. They have the same kerning width and are also known as lining figures.
Lowercase numerals are the type of numerals that fit the x-height while also having ascenders and descenders. They are also called Old style figures
Ornaments can be used on invitations and certificates of some kinds. A typeface known to have ornaments is Adobe Caslon Pro.
The uppercase letterforms of Roman are dervied from inscriptions on Roman
monuments and Italics are derived from fifteenth century Italian handwriting.
Fonts can come in italics but most small capitals have only roman.
Boldface letterforms have thicker strokes than roman while Light letterforms have lighter strokes.
Week 5: Understanding
Uppercase letterforms can appear to be symmetrical like the Baskerville font used in the lecture video, but on closer inspection, it actually is not symmetrical but still gives the illusion that it is.
lowercase letterforms like the letter "r" and "s" have their curves slightly above the x-height line.
|
| Contrast |
Week 5: Screen & print
The goal of designers is to create text that can be easily read and that people will want to read.
Common typefaces for pint: Caslon, Garamound, Baskerville. They are said to be elegant and readable even in small font sizes.
Modifications to typefaces on the web can include making the x-height taller, making the letterforms wider, using heavier strokes etc. for the sake of enhancing readability.
Other adjustments can include more open spacing.
Non-print environment: web, e-books, e-readers and mobile devices.
Hyperlinks: They are used to quickly move to a new document or part of a document by clicking on words, phrases or images. They can be found in web pages.
Reading at arms length the text should be at least 12 points (16 pixels).
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1fLIYBN-gL_HT7pE0M2q8hDdshlW9jaFG/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercise 1 - Type Expression
The type expression
exercise involved us choosing 4 among a list of words to create type
expressions from. Among those words were: Distort, Bite, Cozy, Box, Accelerate
and Fragile. We are also given ten typefaces to work with.
1. Sketches
The words I chose were Fragile, Distort, Box and Cozy. I made my sketches using Photoshop.
I enjoyed sketching Distort #1, Box and Cozy #3 the most.
After getting feedback I proceeded to digitize fragile and distort. For distort I decided to continue with #2
2. Digitization Process
|
| Fig. 1.2 Digitization process Week 2 (08/09/2022) |
Distort:
My idea for distort was to use upside down F's to look like T's. I also had the idea of inverting the letter z in a way to look like an S and inverting the letter L in a different typeface to resemble an R but I decided against it as that might be too excessive.
Fragile:
For the Fragile sketch Mr Vinod said it was good. I will
need to figure out how to add the cracking effect to the letters.
At first I tried creating the cracks with a paint brush tool like I did on
Photoshop but the brush size did not work in the same way in illustrator and I
could not find the right brush size to make the cracks. I then decided to use
lowercase letter L with varying thicknesses and shrunk them down to make the
cracking effects. The letter F is thinner than the other letters and its
center of gravity causes it to fall off balance and knock into the letter R
making cracks. A similar thing happens with the letter G as it rolls to the
side and collides with the letter A making more cracks. Finally the letter i
has its dot fall and make more cracks.
Box:
When making Box I used a 3D effect to rotate the letters to
form the shape of a box. I made use of the rectangle tool as well to help
guide me in aligning the letters.
Cozy:
For Cozy I made the letter "Y" using a "C" and "U". The U
being the top part of the Y. The tail of the Y is made using the C. The C is
cut using a mask command.
|
|
Fig. 1.3 Type expressions before feedback, Week 3 (13/09/2022) |
Final Task 1 Type Expression Submission
|
|
Fig. 1.4 Final Type Expression JPEG, Week 3 (14/09/2022)
|
Fig. 1.5 Final Type Expression PDF, Week 3 (14/09/2022)
From the feedback received, I increased the size of the "Box" design. I also fixed the spacing between the letters in "Distort". And finally I tried making the lower curve of the "Y" in "Cozy" to match the rest of the letter by making it less thick while still trying to maintain that smiling feature.
|
|
Fig 1.6 Animation process for fragile, Week 3 (13/09/2022) |
|
|
Fig. 1.7 First attempt to animate "Fragile", Week 3 (13/09/2022)
|
Final Task 1 Animation Submission
|
|
Fig. 1.8 Final "Fragile" Animation, Week 3 (13/09/2022)
|
Task 1: Exercise 2 - Formatting text
In this exercise we
make use of the InDesign software to do our text formatting. The
instructional videos walk us through the basics of the interface and
how to go about the task.
Lecture 1/4:
|
| Fig 1.9 Process of Kerning Week 4(22/09/2022) |
|
|
Fig 1.10 After Kerning Week 4(22/09/2022) |
Lecture 2/4:
|
| Fig. 1.11 Layout 1 and 2 Before and after Feedback. Week 5 (27/09/2022) |
Final Task 1 Layout Submission
|
|
Fig 1.12 Final Layout for Exercise JPEG Week 5 (27/09/2022)
|
|
| Fig 1.13 Final Layout for Exercise JPEG with grids and guides. Week 5 (27/09/2022) |
Paragraph spacing: 12 pt
FEEDBACK
Week 5
General feedback:
Did not follow the character length advice by
using 3 columns instead of 2 for one of the layouts. Good point size and
leading.
Some general formatting issues on e-portfolio
Specific feedback:
Body text could use slightly increased
leading. Giving more space between "John Doe" and the body text is
recommended, thereby bringing the body text downward. The ragging is
acceptable.
A lot of unnecessary spaces on e-portfolio, try merging some images of
processes.
Week 4
General feedback:
Excellent work on "Fragile" animation
Specific feedback:
Week 3
General feedback:
There is room for improvement.
Specific feedback:
Design for Box should be made bigger, it has
less visual impact.
Fragile is fine.
Reduce thickness of the "y" in "cozy" to make it more uniform.
Move letters closer for Distort and increase size, it should look like one word.
Positioning is very important
Animation for the word "Fragile" would be better in stages and not happening all at once.
Week 2
General feedback:
Most expressions convey the meaning of the
words.
Specific feedback:
The sketch of Fragile is OK and can work
The sketch for Distort #1 is not as good as Distort #2, The 2nd option is
better.
The sketch for Box can work as the letters form the shape of a box.
REFLECTIONS
Experience
When making my sketches for the exercise I already
had an idea for the word I suggested which was "Fragile" but the ideas for
the other 3 words did not come so easily. I would often look at pictures of
Boxes and look up the dictionary definitions of Cozy and Distort to come up
with something. Once I got my sketches done and started digitizing I ran
into a lot of tough times but I also learned a lot from it. I had never used
Photoshop or the Adobe Illustrator software before but it did not take long
to understand,
Observations
It was easier to create sketches on paper but I had
to really experiment to actually make them work in the different software
like Adobe Illustrator and InDesign while following all the rules of the
exercise.
Findings
Sometimes less is more in order to convey a message.
After a few weeks I started noticing the typesetting in different things I
had read and recall some points in the lectures.
FURTHER READING
Week 4
|
|
| A type primer, 2nd Edition (2011) |
In the "a timeline" chapter on pages 17 to 18 they discussed the different mediums that were written on in the past.
We learned that writing could be etched in clay and stone. And other mediums such as Papyrus made from bamboo-like plants. Papyrus at the time could only be sourced in Egypt and could only be written on one side although it proved easier to use than clay and stone.
Later, a better substitute for Papyrus was developed called parchment, which
was made from animal skin rather than from plants. It is a better
alternative because it can be written on both sides, but it was still
expensive to use at the time due to the process of obtaining animal skins
for its production.
Later on China went on to invent Paper but the paper making technique did not come to Europe for a very long period of time. But other countries would begin their paper making with their own factories many years later.
Reference:
Kane, J. (2011). A type primer. London: King.
Comments
Post a Comment