Typography - Task 1
29/3/2022 - 08/7/2022 / week 1 - week 5
Lee Yan Xu / 0347696
Typography / Bachelor of Design in Creative Media
Task 1
Type expression
Text formatting
Lectures
Lecture 1 - Development
Early letterform development: Phoenician to Roman
Initially writing meant scratching into wet clay with a sharpened
stick or carving into stone with a chisel. The forms of uppercase
letterforms (for nearly 2000 years the only letterforms) can be seen to
have evolved out of these tools and materials. At their core, uppercase
forms are a simple combination of straight lines and pieces of circles, as
the materials and tools of early writing required.
Fig 1, The development of letterforms 1
The geeks changed the direction of writing. Phoenicians, like
other Semitic peoples, wrote from right to left. The Greeks developed a
style of writing called 'boustrophedon' (how the ox ploughs), which meant
that the lines of text read alternately from right to left and left to
right. As they change the direction of reading they also changed the
orientation of the letterforms.
Fig 2, The development of letterforms 2
Etruscan (and then Roman) carves working in marble painted
letterforms before inscribing them. Certain qualities of their strokes - a
change in weight from vertical to horizontal, a broadening of the stroke
at start and finish - carried over into the carved
letterforms.
Fig 3, The development of letterforms 3
Fig 4, The development of letterforms 4
Hand script from 3rd - 10th century C.E
The 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 degrees off the perpendiculars.
Fig 5, Hand script 1
Fig 6, Hand script 2
Both square and rustic capitals were typically reserved for
documents of some intended performance. Everyday transactions,
however, were typically written in cursive hand in which forms were
simplified for speed. We can see here the beginning of what we refer
to as lowercase letterforms.
Fig 7, Hand script 3
Fig 8, Hand script 4
A further formalization of the cursive hand, half-uncials mark
the formal beginning of lowercase letterforms, replete with ascenders
and descenders, 2000 years after the origin of the Phoenician alphabet.
Fig 9, Hand script 5
Charlemagne, the first unifier of Europe since the Romans, issued
an edict in 789 to standardize all ecclesiastical texts. He entrusted
this task to Alcuin of York, Abbot of St Martin of Tours. The monks
rewrote the texts using both majuscules (uppercase). minuscule,
capitalization, and punctuation which set the standard for calligraphy
for a century.
Fig 10, Hand script 6
Blackletter to Gutenberg's type
With the dissolution of Charlemagne's empire came regional
variations upon Alcuin's script. In northern Europe, a condensed
strongly vertical letterform known as Blackletter or texture gained
popularity. In the south, a rounder more open hand gained popularity,
called 'rotunda'. The humanistic script in Italy is based on Alcuin's
minuscule.
Gutenberg's skills included engineering, metalsmithing, and
chemistry. He marshaled them all to build pages that accurately mimicked
the work of the scribe's hand - Blackletter of northern Europe. His type
mold required a different brass matrix, or negative impression, for each
letterform.
Text Type Classification
- 1450 Blackletter
Examples: Cloister Black, Goudy Text
- 1475 Old Style
Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
- 1500 Italic
- 1550 Script
Examples: Kuenstler Script, Mistral, Snell Roundhand
- 1750 Transitional
Examples: Baskerville, Bulmer, Century, timed Roman
- 1775 Modern
Examples: Bellm Bodoni, Caledonia, Didot, Walbaum
- 1825 Square Serif / Slab Serif
Examples: Clarendon, Memphis, Rockwell, Serifa
- 1900 Sans Serif
Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothiv, Optima, Syntax, Trade Gothic, Univers.
- 1990 Serif / Sans Serif
Examples: Rotis, Scala, Stone
Lecture 2 - Basic / Describing letterforms
Baseline
The imaginary line is the visual base of the letterforms.
Median
The imaginary line defines the x-height of letterforms.
X-height
The height in any typeface of the lowercase 'X'.
Stroke
Any line that defines the basic letterforms.
Apex / Vertex
The point is created by joining two diagonal stems apex above and
vertex below).
Arm
Short strokes off the stem of the letterform, either horizontal (E, F,
L) or inclined upward (K, Y).
Ascender
The portion of the stem of a lowercase letterform that projects above
the median.
Barb
The half-serif finish on some curved strokes.
Beak
The half-serif finish on some horizontal arms.
Bowl
The rounded form describes a counter. The bowl may be either open or
closed.
Bracket
The transition between the serif and the stem.
Cross Bar
Connect to stem strokes.
Cross Strokes
Joins two stems (lowercase f, t).
Crotch
The interior space where two strokes meet.
Descender
The baseline.
Ear
Extending out from the stem or body of the stroke.
Em / En
Referring to the width of uppercase 'M', em is the distance equal to the
size of the typeface (an em in 48 points), An em is half the size of an
em. Describe em/en spaces and em/en dashes.
Finial
The rounded non-serif terminal to a stroke.
Ligature
Combination of two or more letterforms.
Link
Connect the bowl and the loop of a lowercase G.
Loop
The bowl is created in the descender of the lowercase G.
Serif
Right-angled or oblique foot at the end of the stroke.
Shoulder
The curved stroke is not part of a bowl.
Spine
The curved stem of the S.
Spur
The junction of the curved and rectilinear stroke.
Stem
The significant vertical or oblique stroke.
Stress
Indicated by the thin stroke in round forms.
Swash
The flourish extends the stroke of the letterforms.
Tail
Curved diagonal stroke at the finish of certain letterforms.
Terminal
A stroke without a serif with the self-contained.
Lecture 3 - Text / Tracking: Kerning and Letterspacing (part 1)
Kerning
Automatic adjustment of space between letters.
Letterspacing
Adding space between the letters.
Tracking
The addition and removal of space in a word or sentence. Letterspring is
not encouraged when it comes to lower cases. This is because lower cases
require the counter form (highlighted in black in the diagram above) to
achieve readability.
Flush left
Most closely mirrors the asymmetrical experience of handwriting, starts
at the same point but ending with the last word on the line ends. Spaces
between words are consistent throughout the text, allowing the type to
create an even gray value.
Centered
Imposing symmetry upon the text, assigning equal value and weight to both
ends of any line. Transforming fields of text into shapes and adding a
pictorial quality to the material non-pictorial by nature. Creating a
strong shape on the pages, amend line breaks so the text does not appear
too jagged.
Flush right
The emphasis on the end of a line, as opposed to its start, 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
Centering imposes asymmetrical shape on the text by expanding or reducing
spaces between words and letters. The resulting openness of lines can
occasionally produce 'rivers' of white space running vertically through
the text.
Type size
Should be large enough to be read easily at arm's length.
Leading
Set too tightly encouraged vertical eye movement will easily lose his/her
place; set too loosely creates striped patterns that distract the
reader.
Line length
Shorter lines require less leading; longer lines more. A good rule of
thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impair reading.
Compositional requirement
The text should create a field that can occupy a page or a screen. The
ideal text as having a middle gray value (on the left, in the diagram on
the next slide), not a series of stripes (as seen in the one on the
right).
Lecture 4 - Text / Tracking: Kerning and Letterspacing (part 2)
Pilcrow
A holdover from medieval manuscripts. Paragraph spaces are adjusted
according to line spaces to ensure cross alignment.
Leading
A piece of the space between 2 sentences.
Line space
Take into consideration the baseline of the one sentence to the descender
of the other sentence.
Widow
A short line of the type is left alone at the end of a column of
text.
Orphan
A short line of the type is left alone at the start of a new
column.
Highlighting text
Placing a field of colour at the back of the text and maintaining the
left reading axis (right example) of the text ensures readability is at
its best.
Quotations marks
Aka bullets. Create a clear indent, breaking the left reading axis and
comparing the indented quote at the top with the extended quote at the
bottom.
'A' head
A clear break between the topics within a section. 'A' heads are larger
than the text and in small caps and in bold.
'B' head
'B' heads is subordinate to 'A' heads. It is a new supporting argument or
example for the topic. They should not interrupt the text as strongly as
'A' heads do. The 'B' heads are shown in small caps, italic, bold serif,
and san serif.
'C' head
'C' head is not common, highlights specific facets of materials within
'B' head text. 'C' heads are shown in small caps, italic, serif bold, and
san serif bold. It is followed by at least an em space for visual
separation.
Headline within text
Putting together a sequence of subheads = hierarchy. Obviously, there is
no single way to express hierarchy within the text; in fact, the
possibilities are virtually limitless.
Cross Alignment
Cross aligning headlines and captions with text type reinforces the
architectural sense of the page - the structure- while articulating the
complimentary vertical rhythms. In this example, four lines of caption
type (leaded 9 pts) cross-align with three lines of text type (leaded
to 13.5 pts).
Instruction
Exercise - Type expression
Sketch
Expressing the word 'cough' and choose 3 words from 'squeeze', 'pop',
'explode', 'grow', and 'wink' typographically. The words that I choose
are 'explode', 'squeeze', and 'pop'.
Fig 13, Sketches of explode (5 April 2022)
Fig 14, Sketches of pop (5 April 2022)
Fig 15, Sketches of squeeze (5 April 2022)
Fig 16, Sketches of cough (5 April 2022)
Digitization
Fig 17, Sketches of type expression (12 April 2022)
Fig 18, Sketches of type expression (12 April 2022)
Fig 19, Final outcomes of type expression, JPG (12 April 2022)
Fig 20, Final outcomes of type expression, PDF (12 April 2022)
Fig 21, Final Animated Type Expression 'Squeeze' GIF (19 April 2022)
Exercise 2 - Text Formatting
Fig 22, Text formatting with kerning (25 April 2022)
Fig 23, Process of text formatting (25 April 2022)
Fig 23, Process of ragging (25 April 2022)
Fig 23, Process of left justified alignment (25 April 2022)
Fig 23, Baseline Grids (25 April 2022)
Fig 24, Text formatting layout 1 (26 April 2022)
Fig 25, Text formatting layout 2 (26 April 2022)
Fig 26, Text formatting layout 3 (26 April 2022)
Fig 27, Final Text formatting layout (26 April 2022)
Font: Bodoni Std
Typeface: Bodoni Std Bold Condensed
Font Size: 14pt, 36pt
Leading: 16.8 pt, 43.2 pt
Paragraph Spacing: 16.8 pt
Average Characters per line: 41-63
Alignment: Left Justified
Margins: 12.7 mm (top, left, right, bottom)
Columns: 2
Gutter: 0.5cm
Feedback
Second Week
Mr. Vinod said that my ideas are good enough so I do not need to do any
changes. So, I just continue with the second week's progress.
Third Week
In the second week, Mr. Vinod said that my things are all good but the
font is not what he want so I need to change the font.
Fourth Week
No feedback because is a public holiday.
Fifth Week
No feedback from Mr. Vinod coz my blog is incomplete.
Reflection
Experience
I have learned a lot of different knowledge about the font of words and also the knowledge from the books that I have read. other than that, Mr. Vinod has recorded a very clear video for us to learn so we just have to follow then we can complete our own work.
Observation
I think typography is quite challenging for me coz it using some apps I have never used before but after few weeks I start to getting interested with it coz I can learn very easily with just follow all the steps with Mr. Vinod's lecture playlist and also some very helpful friends.
Findings
With this task, I found that I'm very bad in time management and also I keep forgetting to check my Facebook and finally cause me to finish my blog in last minute. I hope I can do better in next task.
Further reading
Fig 28, Vignelli Canon on Design (5 April 2022)
The book is quite interesting and contains a lot of knowledge about art and it has given me a newer understanding of art. It explains more aspects of art that I never heard about before. It also uses a lot of different fonts to express the feeling that he wants to show in the text.
Fig 29, Computer Typography Design (18 April 2022)
The most important for words is can be read easily. If a word looks very pretty but cannot be read easily then it has gone for the original meaning.
Comments
Post a Comment