Typography- Task 1/Exercises
30/03/2022 - 27/04/2022 (Week 1-Week 5)
Yong Kai Yi (0352826)
Typography
Task 1 ( Exercise 1 & 2)
Yong Kai Yi (0352826)
Typography
Task 1 ( Exercise 1 & 2)
LECTURES
Week 1/ Introduction & Briefing
During the first week, our lecturer Mr. Vinod brief us the module and also introduced to us the typefaces. We also got to know the difference between font and typefaces ,and it's quite interesting. We also had a ice-breaking session to introduce ourselves and also knowing each other.
Lecture 1: Development
30/03/2022 (week 1)
1. Early letterform development: Phoenician to Roman
Fig 01: Evolution from Phoenician letter
The evolution shows us that the tool we used had an important influence
on the type of writing that is created. The letterform have been
developed on the pretext of the kind of tools.
Fig 02: direction of writing changed y the Greeks
The Greeks changed the direction of reading and writing, they
developed the style of writing called 'boustrophedon' ,which meant to
read alternately from right to left and left to right. They also
changed the orientation of the letterforms as the picture above
shown.
Fig 03: formation of the letter 'A'
The letter 'A' started to form in a different way during 900B.C.E
,which is the Greek letter, it takes from Phoenician but flip it and
flip it 90 degrees again to form the letter 'A' which we are now
familiar with.
2. Hand script from 3rd - 10th century
Fig 04: Square capital developed 4th/5th century
One of the hand scripts, Square capitals were the written version that will shown in Roman monuments.
The thick and thin strokes were formed by the reed pen held at an
angle around 60 degrees off the perpendicular. Square capitals were
also finished the main strokes with serifs.
Fig xx: Rustic capital developed late 3rd- mid 4th
century
Rustic capitals were the compressed version of square capitals, thus it
allowed for twice as many words on a sheet of parchment. The pen or
brush was held at an angle around 30 degrees off the perpendicular.
Although Rustic capitals were more convenient, they were harder to
read because of the compressed form.
Fig 05: Uncials developed late 4th-5th century
Some scholars thinks that uncial refers to letters that are one inch high. The broad forms of
uncial are more readable at small sizes than rustic capitals.
Fig 06: Half -uncials developed C.500
Half-uncials replete the ascenders and descenders, 2000 years after the
origin of the Phoenician alphabet.
Fig 07: Caroline miniscule developed C.925
Charlemagne issued an edict and entrusted this task to Alcuin of York, Abbot of
St Martin of Tours. The monks rewrote the texts using both
majuscule, miniscule, capitalization and
punctuation which set the standard for calligraphy for a
century.
3. Blackletter to Gutenberg's type
Fig 08: Blackletter (Textura) developed C.1300
A condense strongly vertical letterform known as Blackletter or Textura in northern Europe. Whereas, a rounder more open
hand gained popularity in south ,called ' Rotunda'. The
humanistic script in Italy is based on Alcuin's
miniscule.
Fig 09: Gutenberg's type
Gutenberg's skills included engineering, metalsmithing and chemistry. He
marshalled them all and accurately mimicked the work of the
scribe's hand - Blackletter of Northern Europe. Gutenberg's type
mold required a different brass matrix, for each
letterform.
4. Text type classification
Week 2/ Basic
Lecture 2: Basic / Describing letterforms
06/04/2022
Fig 19: basic letterforms
- Baseline is the visual base of the letterforms.
- Median defining the x-height of letterforms.
- X-height is the height in any typeface of the lowercase ‘x’.
- Stroke are any line that defines the basic letterform.
- Apex / Vertex is the point created by joining two diagonal stems (apex above and vertex below).
- Arm refers to short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
- Ascender is the portion of the stem of a lowercase letterform that projects above the median.
- Descender is the portion of the stem of a lowercase letterform that projects below the baseline.
- Barb is the half-serif finish on some curved stroke.
- Beak is the half-serif finish on some horizontal arms.
- Bowl is the rounded form that describes a counter. The bowl may be either open or closed.
- Bracket is the transition between the serif and the stem
- Cross Bar is the horizontal stroke in a letterform that joins two stems together
- Cross Stroke is the horizontal stroke that intersects the stem of a lowercase letter 't' or 'f'
- Crotch is the interior space where two strokes meet.
- Ear is the stroke extending out from the main stem or body of the letterform
- Finial is the rounded non-serif terminal to a stroke.
- Leg is the short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).
- Ligature is the character formed by the combination of two or more letterforms.
- Link is the stroke that connects the bowl and the loop of a lowercase G.
- Loop is the bowl created in the descender of the lowercase G.
- Serif is the right-angled or oblique foot at the end of the stroke.
- Shoulder is the curved stroke that is not part of a bowl.
- Spine is the curved stem of the S.
- Spur is the extension the articulates the junction of the curved and rectilinear stroke.
- Stem is the significant vertical stroke.
- Stress is the orientation of the letterform, indicated by the thin stroke in round forms.
- Swash is the flourish that extends the stroke of the letterform.
- Tail is the curved diagonal stroke at the finish of certain letterforms.
- Terminal is the self-contained finish of a stroke without a serif. This is something of a catch-all term.
Fig 20: Small Capitals Uppercase
Small Capitals Uppercase letterforms draw
to the x-height of the typeface. Small
Caps are primarily found in serif fonts as
part of what is often called expert
set.
Fig 21: Uppercase Numerals
Uppercase Numerals are the same height as
uppercase letters and are all set to the
same kerning width.
Fig 22: Lowercase Numerals
Lowercase Numerals are set to x-height with ascenders and
descenders. Lowercase numerals are far less common in sans
serif type-faces than in serif.
Fig 23: Ornaments
Ornaments used as flourishes in invitations or
certificates. They usually are provided as a font in a
larger typeface family. Only a few traditional typefaces
contain ornamental fonts as part of the entire typeface
family , example: Adobe Caslon Pro.
Fig 24: different type-faces
- Roman: the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.
- Italic: fifteenth century Italian handwriting on which the forms are based.
- Boldface: has a thicker stroke than a roman form.
- Light: a lighter stroke than the roman form. Even lighter strokes are called ‘thin’.
- Condense: a version of the roman form, and extremely condense styles are often called ‘compressed’.
- Extended: an extended variation of a roman font.
Week 3/ Text
Lecture 3: Text pt.1
3.1 Text/ Tracking: Kerning and Letterspacing
13/04/2022
Fig 25: difference between with and without
kerning
Fig 26: tracking
There has long been strong resistance within the type
community to letterspace lowercase letters within text.
3.2 Typography: Text/ Formatting Text
Fig 27: flush left
Flush left
is most closely mirrors the asymmetrical experience of
handwriting. It is a format which aligned left and
ragged right. Each line starts at the same point but
ends wherever the last word on the line ends. Spaces
between words are consistent throughout the text,
allowing the type to create an even gray value.
Fig 28: centered
Centered
imposes symmetry upon the text. Centered text is
sometimes difficult to read, because the starting
point is irregular. It transforms fields of
text into shapes, centered type creates such a strong shape on the
page, it is important to amend line breaks so that
the text does not appear too jagged on both sides.
Fig 29: flush right
Flush right
places emphasis on the end of a line as opposed to
its start. It is a format which align right and
ragged left.
Fig 30: justified
Justified is like centering, it imposes a symmetrical shape
on the text, which fits the whole page on both
sides. It is achieved by expanding or reducing
spaces between the words.
3.3 Typography: Text / Leading and Line Length
- Type size: Text type should be large enough to be readable.
- Leading: Text that is set too tight encourages vertical eye movement. Type that is set too loose creates striped patterns which will cause distractions.
- Line length: Keeping the line length between 55-65 characters is advisable. Extremely short or long lines lengths impairs reading.
3.4 Typography: Text /Type Specimen
Book
Fig 31: sample type specimen sheet
A type specimen book is to provide an accurate
reference for type, type size, type leading, type
line length etc.
Week 4/ Text
Lecture 4: Text pt.2
20/04/2022
4.1 Text / Indicating Paragraphs
Fig 32: the 'pilcrow'
The 'pilcrow' is one of the options to indicate
paragraphs. It is a holdover from medieval
manuscripts.
Fig 33: the 'line space'
The example here displays a ‘line space’
(leading*) between the paragraphs. For example,
if the text point size is 10pt, leading would be
12/12.5/13pt, thus the line space would be
2/2.5/3pt. In Adobe InDesign, we can give a
value for paragraph space ,the value should be
the same with the leading space.
The purpose of maintaining the paragraph space
same as the leading space is to maintain cross
alignment (it can be shown clearly when there is
two columns of text).
Fig 34: line spacing vs leading
Leading space is the space between two
sentences, whereas line spacing is the
descender from one sentence to the descender
of another descender.
Fig 35: indentation
The standard indentation is the same size of
the line spacing or the same as the point size
of the text. Indentation was used to save
spaces in newspapers. It is best use when the
text is justified.
Fig 36: extended paragraphs
The extended paragraphs method creates unusually
wide columns of text.
4.2 Text / Widows and Orphans
There are two unpardonable gaffes, widows and
orphans, which also must avoid the occurrence.
Fig 37: example of widows and orphans
A widow is a short line of type left
alone at the end of a column of
text.
A orphan is a short line of type
left alone at the start of a new
column.
In justified text both widows and orphans are
considered as serious gaffes. The only solution
to widows is to 'rebreak' (use a force line
break by clicking Shift + Enter) your line
endings through out the paragraph.
Fig 38: ways to highlight text
The picture above showing some examples of how to
highlight text, which is using Italics and making it
Bold. The other way of highlighting text is changing
the typeface by making it bold and also changing the
color of text. Different kinds of emphasis require
different kinds of contrast.
Fig 39: when changing the serif font to san serif
font
The example above shown is the san serif font which
has been reduced by 0.5pt to match the x-height of the
serif typeface.
Fig 40: with indentation vs without indentation
Another way to highlight text is placing a box at the
back of the text. The example on the left is with
indentation, thus the box still in the reading axis.
Whereas the example on the right is without
indentation, thus the box is out of the reading
axis.
Fig 41: intending vs extending
Placing typographic elements also can be useful to
highlight text. Placing the elements outside the
left margin (the example on the right) can maintain a
strong reading axis.
4.4 Text / Headline within Text
Fig 42: A head
'A' heads are set larger than the text, in small
caps and in bold.
Fig 43: B head
Fig 44: C head
'C' heads highlight specific facets of material
within 'B' head text. 'C' heads are shown in small
caps, italics, serif bold and san serif bold.
4.5 Text / Headline within Text
Fig 45: example of cross alignment
Cross aligning headlines and captions with
text type reinforces the architectural sense
of the page—the structure. If the difference
of the text point size is not large, will be
able to maintain cross alignment by doubling
the leading space.
Week 5/ Understanding
Lecture 5: Understanding
27/04/2022
5.1 Letters / Understanding letterforms
Fig 46: the Baskerville stroke form
The uppercase letter forms in fact it is asymmetrical. The Baskerville stroke form shown above demonstrates clearly shows each bracket connecting the serif to the stem has a unique arc.
Fig 47: the Univers stroke form
The uppercase letter forms may appear symmetrical, but the width of the left stroke is thinner than the right stroke.
5.2 Letters
Fig 48: the Helvetica & Univers stroke form
The lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica (left of the picture) and Univers(right of the picture). How the stems of the letterforms finishes and how the bowls meet the stems shows the difference these two similar typefaces.
5.3 Letters / Maintaining x-height
Fig 49: the example of letters with median and baseline
5.4 Letters / Form / Counterform
Fig 50: the example counterform
The counterform is the area of a letter that is entirely or partially enclosed by a letter form. The word 'scream' shown above, the grey space is the letter form whereas the black space is the counterform.
Fig 51: the close details to understand counterform
The examinations provides a sense of how balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics.
5.5 Letters / Contrast
Fig 52: a version of Rudi diagram
The simple contrasts produces numerous variations: small + organic/large + machined; small + dark/ etc. We required contrast when we need to differentiate the information, there are many ways to create contrast in typography.
INSTRUCTIONS
Module information booklet:
EXERCISE 1: Type Expression
30/03/2022 - 20/04/2022 (week 1-4)
Given words for type expression exercise:
-Cough
-Pop
-Grow
-Wink
Sketches :
.png)
Fig 53: Sketches (week1/ 30/03/2022)
My first idea came in my mind for the word 'cough' is the throat, coughing
gesture and the viruses. Thus the 1st design produced and for the 2nd and
3rd design is a concept of 'unstable', as coughing often makes the whole
body vibrates and so.
Next, the idea of the word 'pop', is like something being pops out and
also balloon exploding reminds me of the word 'pop'. For the 1st and 2nd
design is more on the concept of popping balloon. The 3rd design is being
expanded out to express the 'pop out' .
The idea of wink is the eye with lashes, thus for the three designs above
represents the lashes in different positions and ways.
Lastly, the expression for 'grow' is slowly being bigger or taller and
expanded out. For the 1st design is the concept of growing bigger, 2nd
design is expanding and 3rd design is the 'growth' from lowercase to
uppercase.
Sketches after the feedbacks given:
Fig 54: Sketches (week 1 /30/03/2022)
GROW: I tried a different
typeface and created outline. I flipped the letter 'r' horizontally to
form a 'plant' growing out from the letter 'o' .
COUGH: I tried using a lighter
typeface and forms the letter 'O' as a 'tongue' and the letter 'C' act
as a mouth coughing out the word 'UGH', and also referring to Mr. Vinod
opinions that we can add some small letters to form something in the
background instead of using graphic elements.
WINK: The word wink using the
same design from the first sketch .
POP: The week 1
sketches for the word 'pop' is given feedback about too many
illustration elements, and I recreated the 3rd design as it is
approved and the lecturer advise me to explore more about the
typefaces too. Thus, I slightly distort both letter 'P' and make it
kind of 'pops out' from the letter 'O'. The small letters in the
background is showing the motion of 'popping out'.
Digitalized:
Fig 55: digitalized words in AI (week 2 / 06/04/2022)
I digitalized the final design for each words in Adobe Illustrator all
using Futura std.
Final digitalized outcome:
Fig 56: final attempt digitalized words (week 2 / 06/04/2022)
Fig 57: final attempt digitalized words in pdf (week 2 / 06/04/2022)
Progression of animating in Adobe Illustrator:
Fig 58: screenshot of progress in creating frames (week 3 / 13/04/2022)
I used the ruler as a guide to re-position the letter 'r' to ensure it moves frame by frame evenly, as it will affects the fast and slow of the gif.
Animated gif:
Fig 59: animated 'grow' gif (week 3 / 13/04/2022)
After the 1st attempt animating the word 'grow', received some feedbacks
from Mr. Vinod. I added more frames and adjust the size of the 'ear' of
the letter 'r'.
Progress of amendments after receiving feedbacks:
Fig 60: screenshot of progress in amendments (week 3 / 13/04/2022)
The main amendments for the animated gif is I added more frames for the gif in order to smoothen the movement and slow it down at Adobe Illustrator.
Final animated gif outcome:
Fig 61: final animated 'grow' gif (week 3 / 13/04/2022)
After receiving feedbacks from Mr. Vinod, I added more frames from around
20 to 36 frames. I also adjusted the position of the letter 'r' to prevent
the 'glitching' movement.
EXERCISE 2: Text Formatting
13/04/2022 - 27/04/2022 (Week 3-5)
We were assigned to do text formatting using Adobe InDesign, with different fonts and typefaces.
Progression of text formatting 1:
Fig 62: text formatting 1 progress (week 4 / 20/04/2022)
Final text formatting 1 outcome:
Fig 63: text formatting 1 jpeg (week 4 / 20/04/2022)
It is interesting to know that different typefaces requires different amount of kerning to be done. Futura Std and Bodoni Std by far are my favorite typefaces for my name.
Progression of text formatting 2:
Fig 64: text formatting 2 progress (week 4 / 20/04/2022)
We started to do text formatting task 2 by following the instructions in the <Text Formatting 2.4-4.4A> lecture recordings. First we need to create margins and columns, I chose 4 columns and 55mm margin for bottom.
I tried using Serif fonts, but found out I preferred San Serif fonts, I chose between Futura Std and Univers LT Std. After comparing two fonts, I chose Univers LT Std because of the tidiness it gave for the whole page of text.
Final text formatting 2 outcome:
Fig 65: text formatting 2 jpeg (week 4 / 20/04/2022)
Font : Univers LT Std
Typeface : Univers LT Std 55 Roman & Oblique
Font size : 62 pt, 10 pt, 9 pt
Leading: 64pt,12pt,11pt
Paragraph Spacing: 12pt
Average characters per line: 49-54
Alignment: Left
Margins: 12.7mm (top, left, right), 55mm (bottom)
Columns: 4
Gutter (for columns): 5mm
Final text formatting outcome in PDF files:
Fig 66: text formatting in PDF (week 4 / 20/04/2022)
Fig 67: text formatting with grids in PDF (week 4 / 20/04/2022)
FEEDBACKS:
Week 2 (06/04/2022):
General feedback: Too much illustration elements, and typeface used were not the given 10 typefaces.
Specific feedback: Too much illustration/ graphic elements for first two designs of 'cough' . Typeface for the 3rd design of 'pop' and 1st design of 'grow' is different with the given typefaces, advisable to change them to the given typefaces and explore more. The 1st and 3rd design of the word 'wink' is interesting.
Week 3 (13/04/2022):
General feedback: Too much distortion. Overall is interesting.
Specific feedback: Advisable to lesser the distortion for the letter 'r' from the word 'grow', can use the direct selection tool to extend the stem of 'r' instead of distorting it. The word 'wink' was not positioned correctly and spaced evenly, advisable to use tools or rulers to adjust the position of the 'lashes' and the word 'wink'. The letter 'p' from the word 'pop' should not distorting too much, advisable to stay straight.
General feedback for the 1st animated gif: Going too fast, need to add more frames.
Specific feedback for the 1st animated gif: Can try mimicking the growing progress of a plant, plants usually grow slowly.
Week 4 (20/04/2022):
General feedback for 2nd attempt gif: Overall concept no issue, but need more frames.
Specific feedback for 2nd attempt gif: It is advisable when duplicate the artboard should duplicate together with the words so the letter won't be at different position in every frame, to prevent unnecessary glitch or moving of the letters.
Week 5 (27/04/2022):
General feedback for e-portfolio: Overall is neat and clean, but have some missing information.
Specific feedback for e-portfolio: Need to add date under the exercise pictures, and adjust the text expression pdf file iframe size. Missing typeface name in the text expression jpeg file.
RELECTIONS:
I think it's quite interesting during throughout these weeks, because I
learnt a lot about typography, before this I have not much knowledge
regarding this. I really appreciate our lecturer giving feedbacks for
all the students, as we can learn a lot by just listening to the
feedbacks and opinions given. I also found that there is actually a lot
details need to take care of while producing a book or even just the
cover of it.
FURTHER READING:
Week 1-2 (30/03/2022-06/04/2022) : < I.D.E.A.S
Computer Typography Basics>
Fig 68: < I.D.E.A.S Computer Typography Basics>book
cover
This is a book recommended by Mr. Vinod. I found that there are a lot more things to learn for typography, since I am not familiar with this, after reading this, I acknowledged a lot of things that I did not know before. It really helps me a lot in knowing more basics about typography.
Fig 69: Font Styles and Families (pg. 5)
The book mentioned about the font styles- Bold and Italic in most of
the programs such as Microsoft Word does not know if a font has a bold
or italic version ,they will let users to format the font whatever
style they wanted., whether the font style even exist or not.
I previously thought that every font have both Bold and Italic
version, because of the usage of Microsoft Word, so it is quite
interesting for me about knowing this kind of information.
Week 3 - 5 (13/04/2022-27/04/2022): < The Vignelli Canon
>
Fig 70: The Vignelli Canon
Fig 71: The Vignelli Canon (pg. 10)
This is the paragraph that I remember the most. The author
describes the vulgar designs in the market are producing visual
pollution that is degrading the environment, I think it is quite
accurate and the author really described it well. Thus, I
remembers it the most.
Comments
Post a Comment