Typography - Task 1 Exercise 1&2
Tuesday,Oct 10 2023
2023.09.26-2023.10.17/Week1-Week 4
Yang Jiayi /0369288
Typography/Bachelor of Design in Creative Meadia
LIST
2.LECTURE
Lecture 1 - Typo_0: Introduction
Lecture 2 - Typo_1: Development
Lecture 3 - Typo_3: Text_P1
Lecture 4: Text (Part 2)
Lecture 5 - Typo_2_Basic
Lecture 6 - Letters
3.EXERCISES
Task1 :Exercise-Fonts design
Animation Fonts
Task1 :Exercise2-Text Foematting
Task1 :Exercise2-Text Foematting
4.FEEDBACK(week1-week7）
5.REFLECTIONS
6.FURTHING READING
LECTURE 1
Introduction
When we write a title for a book or a newspaper, we pay attention
to the spacing between the letters of a single word,The difference between software INDesign and illustrator is that we
create illustrator graphics that can be illustrations or logo
graphics, and we tend to prefer INdesign when we're working with a
lot of text or limited text. The size of the margins we usually
choose to print inside the A4 paper is basically the space around
which the text and information are placed correctly and it's
important, says the Mr. Vinod, that we make sure we have enough
margins. When entering words, there are some unusual Spaces between
letters. To adjust the spacing between letters, you can use left and
right arrows. If you want to move slightly, you can go to units
Increments or type in preference. When using uppercase letters, the
spacing is usually adjusted to make it more aesthetically pleasing.
Normal tracking is that the letter spacing and sentence adjustment
are correct, but it will increase or decrease the readability of the
text, so we should pay attention to the word spacing when
capitalized.
When capital letters are used in the title,
grid spacing is usually added to give him more breathing
room,Writing from left to right is usually the best way to textualize.
Avoid right-centered text, which can be difficult to read, so use
centered text sparingly in small numbers of copies or texts
Typography is a fundamental aspect in any design
studies. It is the creation of typefaces and typefamilies. It
is the art and technique of arranging type to make written
language legible, readable, and appealing when displayed.
Typography has evolved over 500 years, orginating from calligraphy,
evolving to lettering, and finally typography. Calligraphy refers to
the writing style, meanwhile lettering is when we draw the letters
out. Typography employs a number of terminologies, conventions, and
unwritten rules (our own judgement) depending on our disposition or
influences with regard to style. Typography holds a bearing in
how we present ourselves, present our information and how to
communicate effectively. It is practiced by anyone who arranges words,
letters, numbers, and symbols for publication, display, or
distribution. Until the digital age, typography was a specialized
field. The digital era allowed more people to dabble in the field and
hence resulted in the decline of typographic quality.
Important terminologies include font and typeface. Font refers to the
individual weight within the typeface while typeface refers to theentire
family of fonts/weights thatshare similar characteristics/style.
Early Letterform Development: Phoenician to Roman
|
| Fig. 1.1 Evolution from Phoenician Letter |
.png)
|
|
Fig. 1.2 Phoenician to Roman |
|
| Fig. 1.3 Boustrophedon |
The early letterform development began with the
Phoenecians, whom like other Semitic people, wrote from right to left.
The Greeks then developed a style of writing called "boustrophedon"
(how the ox ploughs), which meant that the lines of text read
altenartively from right to left and left to right, also without any
lettspace or punctuations. Later on the Greeks would move to a strictly
left-to-right writing.
Etruscan (and then Roman) carvers work in marble
painted letterforms before they inscribethem. 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.
Handscripts from the 3rd to 10th Century
|
|
Fig. 1.4 Square Capitals (4th/5th century) |
|
| Fig. 1.5 Rustic Capitals (Late 3rd-mid 4th century) |
Rustic capitals is the compressed version of the
square capitals, thus it was easier to write but harder to read. Rustic
capitals is allowed for twice as many words on a sheet of parchment and
took far less time to write. The pen or brush was held a an angle of
approximately 30 degree off the perpendcular. Although rustic capitals
were faster and easier to write, they were slightly harder to read due
to their compressed nature.
|
| Fig. 1.6 Roman Cursive (4th century) |
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
were simplified for speed. We can see here the beginning of what we
refer to as lowercase letterforms. The development of the lowercase
letterform is a result of writing uppercase letterforms quickly.
|
| Fig. 1.7 Uncials (4th-5th century) |
Uncials incorporated some aspects of the Roman
cursive hand, especially in the shape of the A, D, E, H, M, U, and Q.
'Uncia' s Latin for a twelfth of anything: as a result, some scholars
think that uncials refer to letters that are one inch (one twelfth of
foot) high. It might, however, be more accurate to think of uncials
simply as small letters. The broad forms of uncials are more readable
at small sizes than rustic capitals.
|
| Fig. 1.8 Half-uncials (C. 500) |
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. 1.9 Caloline Miniscule (C. 925) |
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, France. The monks rewrote the texts using both majuscules
(uppercase), miniscule, capitalization and punctuation which set the
standard for calligraphy for a century.
Blackletter to Gutenberg's Type
|
| Fig. 1.10 Blackletter Textura (C. 1300) |
With the dissolution of Charlemagne's empire
came regional variations upon Alcuin's script. In northern europe, a
condense strongly vertical letterform know as Blackletter or textura
gained popularity, called 'rotunda'. The romanistic script in Italy is
based on Alcuin's miniscule.
|
| Fig. 1.11 Text Type Classifications |
LECTURE 2
Text
|
| Fig. 2.1 Kerning and Letterspacing |
Kerning refers to the automatic adjuztment 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'.
|
| Fig. 2.2 Normal tracking, tight tracking, and loose tracking |
Uppercase letterforms are drawn to be able to stand on their own,
whereas lowercase letterforms require the counterform created between
letters to maintain the line of reading.
.png)
|
| Fig. 2.3 Flush Left |
The flush left format most closely mirrors the asymmetrical experience
of handwriting. 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. Gray value is text on a white page.
.png)
|
| Fig. 2.4 Centered |
The centered format imposes symmetry upon the text, assigning equal
value and weight to both ends of any line. It transforms fields of
text into shapes, thereby adding a pictorial quality to material that
is non-pictorial by nature. Because centered type creates such a
strong shape on the page, its important to amend line breaks so that
the text does not appear too jagged.
.png)
|
| Fig 2.5 Flush Right |
The flush right format places emphasis on the end of a line as opposed
to its start. It can be useful in situations (like captions) where the
relationship between text and image might be ambiguous without a
strong orientation to the right.
.png)
|
| Fig 2.6 Justified |
Like centering, the justified format imposes a symmetrical shape on
the text. It is achieved by expanding or reducing spaces between words
and, sometimes, between letters. The resulting openness of lines can
occasionally produce ‘rivers’ of white space running vertically
through the text. Careful attention to line breaks and hyphenation is
required to amend this problem whenever possible.
Textures
|
| Fig 2.7 Anatomy of a Typeface |
.png)
|
| Fig 2.8 Different typefaces with different gray value |
Type that calls attention to itself before the reader can get to the
actual words is simply interference, and should be avoided. Quite
simply if you see the type before you see the words, change the type.
Consider, too, the different textures of these typefaces. Type with a
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
fundamental for creating successful layouts.
In determining type sizes, text type should be large enough to be read
easily at arms length—imagine yourself holding a book in your lap.
|
| Fig. 2.9 Leading and Line Length |
Leading is the space of each line of text. Text that is set too
tightly encourages vertical eye movement; a reader can easily loose
his or her place. Type that is set too loosely creates striped
patterns that distract the reader from the material at hand.
Appropriate leading for text is as much a function of the line length
as it is a question of type size and leading. 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
impairs reading.
LECTURE 3
Indicating Paragraphs
There are several options for indicating paragraphs. In the first
example, we see the ‘pilcrow’ (¶), a holdover from medieval
manuscripts seldom use today. The example above displays a ‘line
space’ (leading*) between the paragraphs. Hence if the line space is
12pt, then the paragraph space is 12pt. This ensures cross-alignment
across columns of text.
The example above displays the standard indentation. Typically
here the indent is the same size of the line spacing or the same as
the point size of your text.
The method of extended paragraphs above creates unusually wide columns
of text. Despite these problems, there can be strong compositional or
functional reasons for choosing it.
Widows and Orphans
A widow is a short line of type left alone at the end of a column of
text while an orphan is a short line of type left alone at the start
of new column. In justified text both widows and orphans are
considered serious gaffes. Flush right and ragged left text is some
what more forgiving towards widows, but only a bit. Orphans remain
unpardonable.
The only solution to widows is to rebreak your line endings through
out your paragraph so that the last line of any paragraph is not
noticeably short. Orphans, however, require more care. Careful
typographers make sure that no column of text starts with the last
line of the preceding paragraph.
Highlighting Text
Different kinds of emphasis require different kinds of contrast. When
highlighting text by placing a field of colour at the back of the
text, maintaining the left reading axis (right example) of the text
ensures readability is at its best. Sometimes it is necessary to
place certain typographic elements outside the left margin of a column
of type (extending as opposed to indenting) to maintain a strong
reading axis.
Quotation marks, like bullets, can create a clear indent, breaking the
left reading axis. Compare the indented quote at the top with the
extended quote at the bottom.
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. A typographers task is to make sure these
heads clearly signify to the reader the relative importance within the
text and to their relationship to each other.
A head 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.
The B head here is subordinate to A heads. B heads 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.
The C heads, although not common, highlights specific facets of
material within B head text. 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.
Putting together a sequence of subheads creates hierarchy. There is no
single way to express hierarchy within 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.5pts).
Here, one line of headline type cross-aligns with two lines of text
type, and (right; bottom left) four lines of headline type cross-align
with five lines of text type.
Lecture 4: Text (Part 2)
If you look at the middle part between the line
and the baseline, the chart below is called the X-height，This is the height of the ascent，Below the baseline is your
descent height.Baseline The imaginary line the visual base of the
letterforms.
Fig. 1.51 Descender.
Fig. 1.52 Ear.
Fig.
1.53 Em/
en.
Fig. 1.56 Ligature.
Fig. 1.57 Link.
Fig. 1.58 Loop.
Fig. 1.59 Serif.
Fig. 1.60 Shoulder.
Fig. 1.61 Spine.
Fig. 1.62 Spur.
Fig. 1.63 Stem.
Fig. 1.64 Stress.
Fig. 1.65 Swash.
Fig. 1.66 Tail.
Fig. 1.67 Terminal
Median The imaginary line defining the x-height of letterforms.
X-height The height in any typeface of the lowercase 'x'.giving equal height impression = lowercase slightly above
capital letters → optical adjustment
Pilcrow:A handwritten or typographical character used to indicate a paragraph. It is also called the paragraph mark (or sign or symbol), paraph, or blind P. The pilcrow may be used at the start of separate paragraphs or to designate a new paragraph in one long piece of copy.
Leading: Line space between
paragraphs. As an example, if your text pt. size is
10, your leading will range from either 12/12.5/13 (2-3
pts. larger). If the leading is 12pt, your paragraph
spacing should also be 12pt. The purpose of this is to
ensure cross-alignment across columns of text.
4. Stroke: Any line that defines the basic letterform.
5. Apex / Vertex: The point
created by joining two diagonal stems
(apex above and vertex below).
Fig. 1.41 Apex / Vertex.
6. Arm: Short strokes off the
stem of the letterform, either horizontal
(E, F, L) or inclined upward (K, Y).
7.
Ascender: The
portion of
the stem
of a
lowercase
letterform
that
projects
above the
median.
Fig. 1.43 Ascender.
8. Barb: The
half-serif finish
on some curved
stroke.
Fig. 1.44 Barb.
9. Beak: The half-serif
finish on some
horizontal arms.
Fig.
1.45 Beak.
10. Bowl: The rounded form that
describes a counter. The
bowl may be either open or
closed.
Fig.
1.46 Bowl.
11. Bracket: The
transition between
the serif and the
stem.
15. Descender: The portion
of the stem of a
lowercase letterform
that projects below
the baseline.
16. Ear: The
stroke extending out from the
main stem or body of the
letterform.
17. 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 em in 48
points, for example). An en
is half the size of an em.
Most often used to describe
em/en spaces and em/en
dashes.
18.
Finial: The rounded
non-serif
terminal to a
stroke.
Fig.
1.54 Finial.
19. Leg: Short stroke
off the stem of the
letterform, either
at the bottom of the
stroke (L) or
inclined downward
(K, R).
Fig. 1.55 Leg.
20. Ligature: The character formed by
the combination of two or more
letterforms.
21. Link: The
stroke that connects the bowl
and the loop of a lowercase G.
22. Loop: In some
typefaces, the bowl created in the
descender of the lowercase G.
23. Serif: The
right-angled or oblique foot at
the end of the stroke.
24. Shoulder: The
curved stroke that is not part of
a bowl.
25. Spine: The
curved stem of the S.
26. Spur: The
extension articulates the junction
of the curved and rectilinear
stroke.
27. Stem: The
significant vertical or oblique
stroke.
28. Stress: The
orientation of the letterform,
indicated by the thin stroke in
round forms.
29. Swash: The
flourish that extends the stroke
of the letterform.
30. Tail: The
curved diagonal stroke at the
finish of certain letterforms.
31. Terminal: The self-contained finish
of a stroke without a serif. This
is something of a catch-all term.
Terminals may be flat (‘T’ above),
flared, acute, (‘t’ above), grave,
concave, convex, or rounded as a
ball or a teardrop (see
finial).
Lectures5
The example here displays a ‘line
space’ (leading) between the
paragraphs. Hence if the line
space is 12pt, then the paragraph
space is 12pt. This ensures
cross-alignment across columns of
text.
Fig 4.2 Line Space Paragraph
Indicator
Fig 4.3 Line space vs leading
The example here displays the standard indentation.
Typically here the indent is the same size of the line
spacing or the same as the point size of your text.
|
| Fig 4.4 Standard indentation |
The method of extended paragraphs below creates unusually
wide columns of text. Despite these problems, there can be
strong compositional or functional reasons for choosing it.
|
| Fig 4.5 Extended paragraphs |
Lecture 6 : Letters
Understanding letterforms
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.
EXERCISES
TASK1: Exercises-Font Design
Sketches
We had to choose four out of six words that were voted: fire,freeze,dizzy,cry
We had to choose four out of six words that were voted: fire,freeze,dizzy,cry
Fig 2.1 Type Expression Sketch, Week 1
Digital Fonts
We need to digitize the draft words we made last week using the prescribed ten fonts and simplify our design
We need to digitize the draft words we made last week using the prescribed ten fonts and simplify our design
|
DESIGN IDEAS:
For the first word“ Fire”，I
wanted to make it obvious that the fire was
burning, so I used the pleating tool in AI
to create the feeling of a raging flame
underneath.
For the second word, “dizzy”， the original
meaning of the word is vertigo, so my design
idea was to give the feeling of overlapping
vertigo, and I used a cutting tool to
complete the final creation
For the third word, I obviously wanted to
make the effect of lightning, so I added
lightning drawn by myself with the pen tool
on the basis of the original word, and then
copied it.
Last word, the design concept of cry is
that people cry because they have trouble,
so the color half tone in pixelation is used
to present the effect, and the slowly
disappearing dots represent the trouble that
slowly disappears, and when the trouble is
less, they will no longer cry
Animation Fonts
We need to turn the digital fonts we designed into simple
animation forms, and at the same time simplify the
fonts,like fire
Task1 :Exercise2-Text Foematting
We need to use text to format text and titles, making it
easy to read the entire page.
Fig 2.4 Typesetting Type Expression of Illusion, Week
5
Fig 2.5 Typesetting Type Expression of Illusion, Week 5
(24/10/2023)
Font size:9 Font :Univers LT Std
Line spacing：14point
Pair spacing：vision Presegment
spacing：4.939mm
Font size:10 Font :Univers LT Std
Line spacing：12point Pair spacing：vision
Presegment spacing：4.233mm
Page：6
Column number：2
Breadth：200
Altitude：200
Amount of bleeding:10mm
Font size:10 Font :Univers LT Std
Line spacing：12point Pair spacing：vision
Presegment spacing：4.233mm
Page：6
Column number：2
Breadth：200
Altitude：200
Amount of bleeding:10mm
Fig 2.6 Typesetting Type Expression of Illusion,
Week 6
Feedback
week 1 -The main task of the first week is to create a
blog.I tried to learn how to create a blog by
watching my teacher's videos,I also read a lot of
blogs created by good students .
week 2 -
I tried to choose three of the prescribed words to
make the font design,I used the most common pen tool
in ai. For my “fire”artwork,I wanted to make a design
using the meaning of the words themselves,In my design,
I made little people warming themselves on a fire, and
there were a bunch of matches piled together.But what I
didn't know was that the homework in the first week was
to creat on the basis of the fonts gieven by the
teacher.I will do it again as soon as possible,and the
quality will be higher.And for my” freeze”I used a basic
stylistic format,Make it by constantly overlaying
gradients,about “dizzy”this word,I tried to use
reflections in this font.
week 3 - For the animation I made, I walked step by step
according to the video, but there was not much
creativity, I tried to make a better one, but when I saw
the font moving, it was interesting.
week 5 -
In class this week, I heard a sentence
said by the professor in his comments on other students.
When we express our opinions in class, we should be brave in
the face of the teacher and learn how to manage tension and
anxiety, so that we will not be afraid in front of customers
in the future.When the professor commented on the layout
assignment I did this week, he asked me to modify the title
design. First, the title design should highlight what I want
to express and have content; second, a word rather than a
letter should be highlighted in a title; third, the last
paragraph of my assignment was singled out and needs to be
modified. Finally, the teacher said I could put my idea on
the word build.
Week 6
See the task 2
REFLECTIONS
Experiences: This is my first time to write a blog and contact with typography, and there are many things I don't understand. I came here a few weeks later than everyone else, so I am also learning excellent works and blogs. We initially used AI and PS to make fonts, and animated fonts in PS, which I think is interesting. I design my fonts by the meanings of four words
Observations:When I finished my preliminary work in AI and got in touch with it for the first time, sometimes I didn't have the ability to reflect the effect I wanted. This is the difficulty I encountered in the past two weeks. I observed other people's works, which also gave me an idea
Finding:I learned the basic tools in AI, and also initially tried ps animation, so that I slowly had ideas from the novice Xiaobai
FURTHING READING
Reference :
Kane J. (2003), A type primer 2nd Edition, Pearson
Education, Inc.
Based on the list of books given, I have chosen A type
primer to begin my further reading.
Week 1
Chapter 1 Basics - Describing Letterforms
This start of this chapter introduces the basic
letterform components known in typography. (Pg
2-7)
Design is solving problems. Graphic design is
solving problems by making marks. Type is a uniquely
rich set of marks because it makes language visible.
Working successfully with type is essential for
effective graphic design.The full font of a typeface contains much more than
26 letters, 10 numerals, and a few punctuation
marks.
Week2
Chapter 1 Basics - Describing Typefaces
The basic letterform style, so called
because the uppercase forms are derived from
inscriptions on Roman monuments. When used to describe a
type style, the term 'roman' is always lowercase. In
some type-faces, a slightly lighter stroke than raman is
called 'book',there are six types of
typefaces:roman,Italic，Boldfece,light，condensed,Extended.
Comparing the typefaces
Image, history, and meaning meet
in every aspect of typography, even the simplest
of letterforms.
The ten typefaces displayed opposite represent
500 years of type design. The me and women who
rendered them all sought to achieve two goals:
easy readability and an appropriate expression
of contemporary esthetics.
Chapter 2 -Development
An alphabet is a series of culturally agreed upon
marks-letters - that represent specific
sounds. Being able to write -to document
speech - meant knowing the thousands of marks that
represented all the things in the known world.
Chapter 2 Development - Text typeface
classification
As you have seen, type forms have developed in
response to prevailing technology, commercial
neel's and esthetic trends. Certain models have
endured well past the cultures that spawned them.
Recognizing the need to identify the stages of
type-form development, typographers have come up
with a number of systems to classify typefaces,
some of them dizzying in their specificity.This
system offers a useful, if simpli-fied,
description of the kinds of type you will most
often encounter working with text As your
experience with type develops, you should
definitely familiarize yourself with other, more
specific, systems.
It lasted from 1450 to 1990.
Week 3
Chapter 3 Letters, Words, Sentences
Here are two forms of a relatively simple letter -
the uppercase 'a' Both suggest the symmetry of the
form as someone might print it, but neither is in fact
symmetrical at all. It's easy see the two different
stroke weights of the Baskerville form .Just as important as hscognizing specific letterforms
is developing a sensitivity to the counterform (or
counter) - the space described, and often contained,
by the strokes of the form.
Making sentences ,finding sence
One way to make sentences (or, for that matter,
sentence fragments) more expressive is to reinforce
the sense of the words through type play. The examples
shown here provide various methods of supporting (or
subverting) the aut he's intent, by manipulating the
size, weight, and placement of words.
Week 4
Chapter 4 Text
Tracking: kerning and letterspacing
Today the term
"kerning' describes the automatic adjustment of space
between letters as prescribed by a table embedded
within the digital font. Because kerning removes space
between letters, it is often mistakenly referred to as
"letterspacing! In fact, letterspacing means adding
space between letters, not removing it. For our
purposes, the term 'tracking, used in most computer
programs that incorporate type-setting, best describes
the addition.
Week 5 Olumnar organization
Olumnar layouts
It is often useful to think of your text area
divided into columns - consistent horizontal
intervals that allow for more than one field
of text per page. Working with columnar
layouts helps you maintain a manageable line
length and allows white space onto the page in
places other than the margins. Keep in mind
the dynamic relationship between type size,
leading, and line length. Altering the last
always affects the first and the second.
Week 6 Grid systems
A grid is a pattern of horizontal and vertical
lines that intersect at regular intervals. In
typographic design, a grid system is a method
for organizing and clarifying text on a page,
and amplifying its meaning.A grid is not about painting a page -
creating the perfect composition within the
frame of the paper trim.We need to understand
,
• the amount of text/images
• the kinds of text/images
• the levels of meaning and importance within the
text/images
• the relationship between text and images
• the relationship between text/ images and the
reader.
Components of the grid
Field
The basic component of any grid.
The height of a field is calculated as a
multiple of the text leading. Its width is
determined by the length of a line of
text
评论
发表评论