Typography | Task 1 :Exercises 1 & 2
28.03.2022 - 02.05.2022 | Week 1 - Week 6
Yap Sze Ying | 0349172
Bachelor of Mass Communication (Hons) Digital Media Production
Typography | Task 1 :Exercises 1 & 2
LECTURES
Week 1 | Introduction & Briefing
Pre-recorded Lecture | Typo_0 Introduction
"Typography is now something everybody does"
We met our lecturer, Mr Vinod during the first week of the session. He started by explaining the platforms we used for this module, such as the Facebook Group, Google Drive for document storage, and Google Sheet for attendance. Besides, Mr Vinod shows us how to access the Facebook group announcement and files, which include our online class URL, spreadsheet, attendance, pre-recorded videos, and others. Everything is accessible on the Facebook group, making it easier for everyone to get resources. Mr Vinod then introduced Module Information Booklet to us for an outline of the module and what to expect by the end. Following that, he taught us how to set up our E-portfolio on Blogger utilizing YouTube tutorial videos and pre-recorded lectures to learn more about typography. It was emphasized to us that we should update our E-portfolio weekly to keep records of our design progress. After the briefing session about this module, we also had a self-introduction round, in which we each told the class something about ourselves.
Typography is a fundamental component of any design studies discipline. It develops attributes that are fundamental to any field, including attention to detail, composition, and other aspects of design disciplines as with animation, graphic design, and new media, and others. Typography has evolved over 500 years: calligraphy > lettering> typography. And like any craft that has been developed over time, it employs a number of terminologies, conventions and unwritten rules depending on your disposition or influences with regard to style.
"Typography is now something everybody does"
Terminology
- Font: a font refers to the individual font or weight within the typeface.
- Typeface: a typeface refers to the entire family of fonts/weights that share similar characteristics/styles.
 |
| Figure 1.0 Example of Fonts |
 |
| Figure 1.1 Example of Typefaces |
Week 2 | Development & Timeline
In this week's session, we'll be continuing to get directly into sketching. Mr Vinod took our class attendance by having us upload our draft sketches on the Facebook group's comments page. Mr Vinod then advised us of some suggestions on our sketching. To finalize our sketching, we must digitize our type expression utilizing Adobe Illustrator based on the feedback given by the lecturer.
Mr Vinod provided four questions that he used to provide constructive feedback on our sketches:
1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?
Pre-recorded Lecture | Typo_1 Development
Early letterform development: Phoenician to Roman
Scratching into wet clay with a sharpened stick or carving into stone with a chisel were the first ways of writing. These tools and materials can be seen to have evolved into the forms of uppercase letterforms. Uppercase forms are composed of a simple combination of straight lines and circles.
 |
| Figure 2.0 Evolution from Phoenician letter & Phoenicians votive stele Carthage,Tunisia (4th April 2022) |
The Greeks developed a writing style known as 'boustrophedon' (how the ox ploughs), in which the lines of text alternated between reading from right to left and left to right. Letter spacing and punctuation were not used by the Greeks and the Phoenicians. Later civilizations, such as the Greeks, would adopt a strict left-to-right form of writing.
 |
| Figure 2.1 Boustrophedon Style (4th April 2022) |
Carvers in Etruscan (and then Roman) times painted letterforms in marble before inscribing them. Certain qualities of their strokes were carried over into the carved letterforms, including a change in weight from vertical to horizontal and a broadening of the stroke at start and finish.
 |
| Figure 2.2 Early Letterform Development (4th April 2022) |
Hand script from 3rd – 10th century C.E.
 | |
|
Square Capitals⟶ Rustic Capitals⟶ Roman Cursive ⟶ Uncials⟶Half-Unicials ⟶
Caroline Miniscule ⟶ Blackletter (Textura)⟶ 42-line bible, Johann Gutenberg, Mainz
Text type classification
 | |
|
1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750 Transitional ⟶
1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1900 Sans Serif⟶ 1990 Serif/Sans Serif
Week 3 | Basic & Describing Letterforms
We'll be continuing to get directly into digitization parts in this week's session. Mr Vinod instructed us to upload our digitization parts to the Facebook group's comments page. Mr Vinod then gave us some suggestions and asked us to revise our design based on the feedback given by the lecturer. To finalize our digitization parts, we have to create with Gif Animation utilizing YouTube tutorial videos. We uploaded our GIF Animation on the Facebook group's comment page and received some constructive feedback from the lecturer, which helped in improving it. In addition, we were assigned tasks that included watching a pre-recorded video on text formatting on YouTube and beginning to track our progress.
Typography utilizes a series of technical terms. These are usually used to define specific aspects of letterforms. It is a good idea to become acquainted with the lexicon (known as terminologies). Knowing the components of a letterform makes it easier to recognise specific typefaces.
 |
| Figure 3.1 Describing Letterforms (4th April 2022) |
Baseline - The letterforms' visual base is the imaginary line
Median - The x-height of letterforms is defined by an imaginary line
X-height - The height of the lowercase 'x' in any typeface
Stroke - Any line that defines the basic letterform
 |
| Figure 3.2 Type of Letterforms (4th April 2022) |
Apex / Vertex - The point formed by uniting two diagonal stems (apex above and vertex below)
Arm Short - horizontal (E, F, L) or upward-inclined (E, F, L) strokes off the letterform's stem (K, Y)
Ascender - The section of a lowercase letterform's stem that projects above the median
Beak - The half-serif finish on certain horizontal arms
Barb - A curving stroke with a half-serif ending
Bowl - The rounded form of a counter. It's possible to have the bowl open or closed
Bracket - The transition between the serif and the stem
Cross Bar - The horizontal stroke in a letterform that joins two stems together
Cross Stroke - The horizontal stroke in a letterform that joins two stems together
Crotch - The interior area where two strokes connect
Descender - The part of a lowercase letterform's stem that extends below the baseline
Ear - The stroke that extends from the letterform's main stem or body
Em/en - Em used to refer to the width of an uppercase M, but currently it refers to the distance equivalent to the typeface's size (an em in 48 points). An en is half the size of an em. Em/en spaces and em/en dashes are the most commonly used terms
Finial - The rounded non-serif terminal to a stroke
Leg - A short stroke from the letterform's stem, either at the bottom of the stroke (L) or inclined downward (D) (K, R)
Ligature - The character formed by combining two or more letterforms
Link - The stroke that links the bowl and the loop of a lowercase letter G
Loop - The bowl generated in the descender of the lowercase G in some typefaces
Serif - The foot at the end of the stroke that is right-angled or oblique
Shoulder - The curved stroke that is not part of a bowl
Spine - The S's curving stem
Spur - The extension that articulates the junction of the curved and rectilinear strokes
Stem - The significant vertical or oblique stroke
Stress - In round forms, the thin stroke indicates the orientation of the letterform
Swash - The flourish that extends the letterform's stroke
Tail - The curled diagonal stroke at the end of certain letterforms
Terminal - A stroke without a serif's self-contained finish. This is a sort of a catch-all phrase. Flat ('T' above), flared, acute ('t' above), grave, concave, convex, or rounded as a ball or a teardrop are all types of terminals (see finial)
A typeface's full font contains considerably more than 26 letters, numerals, and a few punctuation marks.
 | |
|
Roman - the uppercase forms are obtained from inscriptions of Roman monuments. The 'Book' stroke in roman is a slightly lighter stroke.
Italic - Inspired by Italian handwriting from the fifteenth century. Oblique conversely are based on a roman typeface
Boldface - Characterized by a thicker stroke than a roman form. It's also known as'semibold,"medium,' 'black,' 'extra bold,' or'super bold,' depending on the relative stroke widths within the typeface
Light - A lighter stroke than the roman form. 'Thin' strokes are even lighter strokes
Condense - A compressed version of the roman form, and styles that are extremely condense are often referred to as 'compressed'
Extended - A roman font that has been extended
Week 4 | Text / Tracking: Kerning & Letter spacing
We're going through the layout of text formatting in this week's session. Besides, we're taught to watch YouTube tutorial videos and follow the guidelines step by step to understand more about text formatting. Mr Vinod then made some remarks on how we should keep an eye out when completing these exercises. In addition, Mr Vinod instructed us to post a link on our E-portfolio for Exercise 1 Type Expression on the Facebook group's comment page and had mentioned the date for Task 1 submission (Type Expression & Type Formatting).
Pre-recorded Lecture | Typo_3 Text_P1
Kerning - the process of adjusting the space between characters automatically
Letter spacing - the process of inserting space between letters
Tracking - the process of adding and removing space in a word or sentence
 | |
|
Lowercase letterforms require the counterform created between letters to sustain the line of reading, whereas uppercase letterforms could stand on their own.
Text Formatting
Flush left - The asymmetrical experience of handwriting is mirrored in this format. Each line begins at the same point but ends at the end of the previous line's last word.
Centered - This format imposes symmetry on the text by assigning both ends of each line equal value and weight.
Flush right - This format emphasises the end of a line rather than the beginning.
Justified - Like centering, this format imposes the text a symmetrical shape. It is achieved by enhancing or reducing the amount of space between words and, in some case, between letters.
Typographer’s first job—Convey the author's message in a clear and appropriate manner
 | |
|
Text / Texture
It's important to know how different typefaces feel when used as text. Various typefaces are suitable for various messages. Consider the various textures of these typefaces as well. Type with a relatively large x-height or a thicker stroke width produces a darker mass on the page than type with a smaller x-height or a lighter stroke width. Sensitivity to these colour contrasts is crucial in designing successful layouts.
 | |
|
 | |
|
Text / Leading and Line Length
Text / Type Specimen Book
Type size - Text type should be large enough to read easily at arm's length.
Leading - Tightly arranged text encourages vertical eye movement, making it easy for a reader to lose their place. When type is positioned too loosely, it forms striped patterns that distract the reader's attention away from the content.
Line Length - Appropriate text leading is as much a function of line length as it is of type size and leading. Shorter lines necessitate less leading, while longer lines necessitate more. Keeping a line length of 55-65 characters is a decent rule of thumb.
Text / Type Specimen Book
 | |
|
A type specimen book (or ebook for screen) is a reference for type, type size, type leading, type line length etc. Text should create a field that can fill a page or a screen, according with compositional requirement. Consider ideal text to have a middle grey value (on the left in the diagram as shown in Figure 4.4), rather than a series of stripes.
Week 5 | Text / Indicating Paragraphs
Mr Vinod checked our E-portfolio through an online class at this week's session. Mr Vinod then provides us constructive feedback on how to strengthen the detail and structure of our E-portfolio. In addition, Mr Vinod brief us an overview of task 2 Editorial Text Options, which was about the combination of type expression and text formatting using Adobe Indesign and Adobe Illustrator.
Pre-recorded Lecture | Typo_4 Text_P2
Text / Widows and Orphans
Text / Highlighting Text
Text / Cross Alignment
Week 6 | Letters / Understanding letterforms
Pre-recorded Lecture | Typo_5 Understanding
Letters / Maintaining x-height
Letters / Form / Counterform
Letters / Contrast
Week 7 | Typography in Different Medium
 | |
|
'Pilcrow' (¶) is used to indicate paragraphs space
Indent is the same size as the line spacing or the same size as text's point size
Hanging Indent is an indent that indents all text except the first line
Note: Make sure that there's no ragging on the right side (flushed left) when utilizing indentation. It's best to apply it on text with justified.
 | |
|
Text / Widows and Orphans
 | |
|
A 'Widow' is a short line of type at the end of a column of text that is left alone. A short line of type left alone at the start of a new column is known as an 'Orphan'. They are considered as serious blunders among designers. Therefore, line endings should be rebreaked to avoid widows.
Text / Highlighting Text
Utilising Highlighting Text as below:
 | |
|
- Bold & Italics
- Change the colour of the text. Exp: black, cyan, magenta & readable yellow
- Applying a colour field to the back of the text while maintaining the left reading axis with aligning properly
- Change the font family Exp: sans serif fonts appear larger, thus they must be reduced by 0.5 to match the serif typeface's x-height
- Certain typographic elements, such as bulletin points and quote marks must sometimes be positioned outside the left margin of a type column
- Text / Headline within Text
 | |
|
‘A’ heads are set larger than the text, in small caps and in bold. An A head ‘extended’ to the left of the text in the fourth example.
 | |
|
The B heads is subordinate to A heads. A new supporting argument or example for the existing topic is indicated with a B head. Small caps, italic, bold serif, and bold san serif are all used in the B heads.
 | |
|
The C heads highlights specific aspects of the text in the B heads. These C heads are shown in small caps, italics, serif bold, and san serif bold, as with the B heads. In this configuration, the C heads are are followed by at least an em space for visual separation.
Text / Cross Alignment
Cross aligning headlines and captions with text type reinforces the page's architectural sense—its structure—while also articulating complementary vertical rhythms.
 | |
|
Week 6 | Letters / Understanding letterforms
Pre-recorded Lecture | Typo_5 Understanding
The uppercase letter forms below appear to be symmetrical, but in fact they are not. The two varied stroke weights of the Baskerville stroke form (below) are easily visible; more noteworthy is the fact that each bracket connecting the serif to the stem has its own arc. Although the uppercase letter forms appear to be symmetrical, but a closer inspection reveals that the left stroke is thinner than the right.
 | |
|
 | |
|
Letters / Maintaining x-height
X-height generally referred to the size of the lowercase letterforms. Keep in mind that curved strokes, such as in the letter ‘s’, must rise above the median (or sink below the baseline) to appear to be the same size as the vertical and horizontal strokes to which they are adjoining.
 | |
|
Letters / Form / Counterform
Counterform is the area of a letter that is entirely or partially enclosed by a letter form or a symbol (the counter-space/the hole of) (Ezzat, 2020).
 | |
|
It's worth observing that the 'S' retains its identity as the letterform is enlarged, whereas the 'g' loses its identity as individual elements are examined without the context of the entire letterform.
Letters / Contrast
Contrast is the most powerful dynamic in design principle.
Simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light
 | |
|
Pre-recorded Lecture | Typo_6 Screen&Print
System Fonts for Screen / Web Safe Fonts
INSTRUCTIONS
Digitisation
Font : Adobe Caslon Pro
Typeface : Adobe Caslon Pro Regular, Bold & Italic
Font size : 10pt, 11pt (Body) 25pt (Subheading) 41pt, 53pt (Title)
FEEDBACK
Week 2
General Feedback:
Week 3
General Feedback:
Week 4
General Feedback:
REFLECTIONS
Experience
Findings
FURTHER READING
The pursuit of intellectual elegance invests design with a timeless quality:
References:
 | |
|
Long before we read through a screen, type was created primarily for reading from print. It is the designer's responsibility to ensure the text is smooth, flowing, and pleasant to read. The most common typefaces for printing are Caslon, Garamond, and Baskerville. Because of their characteristics, which include appearing elegant and intellectual while also being highly readable when set in a small font size. They're a classic typeface that's adaptable and readable, with a neutrality and versatility that makes typesetting a breeze.
 | |
|
Web's typefaces are optimised and frequently modified to improve readability and performance in a variety of digital environments. More open spacing is another significant modification, especially for typefaces intended for smaller sizes. In a non-print environment, all of these elements contribute to enhance character recognition and overall readability.
 | |
|
Font Size - Text printed on books are usually set at 10 pt because we read them closely. If we were reading them at arm's length, we'd want them being at least 12 pt, which is equivalent to 16 pixels onscreen.
Hyperactive Link/ Hyperlink - word, phrase, or image that can be clicked to bring you to a new document or section within the current document.
System Fonts for Screen / Web Safe Fonts
Each device has a pre-installed font selection which is mostly determined by the operating system. Fonts including Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond could be use on both Mac and Window platform.
 | |
|
 |
| Figure 7.4 Static vs Motion (7th April 2022) |
Static typography - Constructed with strong geometric forms with informational, promotional, formal or aspirational pieces of designs in monospaced style (Kirilenko, 2021). All forms of static typography with a wide range of purposes, including billboards too posters, magazines to fliers.
Motion typography - A form of animation that uses moving text to engage the viewers ’ attention, set a tone, and entertain them. For example, commercials, music videos, mobile apps, and websites utilize it to add artistry to their words and make them more compelling.
-THE END-
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1D95P0cPKIYTb6tSS8sJ0TTmatWkGVDjS/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercises 1 - Type Expression
Sketches
2. Grow
3. Wink
4. Pop
5. Explode
6. Squeeze
Sketches
Mr Vinod instructed us this week to use the art of typography to associate expressions of six provided words. Before digitizing our ideas in Illustrator, we were told to sketch them out. We had to choose the ideal typeface for the word, sketch it out, and then animate one of the fourth final ideas. In addition, we were given 10 distinct types families to work with. The sketches are as follows:
1. Cough (mandatory)4. Pop
5. Explode
 | |
|
Digitisation
Mr Vinod has been given a task with digitization words using Adobe Illustrator this week. We had to use the 10 typefaces provided in our procedure. The digitization are as follows:
 | |
|
 | |
|
Final Submission
 | |
|
-Final Type Expression (10th April 2022)-
Cough - I created the text expression with Futura Std typefaces (Bold). I created the word 'Cough' using a bunch of vague alphabet to represent the 'cough' expression.
Grow - I created the text expression with the typefaces Univers LT Std (Thin Ultra Condensed). Increased font sizes were used to express the word 'Grow.'
Pop - I created the text expression with the typefaces Bembo Std (Extra Bold). I created the word 'Pop' by utilising a balloon to make the word 'Pop' stand out more.
Explode - I created the text expression with the typefaces Bodoni Std (Bold). To present after an explosion, I designed the phrase 'Explode' with a 'Free Fall' motion.
I chose the word 'Pop' for the animated type expression and created 20 frames (as shown in Figure 1.4).
 | |
|
 | |
|
-Final Animated Type Expression 'Pop' (11th April 2022)-
Task 1: Exercises 2 - Text Formatting
Remarks:
Mr Vinod was introduced to new software which is In Design. In the pre-recorded lesson, we were guided step by step by the lecturer to finish the task given. We'll then construct a unified final layout that addresses many aspects of text formatting, such as letter spacing, kerning, leading, paragraph spacing, alignment, etc. This task will enable us to practice and develop our spatial arrangement and information hierarchy skills.
- Line Length - Between 55 to 65 words
- Point Size (within A3/A4) - Between 8 to 12 points
- Heading - Double point size's leading with the body text's leading
- Body Text - Equally space between negative and positive (middle gray value)
- Leading - Add within 2 to 3 points of point size depending on the typeface (same as Paragraph Spacing). Typefaces have different x-heights and thus may extend beyond the baseline grid
- Do not exceed +3/-3 for tracking to reduce ragging (line)
- Turn off hyphenation. If hyphenation is enabled, ensure there aren't too many other tracking adjustments that need to be done
- Either use left align (preferred) or left justify
- If using justify, ensure there aren't too many large awkward spaces between the words
- Maintain cross alignment
- Avoid widows and orphans
 |
| Figure 1.5 Text with Kerning & Without Kerning (12th April 2022) |
 |
| Figure 1.6 Paragraph with Kerning & Without Kerning (12th April 2022) |
 |
| Figure 1.7 Cross Alignment with Baseline Grid (12th April 2022) |
 |
| Figure 1.8 Layout Attempt 1 (21st April 2022) |
 |
| Figure 1.9 Layout Attempt 2 (21st April 2022) |
 |
| Figure 2.0 Layout Attempt 3 (21st April 2022) |
 |
| Figure 2.1 Layout Attempt 4 (21st April 2022) |
Final Submission
 |
| Figure 2.2 Final Type Formatting (21st April 2022) |
-Final Text Formatting with Guides and Grids (21st April 2022)-
-Final Text Formatting (21st April 2022)-
Typeface : Adobe Caslon Pro Regular, Bold & Italic
Font size : 10pt, 11pt (Body) 25pt (Subheading) 41pt, 53pt (Title)
Leading : 12pt (Body)
Paragraph Spacing : 12pt (Body)
Margins : 100mm (Top), 12.7mm (Bottom, Inside, Outside)
Columns : 4
Gutter (for columns) : 5mm
Margins : 100mm (Top), 12.7mm (Bottom, Inside, Outside)
Columns : 4
Gutter (for columns) : 5mm
Alignment : Left Justify
Average characters per line : 50-64 words
Average characters per line : 50-64 words
Week 1
General Feedback:
We were instructed on how to manage content on our E-portfolio which needs to be completely set up. Besides, we were also given our tasks with words from which to choose and headed over to sketch.
Specific Feedback: N/A
Week 2
General Feedback:
Mr Vinod stated that when designing, sometimes the designer gets carried away with the design and the design loses its meaning. If adding design to words expression looks nice, but it wasted time on it. Mr Vinod advised that I should work with typefaces that provided to express such as one of the sketches of the word "Grow" and cautions us not to modify the typeface too much during class.
Specific Feedback:Explode - Not enough to express the meaning of it, therefore needed to be modified.
Cough - One of the sketches was acceptable and the typefaces provided should be used in designing.
Pop - One of the sketches was meaningless in and it can't use thunder as a design component and needed to be redesigned.
Grow - One of the sketches was nice, but there aren't any typefaces that could be found from the 10 typefaces provided and should be designed again.
Week 3
General Feedback:
Mr Vinod remarked that most students make the following mistakes: the text/expression is not visibly present, and the space provided is not dominantly used, causing the loss of attention. In addition, the Gif Animation after digitization should be more appealing.
Specific Feedback: I chose the words 'Cough,' 'Grow,' 'Pop,' and 'Explode' for digitization with the explanations for each text expression. Overall, the design was quite good and easily comprehensible. Furthermore, the Gif Animation I created for my initial attempt with the term 'Cough' lacks expression and needed to be reworked.
Week 4
General Feedback:
Mr Vinod made some remarks on how we should keep an eye out when completing type formatting. Furthermore, we're also instructed from watching YouTube tutorial videos to conduct numerous layouts of text formatting before selecting one as the final layout.
Specific Feedback:
Mr Vinod stated that the E-portfolio was well-organized and presented. Mr Vinod then suggested that the 'Pop' gif animation may be more engaging if the balloon is moved around more. Moreover, the 'Sample works on Text Formatting' section of the learning tutorials from YouTube tutorials video could be more clearly defined.
Week 5
General Feedback:
Mr Vinod gave us some advice on how to make our E-portfolio more detailed and organized. In addition to this, we're instructed to watch YouTube tutorial videos until week 6 before submitting our E-portfolio for task 1.
Specific Feedback:Mr Vinod stated that the E-portfolio was well-organized and the information provided was sufficient. Mr Vinod then suggested adding paragraph spacing after the word "Exercise 1". Besides that, Mr Vinod also suggested that I could make the final type formatting 1 more appealing by presenting the paragraph in a zigzag form.
REFLECTIONS
Experience
Typography was an interesting module for me as it is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. In week 1, we were instructed on how to manage content on our E-portfolio in uploading our weekly tasks. During the sketching parts of week 2, it was slightly difficult and challenging to come up with ideas as we were all just able on using 10 typefaces without graphical components or abstract typography. It was challenging for me because my ideas were quite less and I tried to acquire some inspiration from websites. In week 3, we began the digitalizing process, which involved creating Gif animations with Adobe Illustrator and Photoshop. This was the most challenging aspect for me as I had to learn Adobe Photoshop to produce unique gif animations. In week 4, it was challenging for me to figure out different layouts when it comes to text formatting. Besides, the most frustrating part was figuring out the baseline grid as adjusting it will take longer. In week 5, it was a struggle for me as I needed to adjust the format and layout of my E-portfolio before submitting it. Throughout these few weeks, I learned a great deal of knowledge about text and type, as well as how to express them effectively. It had been an interesting journey.
Observations
In week 1, I discovered that starting a blog for our design journey is a great way to keep track of our design progress. In week 2, I realized that I'd have to work on my illustration skills. Besides that, I have a lack of creative ideas and am unable to express meaning through type expression which requires a search for further inspiration on the website or through the reading of books. In week 3, I found that the digitalization parts for our word expression were quite interesting although we could only use the 10 typefaces provided, and I was able to create some unique designs. In addition, I found that generating gif animation requires a great deal of patience, which I found to be a quite challenging and interesting task. In week 4, I've observed that there are a variety of ways to work with text formatting, such as aligning the text to create a sense of hierarchy and visual weight, adjusting the appropriate point size, paragraph spacing, and text leading, turning the hyphenate and others, to create a readable and appealing layout. In week 5, I realized that altering my entire format requires lots of patience to do it properly and thoroughly. Throughout these few weeks, I've realized that various design components go hand in hand with typography and that it needed to ensure that it was legible, readable, and appealing when displayed.
In week 1, it was quite beneficial to keep track of my design when I used E-portfolio to record the weekly design progress. In week 2, I realized that reading additional books or resources and exploring the design's website has helped to have a deeper understanding of typography, which necessitates creativity and technical skill. In week 3, I discovered how significant each role plays in design and how words could be expressed in a variety of ways after learning software such as Adobe Photoshop and Illustrator through the tasks (text expression) given. In week 4, I discovered that text formatting was a good and effective way of teaching students how to work within limitations and explore various ways of expressing themselves, as well as how to arrange and format type. In week 5, I discovered that my E-portfolio is quite neatly and comprehensive after modifying the format based on the lecturer's feedback. Throughout these few weeks, I discovered that typography has several rules, which took some time to digest as well as comprehend and remember all of the terminologies. In addition to this, I found that we need to train ourselves to scrutinize every little aspect while also severely critiquing our work so that we can improve.
FURTHER READING
 | |
|
“If you can design one thing, you can design everything”
All of his works are based on the idea of simplicity and geometric shapes; show a timeless, rational, and visually forceful design that will last forever. Semantic, Syntactic, Pragmatics, Discipline, Appropriateness, Ambiguity, Design in one, Visual Power, Intellectual Elegance, Timelessness, Responsibility, and Equity are among the 12 aspects of design mentioned in this book.
 | |
|
Vignelli believed these principles - semantics, syntax and appropriateness - should be applied to all projects across every sector of design, whether the subject is the layout of a business card or the architecture of a skyscraper. 'Design is one,', as he expressed it:
Design is an unique discipline that may be applied to a wide range of subjects, regardless of style. Design discipline is above and beyond any style. All style requires discipline in order to be expressed. Design is a discipline, a creative process with its own set of principles for managing the consistency of its output in the most direct and expressive way possible toward its goal (Staff, 2014).
 | |
|
The pursuit of intellectual elegance invests design with a timeless quality:
"We are for a Design that lasts, that responds to people’s needs and to people's wants. We are for a Design that is committed to a society that demands long lasting values. A society that earns the benefit of commodities and deserves respect and integrity."
Vignelli's commitment to design has a religious dimension to it, with his pursuit of 'intellectual elegance' bearing comparison with the believer's pursuit of God. The intensity with which Vignelli pursued his art typifies the modernist movement that dominated the twentieth century. The breakdown of conventional religious belief caused a void that human culture had to fill for modernists in every sector - design, literature, art, music, and architecture. The pursuit of excellent has taken the place of God's adoration (Staff, 2014).
References:
- Vignelli, M. (n.d.). The vignelli canon - rit. Retrieved April 16, 2022, from https://www.rit.edu/vignellicenter/sites/rit.edu.vignellicenter/files/documents/The%20Vignelli%20Canon.pdf
- Staff, C. B. (2014, June 6). What Massimo Vignelli can teach designers today. Creative Bloq. Retrieved April 16, 2022, from https://www.creativebloq.com/graphic-design/massimo-vignelli-61411897
- Principles all designers should know: The vignelli canon. EasyEdit.pro. (2021, November 5). Retrieved April 16, 2022, from https://easyedit.pro/blog/principles-all-designers-should-know-the-vignelli-canon/
- Smith, M. (2014, May). Typography alignment: Flush left, flush right, justified & centred. Edgee. Retrieved April 17, 2022, from https://www.edgee.net/typography-tutorial-paragraph-alignments-the-ins-and-outs-of-justified-flush-left-flush-right-and-centred-text/
- Ezzat, N. (2020, January). The relation between figure & background expressed as form & counter form of the Typography in printed ads. Retrieved April 17, 2022, from https://idj.journals.ekb.eg/article_81720_641800cfe2a4795ccb45602d96cdc2f2.pdf
- Kirilenko, S. (2021, June 14). Static font - at fontfabric™. Fontfabric. Retrieved April 17, 2022, from https://www.fontfabric.com/fonts/static/
Comments
Post a Comment