Typography (Week 1-Week 5) Task 1 (Exercise)
7.4.2023 -5.5.2023(Week 1-Week 5)
CHEN NAN/0363533
Bachelor of Design in Creative Media
Task 1(Exercise)
LECTURES
WEEK 1:
Class:
This was my first class. The teacher introduced himself and explained the
following points about the course:
First, the teacher added us to the Facebook group so that we could see the
teaching content he post.
2. Submit personal information.
3. Explain the composition of this course module and how to learn this course.
4. How the job is done and how it is submitted.
5. How to register a blog and how to use it.
Video 1 Typo_0_Introduction
Typography is a visual phenomenon in which designers visually adjust works
to express information in the way of making works.
Figure 1.1 Screenshot from the lecture video
Typography can be thought of as creating letters, so typography is the
creation of fonts or types, which can be shapes, letter shapes, or the
appearance of animated forms.
Figure 1.2 Screenshot from the lecture video
What happens to typography: Typography can be found on websites, in
applications, in signage, in products, in books, or in posters, so it's not
simply words.
Figure 1.3 Screenshot from the lecture video
Good typography is an art, what we need to learn is how to take the right
artistic road to develop excellent art.
The definition of typography shown in the source is the type of writing art
and technical language that can be clearly readable and engaging in a way
that when you see it you will be attracted to it and have positive feelings
about wanting to read it
The technical term for typography: font typeface
Font: a single font in a font.
Typeface: a typeface refers to the entire family of fonts/weights that share
similar characteristics/styles.
Figure 1.4 Screenshot from the lecture video
WEEK 2:
Class:
In the second week, the teacher explained the homework assigned last
week, commented on each of us and pointed out the problems in the
homework, and then showed us how to complete the next homework in
class.
Video 2 Typo_1_Development
Early letterform development: Phoenician to Roman
- Early writing used materials like wet clay and stone with tools like sharpened sticks and chisels.
- Uppercase letterforms evolved from these materials and tools.
- Uppercase letterforms are comprised of simple combinations of straight lines and pieces of circles.
- These letterforms have been used for nearly 2000 years.
Figure 2.1 4th century B.C.E
Figure 2.2 Evolution from Phoenician letter
- The Greeks created a writing style called "boustrophedon" that changed the direction of reading between the right to left and left to right.
- This change in direction also led to a change in the orientation of the letterforms used.
Figure 2.3 Direction of writing the Greek.
Figure 2.4 Greek fragment, stone engraving.
Hand script 3rd – 10th-century C.E.
Figure 2.5 4th/5th century: Square capitals
- Found in Roman monuments.
- Stroke variety was achieved through a reed pen held at an angle of about 60.
Figure 2.6 Late 3rd – mid 4th century: Rustic capitals
- Rustic capitals are a compressed version of square capitals.
- They allowed for twice as many words on a sheet of parchment and took less time to write.
- The pen or brush was held at an angle of approximately 30° off the perpendicular.
- Rustic capitals were faster and easier to write, but slightly harder to read due to their compressed nature.
Figure 2.7 4th century: Roman cursive
- Square and rustic capitals were reserved for documents of some intended performance.
- Everyday transactions were typically written in a cursive hand.
- Cursive hand forms were simplified for speed.
- This marks the beginning of what we refer to as lowercase letterforms.
Figure 2.8 4th - 5th century: Uncials
- Uncials borrowed some features from the Roman cursive hand, including the shapes of A, D, E, H, M, U, and O.
- The term "uncia" in Latin means a twelfth of anything, and some scholars believe that uncials were named after letters that were one inch high.
- It might be more accurate to consider uncials as small letters.
- The broad forms of uncials are more legible than rustic capitals when used in small sizes.
Figure 2.9 C. 500: Half-uncials
- Half-uncials mark the formal beginning of lowercase letterforms.
- These letterforms have ascenders and descenders.
- This formalization occurred 2000 years after the origin of the Phoenician alphabet.
- The cursive hand was further formalized to create half-uncials.
Figure 2.10 C. 925: Caloline minuscule
- Charlemagne issued an edict in 789 to standardize all ecclesiastical texts in Europe.
- The task of standardization was entrusted to Alcuin of York, Abbot of St Martin of Tours.
- The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization, and punctuation.
- This standardization set the standard for calligraphy for a century.
Blackletter to Gutenberg’s type
Figure 2.11 1300 Blackletter
- Charlemagne's empire dissolved, leading to regional variations in Alcuin's script.
- In northern Europe, a condensed strongly vertical letterform called Blackletter or Textura gained popularity.
- In the south, a rounder more open hand known as Rotunda gained popularity.
- The humanistic script in Italy was based on Alcuin's minuscule.
Text type classification
Figure 2.12 Text type
(From left to right)
1450 Blackletter, 1475 Oldstyle, 1500 Italic, 1550 Script, 1750 Transitional, 1775 Modern, 1825 Square Serif / Slab Serif, and 1990 Serif / Sans Serif
WEEK 3:
Class:
This week is a public holiday did not go to class.
- 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"
Figure 3.1
Screenshot from the lecture video
- InDesign is a publishing software that differs from illustrator in creating graphics. InDesign can create graphics in large numbers
Figure 3.2
Screenshot from the lecture video
- Use the shortcut Ctrl + shift +> to make letters larger. Use the shortcut Ctrl + alt +> to make text boxes larger.
Figure 3.3
Screenshot from the lecture video
- Normal tracking ,loose tracking and tight tracking.
Figure 3.4
Screenshot from the lecture video
- Designers always letterspace uppercase letters, but there has long been strong resistance within the type community to letterspace lowercase letters within text.
- 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.
Figure 3.5
Screenshot from the lecture video
- Flush left: This 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.
- Centered: This 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.
- Flush right: This 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.
- 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. 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.
- Beyond learning about the unique characteristics of each typeface-and understanding its place in history, it is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
- 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.
Figure 3.6
Screenshot from the lecture video
- Typography: Text/ Type Specimen Book
A type specimen book shows samples of typefaces in various different
sizes. Without printed pages showing samples of typefaces at different
sizes, no one can make a reasonable choice of type. You only determine
choice on screen when its final version is to read on screen.
A type specimen book (or ebook for screen) is to provide an accurate
reference for type, type size, type leading, type line length etc.
Figure 3.7
Screenshot from the lecture video
Week 4
Class: This week in class, the teacher gave us a review of the
homework, and told each of us the shortcomings in the work.
Video Typo_4_Text_Part 2
- Indicating Paragraphs
There are several options for indicating paragraphs. In the first example,
we see the 'pilcrow' (1), a holdover from medieval manuscripts seldom use
today.
Figure 4.1
Screenshot from the lecture video
- 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.
Figure 4.2
Screenshot from the lecture video
- Typically here the indent is the same size of the line spacing or the same as the
point size of your text.
Figure 4.3
Screenshot from the lecture video
- A widow is a short line of type left alone at the end of a column of text.
- An orphan is a short line of type left alone at the start of new column.
Figure 4.4
Screenshot from the lecture video
- 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, you might expect, require more care. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.
- 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.
Figure 4.5
Screenshot from the lecture video
Typography is two-dimensional architecture, based on experience and
imagination, and guided by rules and readability.
Video Typo_2_Basic
- Describing letterforms
As with any craft that has evolved over 500 years,
typography employs a number of technical terms. These
mostly describe specific parts of the letterforms. It is a good
idea to familiarize yourself with the lexicon.
Knowing a letterform's component parts make it much easier
to identify specific typefaces.
- Baseline The imaginary line the visual base of the letterforms.
- Median The imaginary line defining the x-height of letterforms.
- X-height The height in any typeface of the lowercase 'x.
Figure 4.6
Screenshot from the lecture video
- Apex / Vertex The point created by joining two diagonal stems (apex above and vertex below)
Figure 4.7
Screenshot from the lecture video
- Arm short strokes off the stem of the letterform, either horizontal (E, F, L ) or inclined upward (K, Y)
Figure 4.8
Screenshot from the lecture video
- 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 em in 48 points, for example). An en is half the size of an em. Most often used odescribe em/en spaces and em/en dashes.”
Figure 4.9
Screenshot from the lecture video
- The orientation of the letterform, indicated by the thin stroke in round forms.
Figure 4.10
Screenshot from the lecture video
- 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).
Figure 4.11
Screenshot from the lecture video
- 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.
- Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.
Figure 4.12
Screenshot from the lecture video
- Punctuation, miscellaneous characters Although 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.
Figure 4.13
Screenshot from the lecture video
- What is worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique.
Figure 4.14
Screenshot from the lecture video
You can't be a good typographer, if you aren't a good reader.
——Stephen Cole
- Typography: Letters I Understanding letterforms
- 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.
Figure 4.15
Screenshot from the lecture video
- The complexity of each individual letter form is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces- Helvetica and Univers.
Figure 4.16
Screenshot from the lecture video
- The x-height generally describe the size of the lowercase letterforms. 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.
Figure 4.17
Screenshot from the lecture video
- One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics. It also gives you a glimpse into the process of letter-making.
Figure 4.18
Screenshot from the lecture video
- All the font changes
Figure 4.19
Screenshot from the lecture video
On the streets, you look at girls [ or boys ]. I look at type.
-Hannes von Dohren
- In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designers.
- Printing is used for reading in print long ago.
Figure 4. 20
Screenshot from the lecture video
Type for screen
- Fonts now used on the web have been optimized to:
1. Increased readability
2. Higher X height or reduced rise height
3. Wider letter forms and more open counters heavier, heavier
fine strokes,
modified curves and angles for some designs
- especially for typefaces intended forsmaller sizes : more open spacing.Helps improve readability: such us: the web, e-books, e-readers, and mobile devices.
- Front size for screen
- If we're going to read it, we usually set it at about 10-pixel, if it's far away in this case we can set it at 20 pixels. The best font size for screen reading is between 20 and 24.
Figure 4. 21
Screenshot from the lecture video
- Pixel differential between devices
Figure 4. 22
Screenshot from the lecture video
- Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.
Figure 4. 23
Screenshot from the lecture video
“A great designer knows how to work with text not
just as content, he treats text as a user interface.
- Oliver Reichenstein
week 5
TEXT FORMATTING
1. Is kerning and tracking appropriately done? yes
2. Does the font size correspond to the line-length, leading & paragraph spacing yes
3. Is the alignment choice conducive to reading? yes
4. Has the ragging been controlled well? yes
5. Has cross-alignment been established using base-line grids? yes
6. Are widows and orphans present? yes
---------------------------------------------------------------
INSTRUCTIONS
------------------------------------------------
(EXERCISES)
WEEK 1
For task 1, The teacher posted six words on Facebook, We need to choose four
words from those six words, Sketch to show their meaning.
The word I choose is "destroy", "split", "love", and "party".
Figure 1, sketches of "split" (week 1 07-Apr)
Figure 2, sketches of "destroy" (week 1 07-Apr)
Figure 3, sketches of "love" (week 1 07-Apr)
Figure 4, sketches of "party" (week 1 07-Apr)
WEEK 2
For task 2, We need to render four drafts in the Al.
step
Fig. 2.1
Digitisation Process for Destroy, (Week 2, 14/4/2023)
I put the font upside down, breaking up each font to make it feel even more
destroyed.
Fig. 2.2 Digitisation Process for
Split, (Week 2, 14/4/2023)
The fonts were cut and changed to different colors to look more like they
were separated.
Fig. 2.3
Digitisation Process for Destroy, (Week 2, 14/4/2023)
The loving heart expresses its meaning
Fig. 2.4 Digitisation Process for
Party, (Week 2, 14/4/2023)
Parties are fun and I use interesting fonts to mix them up and make the
words look more lively.
Fig.2.5 PDF Final Type Expressions (Week 2, 14/4/2023)
Fig. 2.6 JPG Final Type Expressions (Week 2, 14/4/2023)
WEEK 3
For task 3, We need to bring last week's pictures into action.
step
- I animate with the word "destroy" and create eight frames to express this animation.
Fig. 3.1 Type Expressions (Week 3, 21/4/2023)
- I finished up with 9 frames of animation.
- I import each improved frame into ps for editing. Then arrange each frame neatly.
Fig. 3.2 Type Expressions (Week 3, 21/4/2023)
- Finally complete the animation and export.
Fig. 3.3 Type Expressions (Week 3, 21/4/2023)
Fig. 3.4 GIF Final Type Expressions (Week 3, 21/4/2023)
Modify
- Under the guidance of the teacher, I added a few more frames in the early stage of the animation to better present the initial state of the words.
Fig. 3.5 Modify Type Expressions (Week 3, 28/4/2023)
Fig. 3.6 GIF Final Modify Type Expressions (Week 3, 28/4/2023)
WEEK 4
Kerning and Tracking
- I used 10 fonts given by the teacher to edit my name.
Fig. 4.1 Kerning and Tracking
Without kerning
(Week 4, 28/4/2023)
Fig. 4.2 Kerning and Tracking
adjusted kerning (Week 4, 28/4/2023)
Fig. 4.13 Final Kerning and Tracking (Week 4, 28/4/2023)
- I use ID to typeset the book format
Fig 4.4, Process, (Week 4, 28/4/2023)
Fig 4.4, Process, (Week 4, 28/4/2023)
I increased the spacing of the text and used left alignment to make the image look cleaner.
Fig 4.5, Layouts, (Week 4, 28/4/2023)
Fonts: Univers LT Std
Point size: 10 pt (body text), 13 pt (captions), 37 pt (headline)
No. of characters in a line length: Average 61
Leading: 12 pt (body text)
Paragraph spacing: 12 pt
Alignment: Left align
Columns: 2
Margins: 12.7
Fig 4.6, Final Layouts PDF, (Week 4, 28/4/2023)
Fig 4.7, Final Layouts PDF, (Week 4, 28/4/2023)
WEEK 5
- I should move the title up the page, there's too much distance at the top, the main problem is that the spacing of the letters is too big, so I need to adjust all the spacing of the characters, to zero, up to three times or down to three times, no more.
Fig 4.8, Final JPEG , (Week 5, 5/5/2023)
Font/s: Univers LT Std
Type Size/s: 37 pt
Paragraph spacing: 0
Body
Font/s: Univers LT Std
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per line: 55
Alignment: left justified
Character spacing：-15
Margins: 12 mm top+left + right + bottom
Columns: 2
Gutter: 5 mm
general feedback:we should make the sketch small and mark the
number, which is more conducive to our better thinking to create more
ideas and avoid confusion in the picture. In the early stage, we should
create according to the ideas taught by the teacher. The pattern should
represent the meaning of the words, and we should not distort and use too
many patterns, but use some points and lines.
Specific feedback:I should move the title up the page, there's too
much distance at the top, the main problem is that the spacing of the
letters is too big, so I need to adjust all the spacing of the characters,
to zero, up to three times or down to three times, no more.
In each class lecture, I saw the works of other students, the advantages and
disadvantages of their works have been pointed out to us by the teacher, their
ideas are very interesting, I also learn from the experience, so as to apply
it to my own works.
Margins: 12 mm top+left + right + bottom
Columns: 2
Gutter: 5 mm
Fig 4.9, Final Modify PDF, (Week 5, 5/5/2023)
Fig 4.10, Final JPEG, (Week 5, 5/5/2023)
Fig 4.11, Final Modify PDF, (Week 5, 5/5/2023)
---------------------------------------------------------------
FEEDBACK
WEEK 2
Specific feedback: For the sketches of Destroy, the first sketch
will better represent the meaning compared to the others. For the sketches
of Split, the first sketches are better than the others. For the remaining
sketches, the ideas should be sketched using the typefaces provided by Mr.
Vinod.
General Feedback:This week is a public holiday and there are no
classes, so we should continue to complete homework and update our
bloggers.
General Feedback:The animation should have many frames to make it
flow smoothly, and more frames should be added at the end of the animation
to prevent jiggle.
WEEK 3
WEEK 4
Specific feedback:My letter is already broken in its normal state,
I should show it in its normal state, then break it again, there is no
contrast in the animation, I should show it in its original state.
General Feedback: Text In many cases, it is not recommended to
center text, if centered, it will make the text difficult to read. If the
spacing of the letters on each line is uneven or unbalanced, use lowercase
uppercase letters instead of uppercase letters to make each line even.
Cross alignment of each line is a must. Avoiding bodoni and futura light
fonts in the text can make it difficult to read.
WEEK 5
---------------------------------------------------------------
REFLECTIONS
Experience
During these exercises, I learned something new. At the beginning, I did not
know how to use Adobe software. After a period of learning, I became
relatively proficient in using it, and I learned the typography of fonts.
Through task 1, I learned about character mine removal, line spacing
character adjustment, font selection, etc.
Observation
Findings
Through learning, I know that typography is an important part of life. We need to pay attention to many details in typesetting design, and we need to consider many factors when designing and typesetting fonts. There are a lot of rules and theoretical knowledge for us to discover and learn.
The author of this book is Jan White. The content of this book is some
knowledge of typography, focusing on the sense of order and structure in
logic and vision. By adjusting the margins and creating more white space,
maybe the picture will get better.
Through learning, I know that typography is an important part of life. We need to pay attention to many details in typesetting design, and we need to consider many factors when designing and typesetting fonts. There are a lot of rules and theoretical knowledge for us to discover and learn.
---------------------------------------------------------------
FURTHER READING
Figure 5.1 Computer Typography Basics
There are many different designs of typefaces, which generally fall into
two categories: serif and sans serif. But for modern life there may be a
need for more fonts.
Serif typefaces: Serif typefaces are generally used in the body of an
article, "serifs," which give the appearance of bold letters at the end.
It is usually divided into three categories: Oldstyle,Modern and S All Hot
Serif.
OLDSTYLE
Oldstyle is based on classical Roman inscriptions. The letters are very open, wide, and round with pointed serifs and a pleasing contrast between the heavy and light strokes.
Figure 5.2: Examples of Sert fonts
OLDSTYLE
Oldstyle is based on classical Roman inscriptions. The letters are very open, wide, and round with pointed serifs and a pleasing contrast between the heavy and light strokes.
MODERN
Their name not withstanding, Modern fonts are based on fonts designed over 200 years ago. They have a greater degree of mechanical perfection than Oldstyle fonts, and a greater distinction between the heavy/light strokes, and thin/squared off serifs.
Their name not withstanding, Modern fonts are based on fonts designed over 200 years ago. They have a greater degree of mechanical perfection than Oldstyle fonts, and a greater distinction between the heavy/light strokes, and thin/squared off serifs.
SQUARE SERIF
Slab Serifs are a contemporary style used mainly for small amounts of text, such as advertising copy, subheads, and headlines. The letters have square serifs and mostly uniform strokes with little contrast.
Slab Serifs are a contemporary style used mainly for small amounts of text, such as advertising copy, subheads, and headlines. The letters have square serifs and mostly uniform strokes with little contrast.
评论
发表评论