TYPOGRAPHY // TASK 1
29th March 2022 - 3rd May (Week 1 - Week 6)
Ang Shin Er / 0355231
Bachelor Of Design (Hons) In Creative Media / Taylor's University
Typography // TASK 1
LECTURES
WEEK 1 / INTRODUCTION & BRIEFING
For the first week, our lecturer, Mr. Vinod was briefed us on the
assignments, task and explain in the detail way what we will learn in this
module. We were also briefed on how to create an e-portfolio by using
Blogspot. This blog not only use to record all your work that you have
done in this course, it also use to submit all the task and assignment.
Beside that, we were given the first task which is creating a type
expressions.
| Lecture of Typography 1: Introduction
Typography - The art and technique of arranging type to make written
language legible, readable, and appealing when displayed
The arrangement of type :
- Selecting typefaces
- Point size
- Line length
- Line-spacing
- Letter-spacing
- Adjusting the space within letters pairs (kerning).
Font:
| a font refers to the individual font or weight within the
typeface
Typeface:
| a typeface refers to the entire family of fonts or weights that sharing a similar characteristics or styles
_
WEEK 2 / THE EVOLUTION OF TYPOGRAPHY
For week 2, Mr. Novid asked all of us to upload our sketch to the facebook group and then will go through all of our works and gave us feedback. After that, we need to
move our sketch to Adobe Illustrator by using the typeframe and font that given.
| Lecture of Typography 2: Development / Timeline
Fg.1.1 : earlier typography from phoenician letter
The early letterform is develop form phoenician to Roman.The first writing was through the stretching of a stick into wet clay or craving a stone with a chisel (Uppercase forms are a combination of straight lines and circles). Phoenicians, like other Semitic peoples, wrote from right to left. The Greeks developed 'boustrophedon' style (changed the orientation of the letterforms, from left to right)
.png)
Fg.1.2 : boustrophedon style developed by greek
Etrusan (Roman) worked in marble painted letterforms and created a change in the quality of their stroke weight.
F.g.1.3 letter developmennt from Pheonician to Greek to Roman
Hand script from 3rd – 10th century C.E. :
F.g1.4. Square Capitals
F.g.1.5 Rustic Capitals
Rustic capitals - a compressed version of square capitals. Many words on a sheet of
parchment and took far less time to write. Faster and easier but
harder to read.
F.g.1.6 Roman cursive
Both square and rustic capitals were typically reserved for
documents of some intended performance. And were typically written
in cursive hand in which forms were simplified for
speed.
Fg.1.7 Uncials
Uncials - Refer to letters that are one inch (one twelfth of foot) high.
Uncials simply as small letters and the broad forms of uncials are
more readable at small sizes than rustic capitals.
Fg.1.7 Half Uncials
Half -Uncials - A further formalization of the cursive hand and is the formal
beginning of lowercase, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet
Fg. 1.8 Caloline miniscule
Charlemagne - The first unifier of Europe since the Roma.
Monks rewrote the texts using both majuscules (uppercase), minuscule
(lowercase), capitalization, and punctuation which set the standard
for calligraphy for a century.
Blackletter to Gutenberg’s type :
Fg.1.9 Blackletter (Textura)
Blackletter or textura - a condense strongly vertical letterform.
In the south, a rounder more open hand gained popularity, called
‘rotunda’. The humanistic script in Italy is based on Alcuin’s
miniscule.
Fg.1.10. Johann Gutenberg, Mainz
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.
Text type classification :
1450 Blackletter
1475 Oldstyle
1500 italic
1550 script
1750. Modern
1775 modern
1825 square serif / slab serif
1990 serif / sans serif
-
WEEK 3 / TYPE STRUCTURE, FAMILY AND ANATOMY
| Lecture of Typography 3: Basic / Describing letterforms
F.g.2.1. Baseline,Median,X-height
F.g.2.4. Arm
F.g.2.5. Ascender
- Baseline : imaginary line the visual base of the letterforms
- Median : imaginary line defining the x-height of letterforms
- X-height : height in any typeface of the lowercase 'x
- Stroke : any line that defines the basic letterform
- Apex / Vertex : the point created by joining two diagonal stems
- Arm : short strokes of the stem of the letterform, either horizontal or inclined upward.
- Ascender : the portion of the stem of a lowercase letterform that projects above the median
- Barb : the half-serif finish on some curved stroke
- Bowl : rounded form that describes a counter (opened or closed)
-
Beak : The half-serif finish on some horizontal arms.
- Bracket : transition between serif and stem.
- Cross Bar : horizontal stroke that connects two stems together.
- Cross Stroke : horizontal stroke that joins two stems together.
- Crotch : interior space where two strokes meet
- Ear : the stroke extending out from the main stem or body of the letterform
- Descender : portion of stem of lowercase that projects below the baseline
- Em / en : originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface.An en is half the size of an em and most often used to describe em / en spaces, and en / em dashes
- Finial : The rounded non-serif terminal to a stroke.
- Leg : Short stroke off the stem of the letterform, either at the bottom of the stroke or inclined downward.
- Ligature : character formed by combining two or more letterform
- Link : the stroke that connects the bowl and loop of a lowercase G
- Loop : the bowl created in the descender of the lowercase G
- Serif : the right-angled foot at the end of the stroke
- Shoulder : curved stroke that is not part of a bowl
- Spine : curved stem of the S
- Spur : extension that articulates the junction of the curved stroke
- Stem : significant vertical or oblique stroke
- Stress : orientation of letterform indicated by the thin stroke in round forms
- Swash : the flourish that extends the stroke of a letterform
- Tail : curved diagonal stroke at the finish of certain letterforms
- Terminal : self-contained finish of a stroke without a serif
_
| Basic / The font :
F.g.2.29. Uppercase
F.g.2.30. Lowercase
- Uppercase Capital letters : including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures
- Lowercase : the same characters as uppercase
F.g.2.31. Small Capitals
- 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
F.g.2.32. Uppercase Numerals
F.g.2.33. Lowercase Numerals
- Uppercase Numerals : called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.
- Lowercase Numerals : known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders
- Italic : most fonts today are produced with a matching italic, Small caps, however, are almost always only roman. It is refer back to 15th century Italian cursive handwriting and is typically based on the roman form of the typeface.
- Punctuation, miscellaneous characters : all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It's important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.
- Ornaments : used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family
| Basic / Describing Typefaces :
- Roman : the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.
- Italic : 15th century Italian handwriting.
- Boldface : characterized by a thicker stroke than a roman form.
- Light : lighter stroke than roman form.
- Condensed : a compressed version of roman form.
- Extended : extended variation of roman font.
| Basic / ComparingTypefaces
The 10 typefaces mentioned above represent 500 years of type design. The men and women who rendered them all sought to achieve two goals: easy readability and an appropriate expression of contemporary esthetics.
_
WEEK 4 / TYPE APPLICATION
| Text / Tracking: Kerning and Letterspacing
The term ‘kerning’ refers to the automatic adjustment of space
between letters. It is often mistakenly referred to as
‘letterspacing. In fact, letterspacing means to add space
between the letters. The addition and removal of space in a word
or sentence is referred to as ‘tracking’.
F.g.3.3. Flush left
F.g.3.4. Centered
F.g.3.5. Flush right
F.g.3.6. justified
- Flush left : Each line starts at the same point but ends wherever the last word on the line ends.
- Centered : This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
- Flush right : This format places emphasis on the end of a line as opposed to its start.
- Justified : Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters.
F.g.3.7. Texture
Different typefaces suit different messages. The different textures of the typefaces with relatively generous
x-height or relatively heavy stroke width, produces a darker mass
on the page than type with a relatively smaller x-height or
lighter stroke. Sensitivity to these differences in colour is basic for creating a successful layouts.
| Text / Leading and Line Length :
F.g.3.8. Text example of Adobe Jenson
- Type size: Text type should be large enough to be read easily at arms length
- Leading: Text that is set too tightly encourages vertical eye movement
- Line Length: Appropriate leading for text is as much a function of the line length as it is a question f type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 35-65 characters.
| Text / Type specimen book :
F.g.3.9. example of type specimen sheet
A type specimen book (or ebook for screen) is to provide an
accurate reference for type, type size, type leading, type line
length etc
_
WEEK 4 / PRINCIPLE OF TYPOGRAPHY
| Lecture of Typography 4: Text / Indicating Paragraph
F.g.4.1. Line space and leading
F.g.4.2. example of the standard indentation
Standard indentation: is the same size of the line spacing or the same as the point size of your text
F.g.4.3. example of the method of extended paragraphs
The method of extended paragraphs created unusually wide columns of text and to despite these problems, there can be strong compositional or functional reasons for choosing it.
| Text / Widows and Orphans
In traditional typesetting (the kind that still endures among conscientious commercial publishers), there are two unpardonable gaffes,which is widows and orphans.
F.g.4.4. Widow and Orphan
- Widow : short line of type left alone at the end of a column of text.
- Orphan : short line of type left alone at the start of new column.
| Text / Highlighting text
F.g.4.5. examples of how to highlight text
F.g.4.6. examples for the sans serif font
F.g.4.7. examples for placing a field of colour
F.g.4.8. example of typographic
| Text / Headline within Text
There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance.
F.g.4.9. A head
- A head : It indicates a clear break between the topics within a section. In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. The fourth example shows an A head ‘extended’ to the left of the text.
F.g.4.10. B head
- B head : It indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.
F.g.4.11. C head
- C heads : They not materially interrupt the flow of reading. As with B heads, these C heads are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an em space for visual separation.
F.g.4.12 when all is putting together
F.g.4.12 Cross align
Cross aligning headlines and captions with text type reinforces the architectural sense of the page and the structure.
It is important to recognise the specific letterforms when developing a sensitivity to the counterform, - the space describes, and often contained, by the strokes of the form.
WEEK 5 / UNDERSTANDING
| Lecture of Typography 5: Letters / Understanding letterforms
F.g.5.1 uppercase letter
The uppercase letter forms below suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc. It may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
F.g.5.2 lowercase letter
| Letters / Maintaining x-height
F.g.5.3 maintaining x- letter
the x-height generally describe the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin
| Letters / Form / Counterform
F.g.5.5 Counterform
It is important to recognise the specific letterforms when developing a sensitivity to the counterform, - the space describes, and often contained, by the strokes of the form.
The letter is particularly and important concept when working with letterforms like lowercase ‘r’ that have no counters. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set. Its worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to loose its identity, as individual elements are examined without the context of the entire letterform.
F.g.5.5 contrast of the typography
The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most powefuldynamic in design,as applied to type, based on a format devised by Rudi Ruegg.
The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light
_
INSTRUCTION
TASK 1 / EXERCISE 1: TYPE EXPRESSION
| Sketch :
For the first task, we told to pick 3 words that given by Mr. Vinod, and
one is comulsory which is "cough"to do the type expression. We are only
allowed to use the 10 typeface that given which is:
1. Adobe Caslon Pro
2. Bembo Std
3. Bodoni Std
4. Futura Std
5. Gill Sans Std
6. ITC Garamond Std
7. ITC New Baskerville Std
8. Janson Text LT Std
9. Serifa Std
10. Univers LT.
Here is my first sketch. I choose POP, GROW, SQUEEZE and for COUGH is
mandatory. I straight away use Abobe Illustraion to create my first
sketch.
F.g.1.1 first sketch for task 1 :"pop","grow","squeeze","cough" 4.4.2022
After received the feedback from Mr Vinod, I knew that my work contain
too much illustration. So, I tried to redesign a new sketch and make
it simple. This time I going to use hand drawn to do my sketch.
F.g.1.2 second sketch for task 1 :"pop","grow","squeeze","cough" 11.4.2022
| Digitalization:
Then, we are going to digitalize our work by using Adobe
Illustration. I had made some change while move my work into AI.
F.g.1.3 digitalised version task 1 :"pop","grow","squeeze","cough" 12.4.2022
We were told to upload our work to facebook post below and Mr
vinod will check and gave comment to us one by one. After got
the feedback from Mr Vinod, my GROW is contain too much effect.
I tried to make it simple and this is my second work for the
digitalised version.
F.g.1.4 second digitalised version for :"pop","grow","squeeze","cough" 14.4.2022
At last, here is the 4 word that I had choose.
F.g.1.5 Final submission for :"pop","grow","squeeze","cough" in Jpg 14.4.2022
Final submission of type espression in PDF 14.4.2022
_
| Animation:
After doing all the typo, now we are learning to animate our
typo. we are going to create an animation for our work by using Adobe Illustrator then later
come to Adobe Photoshop to export the animation into gif file. I decided to create a squeeze animation.
F.g.1.6 The squeeze text 16.4.2022
F.g.1.7 After export all the movement from Adobe
Illustration 16.4.2022
F.g.1.8 Move all the movement to Adobe photoshop 16.4.2022
F.g.1.9 Final Squeeze animation 16.4.2022
_
TASK 1 / EXERCISE 2: TYPE FORMATTING
| Text Formatting: Kerning and Tracking
For the second part of the task, we going to learn the text
formatting. We are given a copy of text and we have
to
control how text appears in the document by create
a layout that includes
kerning, text alignment, letter case, leading, and
spacing.
We going to learn this in Adobe Indesign and only allowed
to use the 10 typefaces that given. This is my text
formatting with kerning result by using my own name.
F.g.2.1 learning text formatting with
kerning 24.2.2022
Adobe indesign note - kerning and tracking : Preference > unit and
increments
| Text Formatting
For the text formatting, first have to set the margin of the
page and the colum that need for the text. For an A4 size is
better the column is not more than 3 columns.
Adobe indesign note - Margin and column : layout > margin and column.
F.g.2.2 creating margin and column 25.4.2022
Note for text formatting :
- The font size is between 8-12 points.
- The Character line length is better between 55 to 65.
- Text leading is bigger that the font size aroung 2-3 points only.
- Have to adjust the kerning and tracking to let it look comfortable.
F.g.2.3 Adjusting the character line length 25.4.2022
F.g.2.4 First draft without adjust
any 25.4.2022
To do the cross alignment we can use a function
called baseline grid to make sure all the word is
align proper even in diffrent column. Adobe indesign note - To adjust
grid : Preference > grids.
F.g.2.6 baseline grid 25.4.2022
After watch lecture video, I learned and start to do some adjustments such as kerning, the spacing, the alignment and others. To ensure there is look comfortable.
F.g.2.7 text
formatting progress 25.4.2022
F.g.2.8 2nd draft for text formatting 26.4.2022
After received some advice form Mr Vinod which is my font size is too big and character line length is not enough, so, I tried to redesign my works.
F.g.2.9 Re-adjusting my character line length
(character 60). 26.4.2022
F.g.2.9 Finalize my work 26.4.2022
| The final text formatting
F.g.2.8. Final text formatting in JPG 26.4.2022
Final text formatting in PDF 26.4.2022
Details:
- Font: Futura/Bembo std
- Typeface: bold/Regular
- Font size: 80/38/10pt
- Leading: 12pt
- Paragraph Spacing: 12pt
- Average Characters per line: 60
- Alignment: Left
- Margins: 30mm top and bottom, 15left and right
- Columns: 2
_
FEEDBACK
WEEK 2 / Task 1 : Sketch
| General feedback : The work is more contain illustration and effects.
| Specific feedback :
- For the 3rd COUGH contain illustration is not allowed, The 1st one is good.
- The arrow for GROW chould be better, such as change the direction of the arrow
- For the SQUEEZE can be more squeeze, its more like wavy.
- The 2nd POP have to change to the font that given.
WEEK 3 / Task 1
| General feedback : Overall is okay
| Specific feedback :
After redesign , the GROW for the
arrow one (bottom one) is
interesting but the another one (top
one) is still contain too much
effect and have to avoid distortion. For the COUGH (bottom one) is better not to rotate it just left it horizontal.
WEEK 5 / Task 1
| General feedback : The note overall is clear and neat. Have to complete the further study part.
| Specific feedback :
E-portfolio link is not active. For the text formatting, the character in the line is less and the font size is too big.
_
REFLECTION
| Experiences
This is my first time using blogspot to create an E-portfolio, its
take me a long time and keep repeating the lecture video to figure out how is this function. At Typography class, I
realized that there are many knowledge about font, typefaces and
typo that I need to learn. I still have many things need to improve
and figure out.
After watching lecture video about text formatting, I learned how
to use Indesign. I didn't use this software before and is quite hard to me, so, keep repeating the lecture video
and also search some tutorial video to help me familiar with this
software. Happy to learn something new.👏
| Observation
Before typography class I usually use illustration, graphic, or somthing visual to express the art. Now
I found another interesting way to do design. Typography is an
useful art, it is the art of arranging the letters and text in a way that makes it clear and comfortable when appealing to the
reader. And its involves font style, appearance, and structure,
which can be viewed as visual summary. Its aims to elicit certain emotions and convey specific
messages.
| Findings
To complete the task, I had do some research on how others express their design by using word and how they play their creativity around the words. There is many great example there I just realized that not only illustration but also words. I also keep searching some tutorial for Adobe
Indesign to get to know more about the basic and the use of the
tools and its quite hard for me. I think I have to do more practice in Indesign.
FURTHER STUDY
Tittle : Bookdesign. by Haslam, Andrew, 2006.
Some example of layout that show in the book
Learning Summary: A good Interior design of a book makes the book memorable. If text and interior elements do not have a familiar and clear structure separating different chapters or ingredients from steps, the product runs afoul of difficulty and confusion and invites criticism. If there is any additional pictures, illustrations, iconography, quotes, and other components must be taken into consideration alongside with the text.
The inclusion or exclusion design of the specific textual elements can carry a significant weight. For example, using a cookbook with too-small text and a difficult font is an exercise in frustration, so connecting a hierarchy to fit components is an essential to do an effective design.
When drafting a manuscript for any guidebook and should be clear. Using the right interior design for the manuscript is important for the function of any book, and strong interior design is an effective blending of the function and style shared by elements throughout the manuscript.
Reference :
Riley Pittenger (2017). Reading Flow in Book Design and Layout
_
Comments
Post a Comment