26/9/2023 - 31/10/2023 (Week 1 - Week 6)
Nadhrah Binti Abdul Razak / 0359620
Typography / Bachelor of Design (Hons) in Creative Media
Task 1 - Exercises
Nadhrah Binti Abdul Razak / 0359620
Typography / Bachelor of Design (Hons) in Creative Media
Task 1 - Exercises
A. LECTURES
Week 1
1. Introduction
* Typography is a fundamental aspect in all
design studies (attention to detail, composition)
What is Typography? - The act of creating letters
Figure 1.1.1a
- What is typography used for?
Animation
Figure 1.1.2a
Web Design
Figure 1.1.3a
App Designs
Figure 1.1.4a
Signage Designs
Figure 1.1.5a
Bottled labels, books, posters.
Figure 1.1.6a
Logo type (Trademark that consist of letters)
Figure 1.1.7a
- Calligraphy refers to writing style (black letter, round hand, uncial, etc)
- Lettering refers to you drawing the circumference (hand letter headlines, signages, posters)
-
Definition of Typography
- Wikipedia described it as “the art and technique of arranging
type to make them look legible, appealing and readable.”
- Typography is important for typesetters, compositors, typographers, graphic designers, art directors, manga artists, comic book artists, graffiti artists — anyone that arrangers letters, words, numbers and symbols for publication, display or distribution.
Typography terminology
Font // Individual font or weight within the typeface.
(Georgia Regular,
Georgia Italic,
Georgia Bold)
Figure 1.1.8a
Typeface - Entire family of fonts/weights that share
similar characteristics/weight
(Georgia, Arial,
Times New Roman)
Figure 1.1.9a
2. Development & Timeline
Early letterform development : Phoenician to Roman
Figure 1.2.1a
- Diagram shows the evolution of the letters from Arabic to
modern letter form
- At their core, uppercase forms are just combination of straight lines and pieces of circles.
-The tool that we hold determines the way of writing.
- At their core, uppercase forms are just combination of straight lines and pieces of circles.
-The tool that we hold determines the way of writing.
Figure 1.2.2a
- The Greeks have changed the direction of writing from right
to left to it being left to right.
- Since they’ve changed the direction of writing, they also
changed the orientation of the letterforms.
Figure 1.2.3a
- Etruscan and the Roman carvers working in marble painted letterforms before inscribing them; They draw it out on stones before engraving it.
- The strokes were developed by the type of tools they use to
write.
Figure 1.2.4a
- The development from Phoenician to Roman
Hand script from 3rd - 10th century C.E
Figure 1.2.5a
- Square capitals were the written version that can be found in Roman monuments.
- Reed pen was held at an angle of approximately 60° off the perpendicular.
Figure 1.2.6a
- Compressed version of square capitals and rustic capitals.
- The pen or brush was held at angle of approximately 30° off the perpendicular
Figure 1.2.7a
- Diagram shows the beginning of what was referred to as
lowercase letterforms.
- Square and rustic capitals were specifically for documents. As of for everyday transactions, they would write cursively.
- Square and rustic capitals were specifically for documents. As of for everyday transactions, they would write cursively.
Figure 1.2.8a
Further formalization of the cursive hand.
Figure 1.2.9a
Charlemagne, the first unifier of Europe since the
Romans.
Figure 1.2.10a
Blackletter to Gutenberg’s type
Figure 1.2.11a
- After the dissolution of Charlemagne empire, regional
variations came upon Alcuin’s script.
- The humanistic script in Italy was based on Alcuin’s
miniscule.
Figure 1.2.12a
- The Gutenberg's skills included engineering, metalsmithing and chemistry.
- His type of mold required a different brass matrix or negative impression for each letterform.
Text type classification
1450 Blackletter
Figure 1.2.13a
1475 Old style
Figure 1.2.14a
1500 Italic
Figure 1.2.15a
1550 Script
Figure 1.2.16a
Figure 1.2.17a
Figure 1.2.16a
1750 Transitional
Figure 1.2.17a
1775 Modern
Figure 1.2.18a
Figure 1.2.18a
1825 Square Serif / Slab Serif
Figure 1.2.19a
1900 Sans Serif
Figure 1.2.20a
Figure 1.2.21a
B. INSTRUCTIONS
Task 1: Exercise 1 - Type Expression
We were given a total of 4 words to come up with ways to express the words. We first have to sketch out the ideas by using a total of 10 typefaces given by our lecturer. The typefaces are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson Text LT, Serifa and Univers.
Sketches
Figure 1.1b
D. REFLECTION
- Overall, I think the assignment's workload is quite heavy but it has helped me get use to using Adobe Illustrator and Adobe InDesign.
E. FURTHER READING
Just My Type by Simon Garfield
Figure 1.2.20a
1990 Serif/Sans Serif
Figure 1.2.21a
Week 2 - Text P1
1. Text/Tracking : Kerning and Letterspacing
Figure 2.1.1a
1. Text/Tracking : Kerning and Letterspacing
Figure 2.1.1a
- Kerning: The automatic adjustment of space between letters. (Not the same as letterspacing)
- Tracking : The addition and removal of space in a word or sentence
- Tracking : The addition and removal of space in a word or sentence
Figure 2.1.2a
- Normal tracking, loose tracking and tight tracking.
- Lowercase letters are not suitable for letterspacing since they require the counter form created between letters to main the line of reading while uppercase letterforms are drawn to stand by itself.
Figure 2.1.3a
Figure 2.1.4a, Normal and loose tracking
Figure 2.1.5a, Tight tracking
Figure 2.2.1a, Flush left
- Lowercase letters are not suitable for letterspacing since they require the counter form created between letters to main the line of reading while uppercase letterforms are drawn to stand by itself.
Figure 2.1.3a
Figure 2.1.4a, Normal and loose tracking
Figure 2.1.5a, Tight tracking
2. Formatting Text
Figure 2.2.1a, Flush left
- Flush left: Mirrors the asymmetrical experience of handwriting.
- Each line starts at the same point but ends wherever the last word is.
Figure 2.2.2a, Centered
- Each line starts at the same point but ends wherever the last word is.
Figure 2.2.2a, Centered
- Shows symmetry upon the text, has equal values and weight to both ends of the line.
- The text will transform texts into shapes
- Centered formats are usually found in small paragraphs only as it is hard to read in long paragraphs.
Figure 2.2.3a, Flush right
- The text will transform texts into shapes
- Centered formats are usually found in small paragraphs only as it is hard to read in long paragraphs.
Figure 2.2.3a, Flush right
- Places emphasis on the end of a line as opposed to its start.
- Can be useful when the relationship between text and image are ambiguous and without a strong orientation to the right.
Figure 2.2.4a, Justified
- Can be useful when the relationship between text and image are ambiguous and without a strong orientation to the right.
Figure 2.2.4a, Justified
- Imposes a symmetrical shape (similar to centering)
- Achieved by expanding or reducing spaces between words.
- Careful attention to line breaks and hyphenation is required.
3.Texture
Figure 2.3.1a Anatomy of Typeface
Figure 2.3.2a, Different typefaces show different grey values
- Achieved by expanding or reducing spaces between words.
- Careful attention to line breaks and hyphenation is required.
3.Texture
Figure 2.3.1a Anatomy of Typeface
Figure 2.3.2a, Different typefaces show different grey values
4. Leading and Line Length
- To allow easy and prolonged reading.
- Type size: Should be large enough to be read easily at arms length
- Leading: Text that is set too tightly encourages vertical eye movement; making a reader easily lose his or her place. Text that is too loose creates striped patterns which distracts readers.
- Line length: Shorter lines require less leading while longer lines require more.
Figure 2.4.1a
Figure 2.4.2a
- To allow easy and prolonged reading.
- Type size: Should be large enough to be read easily at arms length
- Leading: Text that is set too tightly encourages vertical eye movement; making a reader easily lose his or her place. Text that is too loose creates striped patterns which distracts readers.
- Line length: Shorter lines require less leading while longer lines require more.
Figure 2.4.1a
Figure 2.4.2a
5. Type Specimen Book
- shows samples of various typefaces in different sizes.
- shows samples of various typefaces in different sizes.
Figure 2.5.1a
- Compositional requirement: Text must create a field that can occupy a page or screen.
- An ideal text should have a middle grey value and not a series of stripes.
Figure 2.5.2a, Ideal text
Figure 2.5.3a, Non-ideal
- An ideal text should have a middle grey value and not a series of stripes.
Figure 2.5.2a, Ideal text
Figure 2.5.3a, Non-ideal
- A good tip is to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.
Figure 2.5.4a, The difference of one line leading
Figure 2.5.4a, The difference of one line leading
B. INSTRUCTIONS
Task 1: Exercise 1 - Type Expression
We were given a total of 4 words to come up with ways to express the words. We first have to sketch out the ideas by using a total of 10 typefaces given by our lecturer. The typefaces are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, ITC Garamond, ITC New Baskerville, Janson Text LT, Serifa and Univers.
Sketches
Figure 1.1b
Words I have chosen are; Chop-chop, Huge, Windy and Roar
Digitalised sketches
Figure 1.2b
Overall final outcome
Figure 1.9b, final outcome
Digitalised sketches
Figure 1.2b
Process
Figure 1.3b, First attempt
Figure 1.5b., Final outcome
Figure 1.6b
- For the word chop, I used an outline to help me guide where I want my letters to chop/cut.
Figure 1.5b
Figure 1.3b, First attempt
- I have chosen Serifa Std as the font for my first attempt.
- I then rearranged the height of the letters to give a more flowy look to represent 'windy'.
Figure 1.4b, Second attempt
- After my first attempt I thought that it looked a bit too basic and it doesn't have a specific approach to it therefore I rotated the letters in a random manner as well.
- I then rearranged the height of the letters to give a more flowy look to represent 'windy'.
Figure 1.4b, Second attempt
Figure 1.5b., Final outcome
- Finally I made the letters closer to each other as it was too far from each other and this is my final outcome for the word 'Windy'.
Figure 1.6b
Figure 1.5b
- After outlining it, I used the pathfinder to divide my letters and get the final outcome for the word 'Chop'.
Figure 1.6b
Figure 1.6b
- Final outcome for the word 'Chop-Chop'.
Figure 1.7b. first attempt
Figure 1.7b. first attempt
- I tried to emphasise the word 'Roar' by making the last letter bigger than the rest
- However it felt like it has been done too many times and lacks uniqueness.
Figure 1.8b, second attempt
- However it felt like it has been done too many times and lacks uniqueness.
Figure 1.8b, second attempt
- I tried making it more unique by rearranging it in an ascending manner.
Overall final outcome
Figure 1.9b, final outcome
Type Expression Animation
Process
Figure 1.10b, windy frames
figure 1.11b, Adobe Photoshop animation
Process
Figure 1.10b, windy frames
figure 1.11b, Adobe Photoshop animation
Final animation:
Figure 1.12b, final
Figure 1.12b, final
Task 1: Exercise 2 - Text Formatting
For our second exercise, we were required to do letter kerning, tracking, typefaces and others and create a layout by using text formatting.
Kerning & Tracking Exercise
Figure 2.2b, After Kerning
Figure 2.3b, Comparison
For our second exercise, we were required to do letter kerning, tracking, typefaces and others and create a layout by using text formatting.
Kerning & Tracking Exercise
Figure 2.2b, After Kerning
Figure 2.3b, Comparison
Text Formatting Layout Drafts
For the second task, we were given an abstract of "I am Helvetica" by John Doe and our objective was to create a layout using the text given. We have to use the methods that were taught which are kerning, paragraph spacing, leading and font sizes.
Figure 2.4b, Drafts for layout ideas
For the second task, we were given an abstract of "I am Helvetica" by John Doe and our objective was to create a layout using the text given. We have to use the methods that were taught which are kerning, paragraph spacing, leading and font sizes.
Figure 2.4b, Drafts for layout ideas
Finalised Outcome
Figure2.5b, Final outcome jpeg without grids
Figure 2.6b, Final outcome PDF without grids
Figure 2.7b, JPEG with grids
Figure 2.8b, PDF with grids
Figure2.5b, Final outcome jpeg without grids
Figure 2.6b, Final outcome PDF without grids
Figure 2.7b, JPEG with grids
Figure 2.8b, PDF with grids
HEAD
Font/s: Gill Sans Std Bold (Headline), Gill Sans Std Italic (Byline)
Type Size/s: 42pt (Headline), 13pt (Byline)
Leading: 48pt
Paragraph spacing: -
Font/s: Gill Sans Std Bold (Headline), Gill Sans Std Italic (Byline)
Type Size/s: 42pt (Headline), 13pt (Byline)
Leading: 48pt
Paragraph spacing: -
BODY
Font/s: Gill Sans Std Regular
Type Size/s: 10.5pt
Leading: 12.5pt
Paragraph spacing: 12.5pt
Characters per-line: 63 characters
Alignment: left aligned
Font/s: Gill Sans Std Regular
Type Size/s: 10.5pt
Leading: 12.5pt
Paragraph spacing: 12.5pt
Characters per-line: 63 characters
Alignment: left aligned
Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 50 mm bottom
Columns: 4
Gutter: 5 mm
Columns: 4
Gutter: 5 mm
C. FEEDBACKS
Week 2 - Exercise 1: Type Expression
Week 2 - Exercise 1: Type Expression
General feedback: Come up with ideas
for the sketches. No distortion is
allowed and don't use illustrative
visuals.
Specific feedback: Put horizontal lines for each category of your e-portfolio. Do the labels for other modules as well. Complete the lecture recordings ASAP and update your e-portfolio regularly.
Week 3
Specific feedback: Put horizontal lines for each category of your e-portfolio. Do the labels for other modules as well. Complete the lecture recordings ASAP and update your e-portfolio regularly.
Week 3
General feedback: When you format your e-portfolio, it can be screen grabbed and jpeg. But don't embed it until it is finalised.
Week 4
Specific feedback: Do further reading, update lecture and feedback.
Week 5
Specific feedback: No updates on further reading
Week 6
General feedback: Break the layout into parts. Don't use italic for body paragraph font. Avoid having only one word in one line, have at least 2 or 3.
Week 4
Specific feedback: Do further reading, update lecture and feedback.
Week 5
Specific feedback: No updates on further reading
Week 6
General feedback: Break the layout into parts. Don't use italic for body paragraph font. Avoid having only one word in one line, have at least 2 or 3.
D. REFLECTION
- Overall, I think the assignment's workload is quite heavy but it has helped me get use to using Adobe Illustrator and Adobe InDesign.
E. FURTHER READING
Just My Type by Simon Garfield
For the first book choice of my further reading, I chose read a book made by Simon Garfield, called 'Just My Type'. I read two chapters from the book. One being Chapter 2: Capital Offence - Gill Sans. As well as Chapter 7: Baskerville is Dead.
Chapter 2 talked about the revolution or development of the typeface Gill Sans. Other than that, the book also talks about the creator of the typeface itself, Eric Gill. It is said that Eric Gill was commissioned by his friend, Stanley Morison to design an original sans face for Monotype.
Chapter 7: Baskerville is Dead. This chapter talks about a German physicist and hunchback named Georg Cristoph Litchenberg who travelled across the world just to visit one John Baskerville of Birmingham, but later found out that he died in previous January.
Comments
Post a Comment