Typography - Task 1: Exercises
23/09/2024 - 21/10/24 / Week 1 - Week 5
Aquela Zefanya Soares / 0374377
Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University
Task 1: Exercise 1 & 2
TABLE OF CONTENTS
LECTURES
Week 1
Typography: Introduction
1. Definition
- The art of creating letters, the creation of typefaces, also can come in animated form. The technique of arranging types to make written language legible, readable, and appealing when displayed.
- Typography exists everywhere, such as websites, applications, books, signs, etc.
- Typography skills are needed in order to communicate better using letters.
- The process from calligraphy > lettering > typography takes over 500 years.
- Calligraphy: The writing styles
- Lettering: The result of drawing out letters
- Typography: The art and technique of arranging type (on a computer)
3. Who practices Typography?
- Anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution
4. What is happening now
- Digitalization opened up typography to new generations of previously unrelated designers and lay users.
- Now that it is accessible to everyone, which previously had to be done by an expert, has caused typography to decline in quality throughout the world.
- Over the decades, the decline of skilled typographers has also affected effective communication.
- People tend to overlook the quality as long as the effects are still the same.
5. Type history
- Communication used to be done through symbols, resulting in difficulties in conveying things correctly.
- The development of Phoenician alphabets in which words were created using sounds, allowed for more precise communication.
6. Terminology
- Font: Refers to an individual font or weight within typeface, e.g.: Georgia Regular, Georgia Italic, and Georgia Bold.
- Typeface: Refers to the entire family of fonts/weights that share similar characteristics or style. e.g.: Georgia, Arial, Times New Roman, Didot and Futura.
Typography: Development and Timeline
- Writing: Scratching into wet clay with a sharpened stick or carving into stone using a chisel.
- Uppercase is formed by a simple combination of straight lines and pieces of circles.
- The Greeks changed the direction of writing called ‘boustrophedon’ (how the ox ploughs) which meant that the lines of text read alternately from right to left and left to right.
- The change of the direction of reading results in the change of the orientation of the letterforms.
- In this era, Greek still used the ancient Phoenicians way of not using letter space or punctuations.
- Etruscan (and then Romans) carvers working in marble painted letterforms before inscribing them. The strokes that are created by their skills influence the weight etc and being developed as the letters that people use today.
- Square capitals were the written version that can be found in Roman monuments.
- This era used slanted reed pens hence the width came from and they also added serifs in the letter.
- Square capitals develop around 4th - 5th century C.E
- Rustic capitals is a compressed version of square capitals. Therefore, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write.
- Although it is easier and faster to write, they are slightly hard to read due to their compressed nature.
- Both capitals were typically reserved for documents of some intended performance.
- The development of the lowercase letter was a result of fast writing uppercase letter forms quickly
- Uncial doesn’t have upper and lower case letter forms. It has both capital and lowercase elements integrated into the writing system.
- A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, 2000 years after the origin of the Phoenician alphabet.
- Charlemagne (Charles the Great), ruler of the Carolingian Empire realized that there are too many writing ways and this could result in lost in translation. He issued an edict in 789 to standardize all ecclesiastical texts.
- He entrusted this task to Alcuin of York, Abbot of St. Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization, and punctuation which set the standard for calligraphy for a century.
- With the dissolution of Charlemagne's kingdom came regional variations on the Alcuin’s script, people will eventually develop their own styles to suit their own languages and regionals.
- In Northern Europe, a condense strongly vertical letterform known as Blackletter or textura gained popularity.
- In the South, a rounder more open hand gained popularity, called ‘rotunda’.
- The humanistic script in Italy is based on Alcuin’s miniscule.
- Gutenberg is a person who invented the modern day printing press. He invented a mechanism that allowed documenting to be done much faster. He developed a machine using his knowledge of engineering, metalsmithing, and chemistry. This machine was able to accurately imitate the work of scribes, as seen in his work, the Gutenberg Bible, printed around 1455.
- 1460: Lucius Lactantius, Venice.
- 1471: Quintillian, Nicholas Jenson, Venice.
- 1472: Cardinal Jonannes Bessarion, Conrad Sweynheym and Arnold Pannartz, Subiaco Press, Rome.
- 1499: Colona, type by Francesco Griffo.
- 1515: Lucretius, type by Francesco Griffo.
- 1531: Illustrissimae Galliaru Reginae Helianorae, printed by Robert Estianne, Paris. Type-cast by Claude Garamond.
- 1572: Polyglot Bible (Preface). Printed by Christophe Plantin, Antwerp.
- 1734: William Caslon, Type specimen sheet, London.
- 1761: William Congreve, typeset and printed by John Baskerville, Birmingham.
- 1818: Giambatista Bodoni, Manuale Tipografico, Parma.
- Typeforms have developed in response to prevailing technology, commercial needs, and aesthetic trends. Certain models have endured well past the cultures that spawned them.
- 1450 Blackletter: Earliest printing type, based upon the hand-copying styles that were then used for books in Northern Europe, e.g.: Cloister Black, Goudy Text
- 1475 Old style: Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline miniscule) and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away their calligraphic origins over 200 years, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England. E.g.: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.
- 1500 Italic: Echoing contemporary Italian handwriting, the first italic were condensed and close-set, allowing more words per page.
- 1550 Script: Originally and attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in lengthy text settings.
- 1750 Transitional: A refinement of old style forms, this style was achieved in part because of advances in casting and printing.
- 1775 Modern: This style represents a further rationalization of old style letterforms.
- 1825 Square Serif / Slab Serif: Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the needs of advertising for heavy type in commercial printing.
- 1900 Sans Serif: These typefaces eliminated serifs altogether.
- 1990 Serif / Sans Serif: This style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
Week 2
Typography: Text (Part 1)
1. Kerning and letterspacing
- Kerning: Automatic adjustment of space between letters, often mistakenly referred to as "letterspacing".
- Letterspacing: To add space between the letters.
- Tracking: The addition and removal of space in a word / sentence.
- Flush Left (Ragged Right):
- Most closely mirrors asymmetrical experience of handwriting.
- Each line starts at the same point but ends wherever the last word on the line ends.
- Space between words are consistent throughout the text.
- Centered (Ragged Right and Left):
- Imposes symmetry upon the text (equal value and weight to both ends of any line). Transform fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature.
- It's important to amend line breaks so that the text doesn't appear to be jagged (because of such a strong shape on the page)
- Flush Right (Ragged Left):
- Emphasis on the end of a line as opposed to its start.
- Can be useful in situations (e.g.: captions) where the relationship between text and image might be ambiguous without strong orientation to the right.
- Justified:
- Like centered, this format imposes a symmetrical shape on the text.
- This format results in "rivers" which is a long space between the letters because it's a result of expanding / reducing spaces between words and letters, to achieve the symmetrical shape.
- Refers to the visual weight and density of the text on the page (influenced by the typeface's x-height, stroke width, and the overall gray value it creates).
- Darker, bolder typefaces can convey strength but may reduce readability in smaller sizes.
- Lighter typefaces might appear more elegant but can be harder to read.
- These factors must be balanced to ensure the overall reading experience.
- Type size: Text type should be large enough to be read easily at arms length (range is between 8-12).
- Leading (2,5 or 3 larger than the typesize):
- Text that is too tight: Encourages vertical eye movement (readers can easily lose their place).
- Text that is too loose: Creates striped patterns that distract the reader from the material at hand.
- Line Length:
- Shorter lines require less leading, longer lines more.
- A good rule of thumb is to keep the line length between 55-65 characters.
- Extremely long or short line lengths impairs reading.
- A type specimen book shows samples of typefaces in various different sizes. Without showing samples of different sizes, no one can make a reasonable choice of type.
- A type specimen book is to provide an accurate reference for type, type size, type leading, type length, etc.
- It is often useful 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.
Week 3
Typography: Text (Part 2)
1. Indicating Paragraphs- Pilcrow (¶): A holdover from medieval manuscripts seldom use today
- Line spacing:
- Leading (space between each line of text) typically should be 2-3 pt larger than the text (e.g., 10 pt text would have 12 or 12.5 pt leading).
- If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
- When there's 2 columns of text sitting next to each other where the text line is aligned to the next columns, cross alignment ensures that the lines in both columns align perfectly. Cross-alignment makes it visually consistent and easy to read.
- Line spacing vs Leading
- Leading: Space between lines to keep them from touching each other.
- Line spacing: Include both the height of the text and the space between lines.
- Based on the bread and jelly analogy:
- Size of the text: Bread.
- Leading / space between line: Jelly.
- Line spacing: Bread + Jelly.
- Indentation:
- Typically, the indent size is set equal to the text's point size (e.g., 10pt text should have a 10pt indent).
- Indentation should only be used on justified text, not with left-aligned text, because it would ragging on both sides.
- Widow: A short line of type left alone at the end of a column of text.
- Orphan: A short line of type left alone at the start of new column.
- In justified text, both widows and orphans are considered serious gaffes.
- Flush right and ragged left text are somewhat more forgiving toward widows.
- Orphans remain unpardonable.
- The only solutions to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.
- Orphans required more care. Careful typographers make sure that no columns of text starts with the last line of the preceding paragraph.
Different kinds of emphasis require different kinds of contrast. This can be done using:
- Reducing sans serif to match the x-height of the serif typeface
- When highlighting text by placing a field of color at the back of the text, maintaining the left reading axis of the text to ensures readability is at its best.
- Quotation marks, like bullets can create a clear indent, breaking the left reading axis.
- Prime ≠ quote, prime is an abbreviation for inches and text. Due to the limited number of keys and a typewriter, they were substituted. They were later known as dumb quotes.
- Typographers need to ensure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.
- A-heads: Indicates a clear break between the topics within a section. Bold, larger, and often in small caps.
- B-heads: Indicates a new supporting argument or example for the topic at hand. Smaller than A-heads but still bold.
- C-heads: Although not common, highlights specific facets of material within B-heads text. Even smaller than A-heads.
- Hierarchy: Putting together a sequence of subheads.
- Cross Alignment: How headings and captions align with the body text across different columns or text block.
- Cross aligning and captions with text type reinforce the architectural sense of the page-the structure-while articulating the complimentary vertical rhythms.
Week 4
Typography: Basic
1. Describing letterforms
- As any craft that has evolved over 500 years, typography employs a number of technical terms. These mostly describe specific parts of the letterforms.
- Knowing a letterform's component parts make it much easier to identify specific typefaces.
- Baseline: The imaginary line the visual base of the letterforms.
- Median: The imaginary line defining the x-height of letterforms.
- X-height: The height in any typeface of the lowercase 'x'.
- Stroke: Any line that defines the basic letterform.
- Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below)
- Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
- Ascender: The portion of stem of a lowercase letterform that projects above the median.
- Barb: The half-serif finish on some curved stroke.
- Bowl: The rounded form that describes a counter. The bowl may be either 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 space where two strokes meet.
- Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
- Ear: The stroke extending out from the main stem or body of the letterform.
- Em/en: Originally refering to the width of an uppercase M, and em is now te distance equal to the size of the typeface (e.g., an em in 48 pt). An en is half the size of an em. Most often use to describe em/en spaces and em/en dashes.
- Finial: The rounded non-serif terminal to a stroke.
- Leg: Short stroke off the stem to the letterform, either at the bottom of the stroke (L) or inclined downward toward (K, R).
- Ligature: The character formed by the combination of two or more letterforms.
- Link: The stoke that connects the bowl and the loop of a lowercase G.
- Loop: In some typefaces, the bowl created in the descender of the lowercase G.
- Serif: The right-angled or oblique foot at the end of the stroke.
- Shoulder: The curved stroke that is not part of a bowl.
- Spine: The curved stem of the S.
- Spur: The extension the articulates the junction of the curved and rectilinear stroke.
- Stem: The significant vertical or oblique stroke.
- Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
- Swash: The flourish that extend the stroke of the letterform.
- Tail: The curved diagonal stroke at the finish of certain letterforms.
- 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.
- The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
- Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
- Lowercase: Lowercase letters include the same characters as uppercase.
- Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set. Most type software includes a style command that generates a small cap based on uppercase forms.
- Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.
- Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used whenever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif typefaces than in serif.
- Italic: Most fonts today are produced with a matching italic. Small caps. however, are always only roman. The forms in an italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of typeface.
- Italic vs Roman
- Roman: The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.
- Italic: Named for fifteenth century Italian handwriting on which the forms are based.
- Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
- Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).
- Oblique conversely are based on roman form of typeface.
- What is worth noting isn't the similarities but rather the differences, the accumulation of choices that renders each unique.
- Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling.
- The Rs display a range pf attitudes, some whimsical, some stately, some mechanical, others calligraphic, some harmonious, and some awkward.
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1zpL9qSBd5tL0LVeNNwrjchRW5Mg5VLVA/preview" width="640" height="480" allow="autoplay"></iframe>
TASK
Task 1: Exercise 1 - Type Expression
This week, Mr. Vinod gave us a set of words for us to sketch. We're ordered to create a real depiction of those words. The words that i pick are "Wind", "Chop", "Tangle", and "Pull". The app that I use to sketch this design is Ibis Paint.
Fig 5.4 Digitalizaton (After feedback) (14/10/2024)
Now that I've done making some adjustments, I quite like how it turned out and have decided to make it my final composition.
Final Expression
3. Animation
After the digitization process, we were given the task of creating an animation based on one of the words from the final expression that we had created.
Before feedback: Process
The inspiration of my animation is how usually cartoon portrayed wind and makes it flow like curve. I didn't know how to make animation before, so I decided to do something simple and only use 8 frames for my animation.
Task 1: Exercise 2 - Text Formatting
Things to look out for when completing Task 1, Exercise 2 Text Formatting:
- Font size (8–12)
- Line Length (55–65/50–60 characters)
- Text Leading (2, 2.5, 3 points larger than font size)
- Paragraph spacing (follows the leading)
- Ragging (left alignment) / Rivers (Left Justification)
- Cross Alignment
- No Widows / Orphans
For this assignment, I created 2 main designs, of which I will later choose one after being given feedback.
FEEDBACK
Week 1
General Feedback: Introduction to design class, rules and modules. We were given the task of making an e-portfolio and typography sketches. YouTube video link is provided as directions for doing the task.
Week 2
Specific Feedback: The use of magnet in the word "PULL" is a good idea but not executed well.
General Feedback: Too much distortion to the letter, and it may lose the real typeface form. Graphical elements need to be toned down so that the expression won't be too overwhelming.
Week 3
Specific Feedback: Mr. Vinod told us that we need to make a bigger impact and consider the composition of our text.
General Feedback: The letter "PULL" that I made doesn't work because it doesn't describe its meaning.
Week 4
Specific Feedback: Animation assignment submission day and for those whose animation is correct, continue the lesson by watching the exercise 2 video on YouTube.
General Feedback: The animation doesn't depict the reality of the letter and is too choppy.
Week 5
Specific Feedback: Failing to follow instructions by using pictures that aren't related to the text. The layout appears crowded because of the usage of stretched photos. Absence of sketches, making it difficult to select the ideal arrangement. The headline and sub-headline are too close to one another. It is advisable to just have the headlines the same size because separating them breaks the reading flow due to the size difference. Output needs to be in black and white.
General Feedback: Many of the mistakes we have in common are the distance between the headline and sub-headline, the type size is not appropriate and there are those who use images containing text which breaks the focus.
REFLECTIONS
Experience
In this module I learned the basics of typography. To be honest, I don't really know much about typography and only found out when a motion graphics video appeared on my YouTube homepage, so I think learning this assignment is quite fun. However, I just found out that there are many rules for producing good typography so I was a bit surprised and had a little difficulty. Nevertheless, I am happy because I can learn new applications such as Illustrator and InDesign. I don't have too much difficulty learning Adobe applications because I have used Photoshop, After Effects, Premiere Pro, and Media Encoder.
In my opinion, the most difficult part is the type expression section because it is quite difficult for me to produce new work when the whole class also uses the same words so there could be similar ideas. Despite the fact that I found doing this assignment is difficult, I enjoyed doing the process because I always learned something new every week.
Observation
I like observing the results of assignment from upperclassmen and other people in my class, looking at them I feel inspired and want to know how they analyzing the knowledge they receive and applying it to their assignments.
I also noticed how important proper composition is in the various typography examples I saw on the internet.
Findings
Throughout this assignment, I realized that I wasn't paying enough attention in doing the assignment. I should have done this with the mindset of how I will face my clients in the future and not think this is just a task, and that i finished it. Through Mr Vinod's feedback I realized that although I enjoyed doing the task, I was just treating it as a normal task and was unable to see the bigger picture. I learned many things to improve myself and try to be better in the future.
I discovered that typography has many rules and is fun to do. Even though I feel this field is not my expertise, I think it is important to study typography and to know the history behind typography to observe the effects of various evolutions in the development of human thought patterns over the years.
Comments
Post a Comment