Typography Task 1 / Exercises
09/24/2024 - 10/29/2024（Week 1 - Week 6）
SUN YUTONG (0377440)
Typography / Bachelor of Design (Honours) in Creative Media
Task 1: Exercises 1 - Type Expression
Exercises 2 - Text Formatting
JUMP LINK
1.LECTURES
Week 1：
LECTURE 1: Typo_0_Introductionion
In this lecture, the professor introduced us to the definition of
typography, and its application and introduced simple terminology.
Mr. Vinod started the lecture by explaining what typography is, that it is
the creation of alphabets and animation, and that a good sense of typography
creates a good website design.
Mr. Vinod explained that typography can be used in every aspect of life and
that we can learn about typography in many different ways. Mr. Vinod
explained that typography can be used in all aspects of life and we can
learn about typography in many ways such as through libraries, online
journals, websites, and magazines.
Mr. Vinod then explained the meaning of fonts and typefaces. Fonts are
mainly the thickness of individual typefaces, such as bold, italic, and
bold. Fonts are entire families of fonts with the same characteristics or
style. Finally, we were introduced to type creation, type representation,
and type arrangement, which we will learn about later in the course.
Font: a font refers to the individual font or weight within the
typeface.
Typeface: a typeface refers to the entire family of fonts that share
similar styles.
LECTURE 2: Typo_1_Development
Firstly, Mr Vinod talked us through the early forms of alphabetic development,
where the first people were using sticks to carve letters on top of damp clay,
and where the core of the capital form was a simple combination of straight
lines and circles.
The Greeks changed the direction of writing, meaning words were read
alternately from right to left.
Early letterform development : Phoenician to Roman.
Manuscripts from the 3rd-10th centuries AD.
- Square capitals are the written form found on Roman monuments.
- Compressed versions of the square capitals make them slightly more difficult to read due to their compressed nature.
- Square capital letters were commonly used for certain documents of expected performance, but everyday transactions were usually written in cursive.
- A further formalization of cursive writing, the half-letters marked the official beginning of the lowercase form of the alphabet, replete with ascending and descending order, 2000 years after the origin of the Phoenician alphabet.
- Bold letters were the font of the ancient fortress totems.
Classification of Text Types (Timeline)
- 1450 Black Letter: The earliest type of printing, its form is based on the hand-copied style used for books in northern Europe at the time.
- 1475 Old Style: Based on the lowercase letter forms used by Italian humanist scholars for copying books and the uppercase letter forms found on Roman ruins.
- 1500 Italic: Designed to echo contemporary Italian handwriting, the original italicized forms were condensed and compact and were later used to complement Roman script.
- 1550 Script: This typeface is not entirely suitable for lengthy text settings.
- 1750 Transition: This style is an improvement on the older style, partly due to advances in casting and printing techniques. The relationship between thickness and thinness is exaggerated.
- 1775 Modern: This style is a further rationalization of the older style. There is a strong contrast between thick and thin strokes.
- 1825 Square Serif: Fonts were originally serifs enclosed in thick brackets; as they evolved, the brackets were removed.
- 1900 Sans Serif: The serifs were eliminated.
- 1990 Serif / Sans Serif: Includes serif and sans serif letters.
Week 2:
LECTURE 3: Typo_3_Text_P1
In this seminar, Mr. Vinod first explained the typographic terminology of
fine-tuning the spacing of letters, which mainly refers to the automatic
adjustment of the spacing between letters. Then the professor introduced
us to the use of InDesign, and how to adjust the font size and spacing of
fonts with the shortcut keys in InDesign.
Mr. Vinod then explained the characteristics of the three text formats
and gave us concrete examples to show us how to choose a suitable text
format.
Then Mr. Vinod explained to us that we need to understand the different
senses of text, and introduced us to the knowledge of x-height, x-height
is relatively small or stroke relatively light compared to the x-height
is relatively large or stroke width is relatively large fonts on the
page to produce the quality of darker, when the x-height and the
proportion of the center of the ratio of almost 80, the readability of
the text will be increased.
Below, the professor explained text/line spacing and line length, and
the three factors in determining readability and legibility are that
word size correlates with line spacing, and line spacing correlates with
line length. Setting a text type is to make it easy to read for a long
period, so the font should be large enough to be able to be read easily,
there is also a need to control the line length to keep it between 55
and 65 characters, too long or too short will affect the reading.
Then introduced us to the type specimen book, the type specimen book is
for fonts, font size, font line spacing, font line length, and so on to
provide an accurate reference, and we listed examples to show us how to
show how to refer to the final print effect.
Sample Type
Specimen Sheet
Week 3 :
LECTURE 4: Typo_4_Text_Part 2
In this lecture, Mr. Vinod first introduced us to a symbol called
‘pilcrow'， which survives in medieval manuscripts, this symbol indicates
the space between paragraphs, Mr. Vinod gave an example of ‘line
spacing’， he illustrated that if the line spacing is 12 pt, then the
paragraphs are 12 pt apart, which can ensure cross alignment between
columns of text, cross alignment of text is when two columns of text are
aligned where the line of text is also aligned with the next column. Mr.
Vinod then showed us an example of text in Indesign and what kind of data
to enter so that the text is equally spaced and can be cross-aligned with
the next column.
Later Mr. Vinod introduced the use of indentation, which is used to save
space in the newspaper, indentation is imported in the form of you,
rather than creating the paragraph space used in the newspaper, the
purpose of indentation is to save space to reduce costs, so when using
indentation, we should not use the left justified right justified, when
the text makes sense to use the right indentation. Then Mr. Vinod
explained the problems to avoid in designing, widows are short lines
left alone at the end of a column of text and orphans are short lines
left at the beginning of a new column.When adjusting the spacing of
words, we should not move left and right more than 3 times, otherwise it
will look very abrupt in the text.
Mr. Vinod below explains how to display some simple examples of text in
a column of text, with different emphases requiring different contrasts.
One way is through the use of italics in highlighting, another way is to
bold fonts, by setting the same series of fonts to bold or medium, and
the other way is to change the font and make it bold fonts, Mr. Vinod
emphasized that when changing the color of the font, the font color can
only be used in black, cyan and magenta. When changing the font
thickness we have to be careful to reduce the poundage by 0.5.
Mr. Vinod then explained the correct typographic structure and showed 4
examples as a contrast to show a clear separation of content and text to
indicate new headings or with different headings and guided us on how to
indicate different hierarchies of information in an electronic
portfolio.
Afterwards, it was explained that cross-aligning headings and text fonts
enhances the rhythm of the page while expressing complementary vertical
rhythms, and finally Mr. Vinod showed how to do it.
Week 4 :
LECTURE 5: Typo_2_Basic
In this lecture, Mr. Vinod first introduced us to the terminology of
typeface typography. Mr. Vinod said that understanding the formal
components of a typeface can lead to a better understanding of a
specific type of font, and then explained three terms to us: baseline,
median, and x-height. The baseline is the imaginary line of a font's
visual appearance, and the median is the dotted line defining the
x-height, which is the height of the lowercase letters. The x-height is
the height of the lowercase letter ‘x’ in any font.
Strokes in fonts are introduced next, and the basic font forms are known
as strokes.
- Apex/ Vertex The point created by joining two diagonal stems.
- Arm Short strokes off 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 The rounded form that describes a counter. The bowl may be either open or closed.
- Bracket The transition between the serif and the stem.
- Cross Bar The horizontal stroke in a letterform that joins two stems together.
- Cross Stroke The horizontal stroke in a letterform that joins two stems together.
- Crotch The interior space where two strokes meet.
- Descender The portion of the stem of a lowercase letterform that projects below the baseline.
- Ear The stork extending out from the main stem or body of the letterform.
- Em/en Originally refering 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. Most often used to describe em/en spaces and em/en dashes.
- Ligature The character formed by the combination of two or more letterforms.
- Link The stroke that connects the bowl and the loop of a lowercase G.
- Spine The curved stem of the S
- Spur The extension the articulates the junction of the curved and rectilinear storke.
- Stress The orientation of the letterform, indicated by thin stroke in round forms.
- Swash The flourish that extends the stroke of the lettterform.
- Terminal The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat, flared, acute, grave, concave, convex, or rounded as a ball or a teardrop.
Then Mr. Vinod talked about the completeness of a font, a complete font
contains letters, numbers, and some punctuation marks
Then he spoke to us about upper and lower case and then upper and lower
case numerals, upper case numerals are also known as serif numerals, they
are the same height as the upper case letters and adjust the spacing of
the characters the same, they are successfully used in tabular material or
in situations that require uppercase letters. Lowercase numbers are also
known as old-style numbers or text numbers and they are set up with good
adjustable top and bottom heights.
Next, we were introduced to Roman Italics, Punctuation, and Font
Decoration. Mr. Vinod then described the various fonts. The Roman alphabet
is so named because the capital form is derived from inscriptions on Roman
monuments. Italic is based on the fifteenth-century Italian handwriting
form, and when not based on the handwriting form, it is referred to as
italic-bold.
Mr. Viond then explained to us how we need to study and use these nine fonts
well as we learn.
Nine fonts
Mr. Viond then explained to us how we needed to study and use these nine fonts
as well as learn. Then he explained to us that we need to understand that the
differences between fonts will show a rich diversity in x-height, line
thickness, relative strokes, and feeling. Choosing the right typeface can go a
long way to conveying the author's meaning.
WEEK 5:
LECTURE 6: Typo_5_Understanding
In this lecture, Mr Vinod explains to us how to understand the form of the
letters, in capital letters, although we look symmetrical there is no
symmetry, in the details, the stems connecting the serifs and each bracket
have a unique arc.
2.INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1xG1ArToHgbYJJ-WPYIUBhoi0cO4QI47G/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercises 1 -Type Expression
Ms. Vitiyaa asked us to vote for four words SMOKE, SPICY, and BLOOM FANCY
and we were asked to design fonts for these words based on the meaning of
the fonts and make sketches of the fonts, after which we had to animate
the fonts.
Before completing the font sketch, I collected some information about
these four fonts on the Internet and learned some elements in them as my
inspiration.
Fig 1.1 References
After that I designed the corresponding fonts according to the meanings of
the 4 words:
SPICY reminds me of flames and chilies, so I took these two
elements to make the letters have a feeling of flames, and there is
another one that I spelled in the shape of a chili pepper with the
fonts.
SMOKE reminds me of smoke and cigarettes, so I combined these two
elements to design a corresponding font.
BLOOM makes me think of flowers blooming, so I used the
letters of BLOOM as the main body of a flower, and I combined the letters
with petals.
FANCY reminds me of luxury, so I made the font a little bit more
high-class and glittery, and I combined it with some elements of jewelry.
Fig 1.2 Sketches
This was my first digitized work, but Ms. Vitiyaa said the font was too
distorted, so I dropped it and re-designed the final digitized work from
the sketch.
Fig 1.3 Digitalized Work
Ms. Vitiyaa then showed us how to digitize the four fonts using AI
tools. When digitizing the letter SPICY, I used the letters S and C to
create a feeling of flame and combined the flame with the letter Y in
the sketch to reflect the hot feeling of SPICY. SMOKE I changed the S
into a cigarette, changed different transparency to reflect the feeling
of smoke dispersal and then connected the four letters to express the
feeling of smoke dispersal. BLOOM I combined the word with the circle
track to form a circle and spelled out the shape of the flower. For
FANCY I split the letter C and used the curvature to connect the F to
give the feeling of a ribbon, and then used some tools to create a sense
of sophistication.
Fig 1.4 Final Digitalized Work
Fig 1.5 Final Digitalized Work （PDF）
Ms. Vitiyaa instructed us on how to animate fonts in week 4, This is my
first version of an animation-type expression, I wanted to show a flower
blooming but I thought it was a bit simple so I went back to Spicy for the
animation
Fig 1.6 Animated Type Expression
Moving on, I animated a combination of digitized fonts to create the
feeling of flames burning.
I created each frame of the animation in AI using the artboard and then I
imported the artboard into PS, at the beginning I set the delay to 0.1
seconds but I felt that each frame was too long and then I changed it back
to no delay.
Fig 1.7 Final Animated Type Expression
Fig 1.8 Final Animated Type Expression (PDF）
UPDATED
Fig 1.9 Animated Type Expression
Fig 1.10 Animated Type Expression (PDF)
Task 1:Exercises 2-Formatting Text
Kerning and Tracking
I first practiced kerning and tracking with my name using the 10 typefaces
provided.
Fig 2.1, Without kerning
Fig 2.2, With kerning
Fig 2.3, With kerning(2)
Layouts
For the layout, I referred to the video provided by the professor, firstly I
copied the provided text and used the 10 fonts, then I completed the text
layout based on what I learned about typography.
Fig 2.4, Process Diagram
After adjusting the technicalities, I explored different layouts:
Fig 2.5, Layouts
During the layout process, Ms Vitiyaa guided us that we could use the
golden ratio for the typographic layout. While laying out the layout I
went through several word spacing adjustments to avoid widows and orphans
in the paragraphs and learned how to make the curvature of the paragraphs
smooth.
Ms. Vitiyaa advised me on the layout of the text in my first version,
advised me whether I needed to annotate the images altogether or not,
asked me to follow the golden ratio, advised me on how to place the
images, and this is the new version that I have revised as per Ms.
Vitiyaa's advice.
Fig 2.5, Layouts(2)
FINAL Text Formatting Layout
HEAD
Font/s: Univers LT Std
Type Size/s: 55 pt
Leading: 66 pt
Paragraph spacing: 0
BODY
Font/s: Univers LT Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 20 mm top, 12.7 mm left + right 64.2 mm bottom
Columns: 4
Gutter: 5 mm
Fig 2.6, Final Text Formatting Layout
Final Text Formatting Layout (PDF)
Fig 2.7, Final Text Formatting Layout - Grids
Final Text Formatting Layout - Grids (PDF)
3.FEEDBACK
WEEK 1
Specific Feedback
General Feedback: In the first week, Ms Vitiyaa introduced us to the
typography class and taught us how to create our e-portfolio. Afterward, Ms.
Vitiyaa asked us to vote for four words for the font design.
WEEK 2
Specific Feedback: Ms. Vitiyaa and I explained the process of
designing a typeface. She explained that we could look for material on the
website, combine the material, and then complete my sketch
General Feedback: In the second week Ms Vitiyaa introduced us to how
to make sketches for our fonts and after that gave us instructions on how
to design font sketches.
WEEK 3
Specific Feedback: Ms. Vitiyaa demonstrated to us how to use AI to
electronically visualize our fonts, she showed that it is possible to
cancel outlines to move the letters apart, demonstrating how to guide the
font inside a fixed shape.
General Feedback: In the third week, Ms. Vitiyaa taught us the basics
of using ai and instructed us on how to digitise our sketch fonts.In the
third week, Ms. Vitiyaa taught us the basics of using ai and instructed us
on how to digitise our sketch fonts.
WEEK 4
Specific Feedback: Ms. Vitiyaa instructed me that my animated fonts
were distorted too much and pointed out that the extra graphics in the
fonts needed to be removed.
General Feedback: This week, Ms. Vitiyaa prescribed us how to make
animations, showed us some examples pointing out the problems and gave us
practice in making animations.
WEEK 5
Specific Feedback: Ms. Vitiyaa showed me how to use Indesign's toolbar for
isometric alignment and sketched us how to use the golden ratio for the
typographic layout of text.
General Feedback: This week, Ms. Vitiyaa and I were instructed on how we can
use Indesign for text typographic layout.
4.REFLECTIONS
Experience: I have been exposed to and learned a lot during
these weeks of learning task one. Not only have we learned how to use
Illustrator and Indesign, but we have also learned a lot of expertise about
the typography class in the weekly lectures. In task one we learned how to
design our fonts, this is my first contact with font design, so I still need
to learn more to design good fonts, I also encountered some difficulties in
the production, but it made me learn how to use Illustrator better and
accumulate better experience. In Task 1, we also learned how to do text
layout, Indesign was my first time to use it, so I collected a lot of
information when completing the text layout so that I learned something new.
Observations: In the process of type design, I discovered that
each of us expresses the same word differently. When creating text
typography, we have to debug the correct spacing of words and lines to
prevent orphans and lonely lines. While trying to do text typography myself,
I learned how to make it more interesting for readers to read in a way that
I never discovered before.
Findings: In completing Task 1, I discovered that typography is
important in our lives, and from the four-word typography, I found it very
interesting that we can create different typography for different words.
Trying to complete the text layout by myself, made me realize that when
designing a text layout, I need to pay attention to a lot of big and small
details to make our text more readable.
5.FURTHER READING
I read a book that explains design.
The book focuses on the basic concepts and importance of graphic design and
typography. The author explains that the essence of design is to solve
problems and that good design communicates information through a combination
of type, typography, and images. The authors point out that typography is an
independent art that requires proper text layout and detailing to ensure that
the information is easy to read. The authors then argue that successful
typography is the best presentation of the content, conveying the core of the
message through clean, clear design. In this book, the authors hope to help
readers understand and master the basic principles of the art of typography to
improve their design.
Fig 1.1
The book explains many of the terms of typography, which allows us to better
understand the components of each letter and makes it easier to recognize
specific fonts.
Fig 1.2
The book also explains to us the basic concepts of type measurement, and
I was interested in this part. The size of the text was originally
measured by the height of the lead letters. Font size is usually the
distance from the rise (top) to the fall (bottom) of a letter, measured
in ‘points,’ with each point being 1/72 of an inch, and six picas
equalling one inch.
The paragraph also mentions line spacing (leading), i.e., the spacing
between lines of text, which originally referred to the lead bars
between lines of text. Common ways of writing size include points and
pica, such as ‘6p7’ for 6 pica and 7 points. When writing sizes, font
size, and line spacing can be separated by a slash, e.g. ‘10/12 Univers’
represents a combination of 10-point font and 2-point line spacing. This
explains the font and line spacing choices for the text typesetting we
are studying now.
Fig 1.3
I studied the contents of this book, which discusses how the field of
typography is always evolving. The book explains the history, principles,
tools, and methods of typography. The key is the relationship between visual
organization, legibility, and form. Case studies and problem-solving
examples are included to help us understand the principles of typography.
The book is divided into 13 chapters, and I'm currently on chapter four or
five.
Fig 1.4
I remember the first chapter very well, where the evolution of typography is
outlined, the evolution of typefaces is described, and a timeline is shown. I
found it very interesting to see the fonts at different times in the diagrams.
The book says that the timeline emphasizes how typography has adapted and
evolved to meet changing social and technological needs.
Fig 1.5
Fig 1.6
Comments
Post a Comment