Typography / Task 1: Exercises
Week 1: Introduction
Tuesday, 25 August 2020
In the first class of Typography, we were introduced to our lecturers Mr. Vinod, and Mr. Shamsul. We started creating our new Gmail account, which was to be used for our Bachelor's course, and then we made our typography blog. Mr. Vinod then explained to us the layout that all the blog post needs to follow.
- Lectures
- Instructions
- Feedback
- Reflections
- Further Reading
After that, he introduced us to the google link to write the feedback given as either 'general feedback' or 'specific feedback.' We were also given an overview of all the projects to come and how they are graded. After this, Mr. Shamsul opened Illustrator and demonstrated how to style the letter and even showed us some examples done by the last semester.
Lectures
Lecture 1: Introduction
|
|
Fig.1.1 Typeface vs. Type family, 26.8.2020 |
Lecture 2: Development / Timeline
Lecture 2 was on the history and evolution of typography. Tools have had a significant impact on the writing produced throughout history; they have gone from stick to quill pen to modern ballpoint pen and even digitalized. The Phoenicians, the Semitic language of the Phoenicians was the earliest method of writing. They wrote from right to left; this was later changed when the Greeks invented a new type of paper called 'Boustrophedon.' Boustrophedon alternates from left to right, then switches from right to left and continues this sequence.
|
| Fig.1.2 Phoenicians alphabet |
|
||
|
Fig.1.3 Boustrophedon writing The Etruscan used to paint over the marbles before they carved it, allowing the letters to have strokes. In the 3rd – 10th century C.E. Charlemagne standardized test. They made the use of capital letters, lower case, and punctuation an everyday use in calligraphy writing. Then came the Alcuin's script, in northern Europe, Blackletter gained popularity, and in the south, 'Rotunda' was more frequently used.  Fig.1.4 Blackletter Timeline
|
Fig.1.6 Assamese and Devanagari Alphabets Source: http://wizzyschool.com/language/alphabets%20of%20the%20world.php
While the origin of the Assamese language is unknown, you can see its similarities to the Devanagari Alphabets. Devanagari alphabets contain 44 letters, and the Assamese Alphabets have 52 letters. Both Hindi and Assamese write from left-to-right, horizontally. Assamese typography is more rounded than Hindi.
Week 2:
Tuesday, 1 September 2020
In today's class, Mr. Vinod checked our blog and gave us feedback on what needs to be added and modified. He looked at our work and even showed us how we could make it better. The Lectures are all uploaded on Facebook so after class, I watched Lecture 3, which was on the anatomy of typography.
Lecture 3: Basic
|
| Fig.1 Baseline, median, and X-height |
Stroke: any line that
defines the basic letterform
Apex / Vertex:
The point created by joining two diagonal stems. The apex is above and the vertex is below.
Arm:
short strokes off the stem.
Barb: The half serif that finishes on a curved stroke.
Beak:
The half serif that finishes on the horizontal arm
Bracket:
Transition between serif and stem
Crossbar:
The horizontal stroke that joins two stems.
Crotch: the interior space above the vertex where two strokes meet.
Leg: short strokes off the stem of the letterform
Serif: The right-angled or oblique foot at the end of the stroke.
Spine: The curved stem.
Stem: The significant vertical stroke.
Tail: The curved diagonal stroke at the finish of certain letterforms.
|
|
Fig.1.2 Anatomy of typography |
Ascender: The portion of the stem that exceeds the median in a
lowercase letter form
Bowl: Rounded form that describes a counter. Can be opened or
closed.
Cross Stroke: Strokes found in the letter 'f' and 't'
Descender: The portion of the stem that is projected below the baseline
Ear: The stroke
extending out from the main stem.
Finial: The rounded non-serif terminal to a stroke.
Link: The stroke that connects the bowl and the loop.
Loop: The bowl created in the descender
of the lowercase G (only in certain typeface).
Shoulder: The curved stroke that is not part of a bow
|
|
Fig.1.3 Anatomy of typography |
Week 3:
Today's class was online for all of us, so we interacted mostly on zoom. In the first half of the class, Mr. Shamsul and Mr. Vinod divided us into four groups and gave us a specific timing to share our work. When our turn came, they checked our word animation and gave us feedback on what we could improve. We had a discussion in the next half of the class, where Mr. Vinod asked us how we were dealing with our workload. We got a chance to share if we were struggling with anything, and Mr. Vinod gave us advice on better managing our time. He also shared his experience as a student of design. Then we were given a break, after which we played Kahoot before the class ended.
Lecture 4: Text (part 1)
Kerning: is the adjustment of space between lettersLetterspace: means to add space between letters. Letterspace should mostly be used in uppercase letters, not lowercase. This is because uppercase can stand on their own, but lowercase requires a counter form. Reduces readability if used in a paragraph of text.
Tracking: Kerning + letter space. Tracking is not used in a whole body of text; it is mostly used for a small amount of text, such as headlines that have spread around it. To make the book look more presentable. Too much or too little tracking can reduce the readability of text.
 |
| Fig.1 Normal tracking vs. Loose tracking |
Flush left: mirrors the asymmetrical experience of writing. Each line starts at the same point but ends with the last word of the sentence. Space is consistent throughout the text
Centered: symmetry upon the text and has equal value and weight on both sides. Should be used with a small amount of text.
Flush right: is the emphasis on the end of a line as opposed to its start. They are used in captions and small amounts of text.
Justified: imposes symmetrical shape on the text. Achieved by expanding or reducing space between words.
 |
| Fig.1.2 Text format |
Leading: is the space between each line of the text. The leading is decided on the vertical eye movement of the reader. It is 2-3 times larger than the type size.
Line length: not more than 55-65 characters should be in a line. Too long or too short impairs reading.
Lecture 5: Text (part 2)
Line indentation: is the same as line spacing. It is best used in 'Justified' alignment.
Widow: is the short line of text left alone at the end of the column.
Orphan: is the short line of text left alone at the start of a new column. Avoid using orphan; to fix it, use force line break.
 |
| Fig.1.3 Pilcrow symbol |
 |
| Fig.1.4 Orphan and Widow |
 |
| Fig.1.5 Highlight text |
 |
| Fig.1.6 Highlight text |
Week 4:
Tuesday, 8 September 2020The Uppercase may appear to be symmetrical but they are not symmetrical. Designers create the illusion of symmetry in their letters. There are two different stoke weights present and each bracket connecting the serif to the stem has it so own unique arc.
 |
| Fig.1. Symmetry |
 |
| Fig.1.2 Curved strokes |
Counterform plays. a crucial role in the readability of text, most designers are against using letter space because they have designed for optimal readability.
When you need variation in information, it suggested using contrast. The contrast will help differentiate the sets of information.
 |
| Fig1.3. Contrast |
Lecture 7: Screen & Print
Type for print: Calson, Garamond, Baskerville are the most common typeface used for print because they have high readability even when used in small font sizes.
Instructions
|
|
Fig.1 Sketches of the word 'Bang!' |
|
| Fig.1.2 Sketches of the word 'Twirl.' |
|
|
Fig.1.3 Sketches of the word 'Tired.' |
|
||
Fig.1.4 Sketches of the word 'Bloom.'
|
|
|
Fig.1.6 First draft |
|
Fig.1.7 Reworked Final Design |
[Animate]
|
||
|
|
||
|
|
| Fig.2 Animation Artboard 2 |
|
| Fig.2.1 Bloom gif |
|
Fig.2.2 Bloom reworked progress Fig.2.3 Bloom Final reworked gif |
[Text formatting]
 |
| Fig.2.5 Text formatting progress |
 Fig.2.6 Text formatting Final  Fig.2.7 Text formatting Final Fig.2.8 Final Text formatting  Fig.2.9 Final Text formatting Reworked  Following Mr. Vinod's instruction, I decided on the font family after pasting most of the text into the columns. I started off with two columns for the text and one column for the title and author. I put the size as 7pt and the leading as 9.5pts.  After showing my progress to Mr. Vinod he suggested I make the size bigger than 7pts and separate the text into three columns if need. He also suggested working on the baseline. I increased the size to 9pts and increased the leading to 11.5pts. I had to separate it into three columns to fit it all.  Fig.3.3 Text formatting task 2 Final Fig.3.4 Text formatting task 2 Final  Fig.3.5 Text formatting task 3 Final |
 |
| Fig.3.7 Text formatting task 3 Reworked |
 |
Fig.3.8 Text formatting task 3 Reworked |
Feedback
Week 2:
General Feedback: Mr. Vinod looked at my sketches and the progression pictures and
said everything looks good. I just need to add the Reflection and
further reading sections.
Specific Feedback: I was told to rework the execution of the word Bang!. Mr. Vinod suggested I don't use Italic and overlap the words 'A N G' to look like they are crashing into each other. He also said I could rework the design for 'Twirl," as the design was too reliant on the lines. He then helped me pick out another design from my sketches. He suggested I used the letter M to make grass. For the word tired, Mr. Vinod like my other design better than the one I picked for the final, so he suggested I go with the different designs.
Reflections
[Week 1] Experience: I had to go to my first online degree
typography class, which was a different experience than what I used
to. We virtually met our lecturers whose faces were covered with masks. Before the lesson, I was a little worried that being online would be a
disadvantage, but seeing a lot of other students online eased my
mind. Also, the lecturers were present and paid extra attention to
us, making the learning experience more comfortable.
Observations: I observed how last semester students wrote in their
blogs and what is expected from us each week. I also observed their use of
pictures and sketches to aid their blog.
Findings: One thing I noticed was that I was easily distracted
during the zoom call; that's why I decided to take notes and keep my other
devices away while the lecture was going on. This has allowed me to
concentrate more on what Mr. Vinod was saying.
[Week 2] Experience: While working on this task, the sketches part was simple to do as I
had a lot of ideas and jotted down those I liked. However, using
Illustrator was pretty tricky, since it was my first time. I watched
Mr. Vinod's videos and watched many videos on Youtube to see how my ideas could be illustrated. Luckily, I was able to finish my job, and
I was satisfied with the result.
Observations: I looked at all my classmate's blogs; as Mr. Vinod looked at
them, I noticed similar problems, and as Mr. Vinod explained how to fix them, I also took notes to improve my blog. I was also trying to see
which blog was well presented so I could make my blog better.
Findings:
- Use shift + enter to make the space between the line not too wide.
-
Select the Letter + click outline + click the inside of the
letter + delete.
- [To export fine as JPEG] export + export as + JPEG + all artboard
-
[To curve letters] warp + arc upper or arc lower.
Tracking is Kerning and letter space added in the text together.
Leading is the space between each line.
|
| Fig.1 Book Typographic design |
-
Legibility is accomplished by regulating the characteristics and
attributes inherent in typography that make the text readable.
- Typographers and designers have the responsibility of communicating as simply as possible to their readers. This allows readers to grasp typographical types with ease. Three characteristics of legibility are contrast, simplicity, and proportion.
- Two important factors are involved in the reading process the shape of the word, and its internal structure.
- Words are recognized by their distinctive shapes, while Counterforms generate patterns that provide clues for word recognition. The combination of word form and internal pattern produces a word structure that defines each phrase's specific composition.
- If text is written in all capital letters, there is a lack of legibility. Text in all capital letters often requires a much more considerable amount of space.
- On the other hand, text in lowercase letters shapes words are more distinct.
- The spacing of letterforms has a great influence on legibility. Typographic texture and tone are influenced by how letters are spaced. When the texture and spatial distances between the typographical elements are consistent, it results in a more readable text.
- The spacing between words should be proportional to the width of letters. Too much or too little can disrupt the texture.
- Text that is too short or too big makes it difficult to read. Small text makes it difficult to distinguish counterforms, whereas large text gives an appearance of text in parts rather than as a whole. The most legible sizes of text are between 9 to 12 points.
- Proper interline spacing naturally moves the eye from one line to the next. If the lines are too broadly spaced, the reader can have difficulty finding the next line.
- If the typeface weight is too light or too heavy has it reduces readability. Light typefaces can not be easily differentiated from their background, whereas a type that is too heavy appears to lose its counter forms.
- The most legible is black on a white background.
- Digital technologies have greatly changed the way designers use color and type.
 |
| Fig.1.2 Book 2 IDEAS |
- Serif is the most common font. "Serifs" are the little feet that hang off the end of letter strokes. There are three categories of serifs: Oldstyle, Modern, and Square Serif.
- Oldstyle are open and rounded with pointed serif. Heavy and light strokes.
- Modern have thin squared off serifs—more distinct heavy and light strokes than the old style.
- Square serif has a square serif and uniform strokes with little contrast.
- San serif is fonts 'without serifs' and has even stroke weight giving it little contrast.
- The script was designed to mimic handwriting. These fonts are traditional type and should never be used in all caps.
- Font families are fonts of the same design by different weights. There are:
- Plain/ Roman
- Italic
- Bold
- Bold Italic
 |
| Fig.1.3 Book 3 The Vignelli Canon |
Semantics is the meaning behind a design. This can start by understanding the history of the subject so as to determine the direction design will take. Semantics is important to achieve satisfactory results. it is needed in the company, product, marketing, etc. Research and intuitions are important for a designer to have when doing any projects. Semantics also helps us determine the most relevant way to convey our intentions through our design. Semantics means understanding the topic of relevance and being able to convey it from the designer to the viewer in a way it makes sense for both of them. It means to design something that has meaning.
Comments
Post a Comment