Typography - Task 1: Exercises 1 & 2
⭐ 25/9/2023 - 29/10/2023 (Week 1 - Week 6)
🎀 Yan Zhi Xuan | 0369425
💜 Typography | Bachelor of Design (Hons) in Creative Media | Taylor's University
📚 Task 1: Exercises 1 & 2
1. LECTURES
The lecture video playlist: Typography (BDCM).
WEEK 1 (25/9/2023): INTRODUCTION
1. Typography: The art and technique of arranging type, making written language
legible, readable and appealing when displayed.
2. Calligraphy: Writing styles.
3. Lettering: Drawing styles.
4. Font: The individual font or weight within the
typeface.
5. Typeface: The entire family of fonts/ weights that share
similar characteristics.
Fig. 1.1 Font & Typeface.
Early Letterform Development: Phoenician to Roman
1. Phoenician: Written from left to right.
Fig. 1.2 Right: 4th century B.C.E. – Phoenicians votive stele
Carthage, Tunisia. The stele bears a four-line inscription to
Tanit and Baal Hammon. Left: Evolution from the Phoenician letter. Greek writing direction.
2. Greek: Written in 'boustrophedon' style (how the ox
ploughs), read alternately from right to left and left to right. Like
the Phoenicians, Greeks did not use letter space or punctuation.
3. Etruscan (and then Roman): Carvers working in marble-painted
letterforms before inscribing them.
Fig. 1.4 Late 1st century B.C.E., Augustan inscription in the Roman Forum,
Rome.
Fig. 1.5 Early letterform development: Phoenician to Roman.
Hand Script from 3rd to 10th Century C.E.
1. Square Capitals: Written letterforms found in Roman monuments,
with serifs added to the finish of the main strokes.
2. Rustic Capitals: Compressed version of square capitals, allows
twice as many words on a sheet of parchment and takes far less than to
write, slightly harder to read but faster and easier to write.
3. Roman cursive: Written in cursive forms for everyday
transactions, simplified for speed, the beginning of lowercase
letterforms.
4. Uncials(small letters): Incorporated some aspects of the
Roman cursive hand, the broad forms of uncials are more readable at small
sizes than rustic capitals.
5. Half-uncials: The formal beginning of lowercase
letterforms, replete with ascenders and descenders, 2000 years after the
origin of the Phoenician alphabet.
6. Charlemagne (the first unifier of Europe since the
Romans) entrusted to Alcuin of York, Abbot of St Martin of Tours standardised
ecclesiastical texts in 789, rewriting them using majuscules,
minuscules, capitalization, and punctuation, setting the standard for
calligraphy for a century.
7. Blackletter to Gutenberg’s type:
Charlemagne's empire dissolution led to regional variations of Alcuin's
script, with Blackletter in northern Europe, Rotunda in the south, and a
humanistic script in Italy.
Fig. 1.6 Timeline of hand script from 3rd – 10th-century
C.E.
Text Type Classification
Fig. 1.7 Text type classification.
WEEK 3 (9/10/2023): TEXT (PART 1)
Tracking: Kerning & Letterspacing
1. Kerning: The automatic adjustment of space between
letters.
2. Tracking: The addition and removal of space in a word/
sentence.
3. Letterspacing: Adding space between the letters.
Fig. 1.8 Right: Kerning. (Date unknown). Left: Normal tracking, loose tracking and tight tracking.
Fig. 1.9 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 counter form created
between letters to maintain the line of reading.
Formatting Text
1. Flush left: 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.
2. Centered: 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, it's important to amend line breaks so that the text does not appear too jagged.
3. Flush right: 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.
4. Justified: 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.
Fig. 1.11 Flush left, Centered, Flush right and Justified.
Texture
- Different typefaces suit different messages.
- Typography requires understanding typefaces' suitability for
different messages
- Colour differences in type height and stroke width are crucial for
successful layouts.
Example: A type with a relatively generous x-height or relatively heavy
stroke width produces a darker mass on the page than a type with a
relatively smaller x-height or lighter stroke.
Fig. 1.12 Anatomy of a typeface.
Leading and Line Length
- The goal in setting text type is to allow for easy, prolonged
reading.
- At the same time, a field of type should occupy the page as much
as a photograph does.
1. Type size: Text type should be large enough to be read
easily at arm's length.
2. Leading: Text that is set too tightly or too loosely can
cause vertical eye movement and striped patterns, distracting the
reader from the material at hand.
3. Line Length: Line length and type size influence appropriate text leading,
with shorter lines requiring less and longer lines more. A good
rule is 55-65 characters, as extremely long or short line lengths
impair reading.
Type Specimen Book
- Shows samples of typefaces in various different sizes.
- Without printed pages showing samples of typefaces of different
sizes, no one can make a reasonable choice of type.
- Typographer only determine the choice on screen when its final
version is read on screen.
- Provides an accurate reference for type, type size, type leading,
type line length etc.
Fig. 1.13 Sample Type Specimen Sheet.
Compositional requirement: Text should create a field
that can occupy a page or a screen. The ideal text should be
middle gray, enlarged to 400% on screen for clear relationships.
Screen design is an electronic approximation of a printed page,
judging the type on screen accurately.
Fig. 1.14 The difference in one point leading can make a
difference that is unrecognizable at 100% on most
monitors.
WEEK 3 (9/10/2023): TEXT (PART 2)
Indicating Paragraphs
- There are several options for indicating paragraphs.
Fig. 1.15 Examples of Indicating Paragraphs.
Widows and Orphans
- In traditional typesetting, there are two unpardonable
gaffes: widows and orphans.
- Designers handling large text volumes in websites, books,
printed magazines, newspapers, or online journals must be
cautious to prevent the aforementioned issues.
- In justified text, widows and orphans are considered serious
gaffes, with flush right and ragged left text being more
forgiving.
- Typographers ensure no column starts with the last
line.
1. A widow: A short line of type left alone at the
end of a column of text.
2. An orphan: A short line of type left alone at the
start of the new column.
Fig. 1.16 Widow & Orphan.
Highlighting Text
Fig. 1.17 Examples of Highlighting Text.
Headline within Text
- There are many kinds of subdivisions within the text of
a chapter.
- The following visuals have been labelled (A, B and C)
according to the level of importance.
- A typographer's role is to ensure that the text's
importance and its relationships are clearly conveyed to
the reader.
Fig. 1.18 Examples of Headline within Text.
Cross Alignment
- Cross-aligning headlines and captions with text type
reinforces the architectural sense of the page and the
structure while articulating the complimentary
vertical rhythms.
Fig. 1.19 Examples of Cross Alignment.
"The devil is in the details."
— Jane Jacobs
"Typography is two-dimensional architecture,
based on experience and imagination, and guided
by rules and readability."
— Hermann Zapf
WEEK 4 (16/10/2023): BASIC
Describing Letterforms
1. Baseline: The imaginary line is the
visual base of the letterforms.
2. Median: The imaginary line
defining the x-height of letterforms.
3. X-height: The height in any typeface
of the lowercase ‘x’.
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).
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.
8. Barb: The half-serif finish on some
curved stroke.
9. Beak: The half-serif finish on some
horizontal arms.
10. Bowl: The rounded form that describes a
counter. The bowl may be either open or
closed.
11. Bracket: The transition between the
serif and the stem.
12. Cross Bar: The
horizontal stroke in a letterform that
joins two stems together.
13. Cross Stroke: The
horizontal stroke in a letterform
that joins two stems together.
14. Crotch: The interior
space where two strokes meet.
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.
19. Leg: Short stroke off the stem
of the letterform, either at the
bottom of the stroke (L) or
inclined downward (K, R).
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).
Fig. 1.20 Typography Basic.
The Font
- A full font of a typeface contains over 26 letters,
numerals, and punctuation marks.
- To effectively utilize type, it is crucial to use a
full font and be proficient in its usage.
1. Uppercase: Capital letters,
including certain accented vowels, the c cedilla and n
tilde, and the a/e and o/e ligatures.
2. Lowercase: Lowercase letters include the
same characters as uppercase.
3. Small Capitals: Uppercase letterforms
draw to typeface x-height, while small caps are found in
serif fonts. Type software generates small caps based on
uppercase forms.
4. Uppercase Numerals: Known as lining figures, are the same height as uppercase letters and set to the same kerning width, commonly used in tabular material.
5. Lowercase Numerals: Known as old-style figures or text figures, are used with upper and lowercase letterforms and are less common in sans serif typefaces.
6. Italic: Most fonts today use matching italics, with small caps typically being Roman. Italic forms date back to 15th-century Italian cursive handwriting, while oblique forms are based on the Roman form.
7. Punctuation, Miscellaneous Characters: Understanding the available characters in a typeface is crucial before selecting the appropriate type for a specific job, despite standard punctuation marks in all fonts.
8. Ornaments: Used as flourishes in invitations or certificates, are typically part of a larger typeface family, with only a few traditional or classical typefaces featuring ornamental fonts.
Describing Typefaces
- Recognizing letterform parts allows typographers to
identify different typefaces
- Some, all, or combinations of styles found within one
family.
1. Roman: The uppercase forms are derived from
inscriptions of Roman monuments. A slightly lighter stroke
in Roman is ‘Book’.
2. Italic: Named for fifteenth-century Italian
handwriting on which the forms are based.
3. Oblique: Uppercase letterforms draw to
typeface x-height, while small caps are found in serif
fonts. Type software generates small caps based on uppercase
forms.
4. Boldface: Typefaces with thicker strokes,
known as 'semibold', 'medium', 'black', 'extra bold', or
'super', are often referred to as 'Poster' in some
typefaces.
5. Light: A lighter stroke than the Roman form.
Even lighter strokes are called ‘thin’.
6. Condense: A version of the Roman form, and
extremely condensed styles are often called
‘compressed’.
7. Extended: An extended variation of a roman
font.
Fig. 1.22 Different Typefaces.
Comparing Typefaces
- The 10 typefaces mentioned in the following
represent 500 years of type design.
- Who rendered them all wanted to achieve two
goals: easy readability and an appropriate
expression of contemporary esthetics.
- Typefaces, designed centuries after their
creation, have been influential in human
thought, reading, writing, and printing for
decades or even centuries.
Example: Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. These feelings connote specific use and expression. The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.
Fig. 1.23 Comparing 10
typefaces.
"You can’t be a good typographer, if you aren’t a good
reader."
— Stephen Cole
WEEK 5 (23/10/2023): UNDERSTANDING LETTERS
Understanding Letterforms
Fig. 1.24 Both Baskerville (previous) and Univers demonstrate the
meticulous care a type designer takes to create
letterforms that are both internally harmonious and
individually expressive.
Fig. 1.25 Sans-serif typefaces: Helvetica and Univers.
Maintaining x-height
- The x-height generally describes 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.
Fig. 1.26 X-height.
Form: Counterform
- It's important as recognizing specific letterforms
is developing a sensitivity to the counterform.
- The space describes and is often contained, by the
strokes of the form.
- When letters are joined to form words, the
counterform includes the spaces between them.
Fig. 1.27 Examples of Counterforms.
"On the streets, you look at
girls [or boys]. I look at
type."
— Hannes von Döhren
WEEK 6 (30/10/2023): SCREEN &
PRINT
Typography inDifferent Medium
In the past, typography was viewed as
living only when it reached
paper.
- Once a publication was edited,
typesetted and printed, it was
done.
- Nothing changed after that.
- Good typography and readability were
the result of skilled typesetters and
designers.
Today, typography exists not only on
paper but on a multitude of
screens.
- Influenced by various unknown and
fluctuating parameters.
- Such as the operating system,
system fonts, the device and screen
itself, the viewport and more.
- Our experience of typography today
changes based on how the page is
rendered, because typesetting happens
in the browser.
Fig. 1.26 Different Medium.
Print Type VS Screen Type
1. Type for print: The typeface Caslon, Garamond, and Baskerville is designed for print reading, ensuring smooth, flowing, and pleasant text flow. Its elegant, intellectual, and highly readable nature makes it versatile and easy to typeset.
2. Type for Screen: Web-optimized typefaces are modified for improved readability and performance in digital environments, including taller x-height, wider letterforms, open counters, thinner strokes, reduced stroke contrast, and open spacing for smaller sizes.
3. Hyperactive Link/
hyperlink: A text link found on most web pages, allowing users to navigate between pages. It is typically blue and underlined, with an arrow pointing to the link.
4. Font Size for screen: 16-pixel text on a screen is similar to text in a book or magazine, affecting reading distance. Books are typically set at 10 points, while reading at arm's length is at least 12 points.
5. System Fonts for Screen/ Web Safe Fonts: Each device has its own pre-installed font selection, largely based on its operating system, with Windows-based devices having one group, MacOS ones using another, and Google's Android system using its own. The designer chose an obscure, paid font family for a site's design, defaulting to a basic variation like Times New Roman if visitors don't have it installed. Web-safe fonts, which overlap across all operating systems, appear across all platforms.
6. Pixel Differential Between Devices: Screen sizes and pixel sizes vary across devices like PCs, tablets, phones, and TVs, resulting in varying text proportions and device class variations.
Fig. 1.27 Screen font size VS Print font
size.
Fig. 1.28 Pixel
differential between devices.
Static Vs Motion
1. Static typography: Used in various forms like billboards, posters, and magazines, has minimal expressive potential and emotional connection with the audience, significantly influencing the impression and impact of the design.
2. Motion Typography: Typographers can create fluid and kinetic letterforms through temporal media, often incorporating animation in film title credits. Animated text is common in motion graphics, particularly in branding for film and television production firms. On-screen typography is expressive, setting the content tone or expressing brand values, and evoking a specific mood in title sequences.
“A great designer knows how to work
with text not just as content, he
treats text as a user
interface.”
– Oliver Reichenstein
2. INSTRUCTIONS
Task 1: Exercises (20% - Individual)
Timeframe: Week 1 - Week 5
Deadline: Week 6
Description:
Throughout the beginning and the middle of the semester, exercises
will be prescribed one after the other. These exercises will aid and
benefit you in your quest to gain theoretical and practical knowledge
in Typography that will inform you and provide you with the necessary
experience to take on the module’s tasks. No colour may be used in the exercises. Use only the 10 typefaces
provided to you.
(1) Type Expression: You will be given 4 words to compose and express. Begin by sketching
out ideas. Once the ideas are selected, you will be given a set of 10
typefaces to work within the digitisation phase. Through iteration, use
the appropriate typeface and compose the letters in a manner that allows
the meaning of the word to become visible — still and in motion. (2
weeks). Software: Adobe Illustrator and Adobe Photoshop.
(2) Text Formatting: Type Expression: Formatting Text: Before commencing watch lectures: Text: P1 and Text:
P2. You will be given incremental amounts of text that address
different areas within text formatting i.e. type choice, type size,
leading, line-length, paragraph spacing, forced-line-break, alignment,
kerning, widows and orphans and cross-alignment. These minor exercises
(Formatting Text 1:4 to 4:4A) will increase your familiarity and
capability with the appropriate software and develop your knowledge of
information hierarchy and spatial arrangement. The task ends with the
submission of one layout in A4 size demonstrating Page | 7 what you
have learned from the incremental exercises. (2 weeks). Software:
Adobe InDesign
Submission:
1. Eportfolio: All gathered information (failures, successes,
epiphanies, sketches, visual research, printouts, websites, images,
charts, etc.) must be documented logically and chronologically in the
eportfolio for the duration of the task in one post.
2. Eportfolio: All images/sketches/diagrams/scans must be
captured/photographed/scanned well, with good even natural light, without
shadows — use of tube/bulb/flashlight is not allowed. All
images/sketches/diagrams/scans uploaded onto the eportfolio must be
labelled (fig 1, 2, etc.), described and dated. Final submission must be
indicated clearly (distinguishable from process work) and uploaded as PDF
and JPEG &/ GIF (not PNG) or as instructed in class.
3. (Only if instructed) Tasks to be documented in a printed A4 enclosed
in a Clear Sheet, logically and chronologically. The works must be labelled and dated –
use pencil and write neatly.
Learning Goals
1. To be able to compose and express using textual
information.
2. To be able to format text for effective
communication.
Doc. 2.1 Module Information Booklet of Typography.
3. TASK 1: EXERCISE 1 - TYPE EXPRESSION
3.1 RESEARCH
It must be expressive, meaningful, understandable, and only include
letterforms.
Fig. 3.1.1 Typography, Expressive Words ; Opens a new tab Photo by Chi Tran
on Behance.
Fig. 3.1.2 Type is Form & Form is Type? Week 1 (25/9/2023).
Fig. 3.1.3 Kinetic and Sequential Graphic design; Opens a new tab Photo by
Kaitlyn Dahlhausen on Behance. Week 1 (25/9/2023).
Fig. 3.1.4 Typography in Motion. Week 1 (25/9/2023).
3.2 IDEA & CONCEPT
We need to use the given 10 typefaces to create type expressions. The
given typefaces are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill
Sans, Garamond, New Baskerville, Janson, Serifa and Univers. We need
to choose suitable typefaces to work with selected words. Those words
are Dizzy; Electric; Fire; Cry; Gun; Slide; and Freeze.
I decided to design the words Dizzy, Electric, Fire and
Slide.
3.3 SKETCHES
Fig. 3.3.1 Dizzy Sketches. Week 1 (25/9/2023).
3.4 TYPE EXPRESSION
First Attempt (Work Progress)
Fig. 3.4.2 Fire. Work in Illustrator. Week 2 (1/10/2023).
Fig. 3.4.3 Electric. Work in Illustrator. Week 2 (1/10/2023).
Fig. 3.4.4 Slide. Work in Illustrator. Week 2 (1/10/2023).
Second Attempt (Work Progress)
Fig. 3.4.7 Electric. Work in Illustrator. Week 3 (9/10/2023).
Final Outcome (Type Expression)
Fig. 3.4.9 Final Type
Expression (jpeg file). Week 3 (9/10/2023).
Doc. 3.4.1 Final Type Expression (pdf file). Week 3 (9/10/2023).
3.5 ANIMATED TYPE EXPRESSION
First Attempt (Work Progress)
Fig. 3.5.1 Dizzy Gif. Week 3 (9/10/2023).
Fig. 3.5.2 Fire Gif. Week 3 (9/10/2023).
Fig. 3.5.3 Electric Gif. Week 3 (9/10/2023).
Fig. 3.5.4 Slide Gif. Week 3 (9/10/2023).
Second Attempt (Work Progress)
Fig. 3.5.5 Dizzy Gif Work Progress. Week 3 (9/10/2023).
Fig. 3.5.6 Fire Gif Work Progress. Week 3 (9/10/2023).
Fig. 3.5.7 Electric Gif Work Progress. Week 3 (9/10/2023).
Fig. 3.5.8 Slide Gif Work Progress. Week 3 (9/10/2023).
Final Outcome (Animated Type Expression - GIF )
Fig. 3.5.9 Final Electric Gif. Week 3 (9/10/2023).
Fig. 3.5.10 Final Fire Gif. Week 3 (9/10/2023).
Fig. 3.5.11 Final Electric Gif. Week 3 (9/10/2023).
Fig. 3.5.12 Final Slide Gif. Week 3 (9/10/2023).
4. TASK 2: EXERCISE 2 - TEXT FORMATTING
4.1 LECTURE 1 OF TEXT FORMATTING: KERNING AND TRACKING
Note
1. Kerning: option key (alt) + left arrow = reduce the space
between 2 letters.
2. General tracking/letter spacing: select all + press (option
key (alt) + right arrow).
Work Progress (Kerning & Tracking)
Fig. 4.1.1 Work in InDesign. Week 4 (16/10/2023).
Fig. 4.1.2 Text formatting without kerning. Week 4 (16/10/2023).
Fig. 4.1.3 Text formatting with kerning and tracking. Week 4 (16/10/2023).
Fig. 4.1.4 Both without kerning and with kerning overlayed to show the
difference. Week 4 (16/10/2023).
Fig. 4.1.5 Without Kerning VS With Kerning with tracking. Week 4 (16/10/2023).
Final Outcome (Kerning & Tracking)
Fig. 4.1.3 Text Formatting: Kerning and Tracking (JPEG). Week 4 (16/10/2023).
Doc. 4.1.1 Text Formatting: Kerning & Tracking (PDF). Week 4 (16/10/2023).
4.2 LECTURES 2 TO 4 OF TEXT FORMATTING
Note
Need to know the relation between the font size, line length, leading, paragraph and paragraph spacing. Manipulate grid to arrange information within a space (particular margin).
1. Point size: 8pt - 12pt
2. Leading: Depending on the typeface, +2.5 or +3 points of point size. Due to their varying x-heights, fonts can stretch beyond the baseline grid.
3. Body text: The middle gray value (the amount of negative and positive space) must be equal.
4. Line length: 35 (subtext), 55–65 (body text).
5. Headings: Lead body text and double point size.
6. Lead and paragraph spacing are the same.
7. Maintain the same font width for identical informational material. If they diverge, the audience becomes perplexed and believes it to be a different piece of information.
8. To lessen ragging, do not exceed +3/-3 for tracking (line).
9. Disable the hyphenation. Make sure there aren't too many tracking modifications needed before turning on hyphenation.
10. Use left justify or left align. Despite the left alignment. 11. Maintain cross alignment. 12. Avoid widows and orphans.
Layouts (Text Formatting)
Fig. 4.2.1 Screenshot of 6 potential layouts. Week 4 (16/10/2023).
Fig. 4.2.2 The chosen layout. Week 4 (16/10/2023).
Work Progress (Text Formatting)
Fig. 4.2.3 Without kerning & tracking VS With kerning & tracking. Week 4 (16/10/2023).
Fig. 4.2.4 Cross Alignment. Week 4 (16/10/2023).
Final Outcome (Text Formatting)
HEADING
Font/s: ITC New Baskerville (Bold)
Type Size/s: 60 pt
Leading: 63 pt
Font/s: ITC New Baskerville (Bold)
Type Size/s: 60 pt
Leading: 63 pt
BODY
Font/s: ITC New Baskerville (Roman)
Type Size/s: 11 pt
Font/s: ITC New Baskerville (Roman)
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Paragraph spacing: 13 pt
Character per-line: 55-56 characters
Alignment: left aligment
CAPTIONS
Font/s: ITC New Baskerville (Italic)
Type Size/s: 10 pt
Type Size/s: 10 pt
Leading: 13 pt
Margins: 12.7 mm top, 12.7 mm left, 12.7 mm right, 12.t mm
bottom
Columns: 4
Gutter: 5 mm
Columns: 4
Gutter: 5 mm
Fig. 4.2.5 Final Text Formatting with Grid (JPEG). Week 5 (23/10/2023).
Doc. 4.2.1 Final Text Formatting with Grid (PDF). Week 5 (23/10/2023).
Fig. 4.2.6 Final Text Formatting (JPEG). Week 5 (23/10/2023).
Doc. 4.2.2 Final Text Formatting (PDF). Week 5 (23/10/2023).
5. FEEDBACK
WEEK 1 (25/9/2023)
WEEK 2 (2/102023)
Specific feedback: I need to get the progress of the work recorded. I also need to make sure the work progress is dated.
WEEK 3 (9/10/2023)
General feedback: The lecturer commented on our engagement in the class, including our participation in discussions and critiques. And also, we all need to use Illustrator and Photoshop to create the animation. We can do experimental fonts in different motions.
WEEK 3 (9/10/2023)
Specific feedback: The 'Fire' design overall is 8 out of 10, but the whole typeface should be placed on the button. Moreover, the 'Slide' word can be changed in the direction to express a clear message to the audience. Besides that, the 'dizzy' design overall is 6 out of 10; it is not designed well with a clear message. Lastly, for the 'electric' word design, I can see the references from other students to refine the design.
General feedback: The lecturer commented on how our understanding of typography has evolved, and whether we have noticed an improvement in our typographic skills. There are excellent and bad animations.
Specific feedback: The 'Fire' animation overall does not express the meaning well. Moreover, the 'Slide' animation ideal is good but can be improved with the bouncing ball animation. Besides that, the 'Dizzy' animation idea and concept are very cool, lecturer liked it. Lastly, the 'Electric' animation is cool, just bear in mind after hitting the ground, the movement should be fast.
WEEK 4 (16/10/2023)
General feedback: The lecturer commented on how our understanding of typography has evolved, and whether we have noticed an improvement in our typographic skills. There are excellent and bad animations.
WEEK 5 (23/10/2023)
General feedback: The lecturer talked about our selections for fonts and styles as well as how we matched the goals of the project. We need to confirm the choice of fonts; don't make an awkward layout. Moreover, make sure every text needs to be read from left to right. We also need to organise the space well; don't leave so much white space in the layout. When you want to create a layout, do not use two different serif fonts at once.
Specific feedback: The lecture commented on the layout and composition of my design. Overall ok. If the point size is 11pt, then the leading needs 2-3pt larger. The lecturer also pointed out where adjustments are needed to enhance the readability and overall aesthetics of your typography.
6. REFLECTIONS
EXPERIENCE
1. Initial Fascination with Letterforms
2. Hands-On Kerning and Tracking
3. Investigating Typography Software
For overall experience, the encounter starts with a preliminary
interest in letterforms. It's as if I have entered a world where
each curve, serif, and stroke has a purpose. I started to recognise
how artistic letter design is. Moreover, I learned kerning and tracking in Adobe InDesign. It feels like
learning a secret language as I get more into it. I had the chance
to modify the spacing between letters and words, and it was like
changing the notes in a musical composition because even the
smallest adjustments can have a huge impact. Besides that,
working with typography software feels like obtaining access to a
robust toolkit, such as Adobe Illustrator. It's like being given the
freedom to develop and realise my typographic ideas in my own design
studio.
OBSERVATION
1. Exploring Typeface Variety
2. Understanding Typographic Hierarchy
3. Exploring
I observed that when I first started to study a wide variety of
typefaces, it was like finding a gold mine of possibilities. I
started to realise how each typeface has its own personality and how
it can transmit various feelings and thoughts. Furthermore, learning
the craft of storytelling is similar to learning about typographic
hierarchy. I see how font selections, sizes, and styles, similar to
how chapters in a book are arranged, can direct the reader's trip
through a design. In addition, engaging in other students' feedback
is like becoming a typography detective. I carefully examine both my
own creations and those of others, learning to spot the minute
nuances that can successfully or unsuccessfully complete a
typographic composition. Positive criticism becomes your ally as you
strive for development.
FINDINGS
1. Typography in Real Projects
2. History of Typography
I found in hands-on assignments that applying what I have
learned to projects in typography is like starting to create my own
masterpiece. I knew how to carefully modify spacing and make
thoughtful font selections as I began to understand that effective
communication is more important than just beauty in typography.
Additionally, discovering typography as a window into culture and
history provides me with cultural and historical insights. I learned
to apply this information to improve the meaning of my designs by
understanding that each typeface is a chapter in a larger
narrative.
7. FURTHER READING
WEEK 1 (25/9/2023)
Fig. 7.1 Typographic Design: Form and
Communication (2015).
Author: Carter, Rob, Meggs Philip B., Day Ben,
Maxa Sandra & Sanders Mark
Publishing year: 2015
Publisher: WILEY
After roughly reading this book, I realized it is
the definitive reference for graphic designers, providing a
comprehensive introduction to the visual world. This book
offers essential topics including letterforms and negative
space, messaging, processes, and history, which aspiring
designers will find useful in mastering these critical
concepts. When used well, typography may convey far more than just
the words themselves.
Fig. 7.2 Content of Typographic Design:
Form and Communication (2015).
Fig. 7.3 Conclusion of Typographic Design: Form and Communication
(2015)
1. Understand design factors as they
relate to type.
2. Explore communication and typographic
messaging.
3. Learn how typography has evolved, and
where it is headed Adopt established approaches to
designing with type.
WEEK 2 (2/102023)
1. Metal type measurement: The small sizes of text type necessitated the development
of a measuring system with extremely fine increments.
2. Spatial measurement: These intervals are:
interletter spacing which is the interval between letters;
interword spacing which is wordspacing; Interline spacing
which is the interval between two lines of type.
WEEK 3 (9/10/2023)
Fig. 7.5 Structuring Web Page
1. Site structure and architecture: The scope of this chapter prevents an in-depth investigation into the complex realm of website architecture and navigation. It remains important to emphasize, however, that the ability to successfully travel through a site depends on navigational hierarchies. Users must be assured that they can move efficiently about a site's pages and find the information they seek without getting lost in the process.
2. Page structure and spatial organization: The possibilities for
designing web pages and controlling their appearance continue to
advance. Compared to the infancy of web design, designers enjoy many
technological advances that contribute to improved legibility, page
organization, visual hierarchy, aesthetics, expression, efficiency,
consistency, and adaptability to change.
WEEK 4 (16/10/2023)
Fig. 7.6 A Multidimensional Language.
I learned that Typography is a dynamic communication medium that can be read, seen, heard, and interpreted verbally, visually, and audibly. Its evolution during the early twentieth century was influenced by social, philosophical, and technological changes. The Futurist Manifesto, written by Filippo Marinetti in 1900, emphasized technology, violence, danger, movement, and speed.
WEEK 5 (23/10/2023)
Fig. 7.7 A Case Study - Helmut Schmid: Design is Attitude.
The Helmut Schmid: Design is Attitude site (Fig, 8-35) reflects the
results of the "Schmid Today" project, a three-year research project
about the designer and typographer Helmut Schmid. The results of the
project are an international exhibition: a book, Design Is Attitude;
a documentary; and this website. Schmid's prodigious work and
career spans forty years.
After training as a typesetter, Schmid (b.1942 in Ferlach, Austria)
studied at the Basel School of Design under Emil Ruder, Kurt Hauert,
and Robert Buchler.
The website reflects the essence of Schmid's typographical work: an
integration of clarity, functionality, and visual poetry. The
Dutch designer Wim Crouwel has said, "Helmut Schmid ... his typography
has rhythm ... it is created by the eye and resembles a musical
score."
8. REFERENCE L.IST & BIBLIOGRAPHY
Carter, r., Meggs, P.B., Day, B., Maxa, S. & Sanders, M. (2015).
'Typographic Design: Form and Communication'.
Google Books. [Online]. Available at: https://www.google.com.my/books/edition/Typographic_Design/Hb6vBAAAQBAJ?hl=en&gbpv=1&pg=PA4&printsec=frontcover [Accessed: 14 October, 2023].
Dahlhausen, K. (2011). 'Voyage Flash Kinetic Type'. Behance. [Online]. Available at: https://www.behance.net/gallery/2674601/Kinetic-and-Sequential-Graphic-design [Accessed: 25 September, 2023].
Spiegel, A. (2018). 'Type is Form & Form is Type?'. Medium. [Online]. Available at: https://medium.com/re-write/type-is-form-form-is-type-f1203a001ff6 [Accessed: 25 September, 2023].
Tran, C. (2010). 'Expressive Words Typography'. Behance. [Online]. Available at: https://www.behance.net/gallery/865378/Typography-Expressive-Words [Accessed: 25 September, 2023].
UCLA. (n.d.). 'TYPOGRAPHY IN MOTION» Blog Archive » Exercise 2: Words in
Motion'. Pinterest. [Online]. Available at: https://www.pinterest.com/pin/779193173054122500/ [Accessed: 25 September, 2023].
Comments
Post a Comment