Typography / Task 1 & 2: Exercise
27.8.2021 ~ 24.9.2021 ( Week 1 ~ Week 5 )
Seojeong Kim 0350085
Typography
Bachelor of Design in Creative Media / Taylor's University
Task 1 / Exercise
Lectures
Week 1: Introduction
- As the first class of this semester begins, I I first met Mr. Vinod. As it was our first class, he explained what we should do in the future and how we should grow. He briefed us on what we will learn. Next, he showed how to create an e-portfolio, as well as examples of the work of other students. It was a little difficult at first because it was my first time making an e-portfolio, but I was able to finish it because he explained it slowly and easily. At the end of class, he gave us the first assignment, expression exercise. We chose 3 words from our Facebook group, I chose moon, abyss and terror. He gave us a week to come up with ideas and make various sketches.
- Typo_0_Introduction -
Mr. Vinod said, "Whether it's animation design, website design, animation design, Signage design, graphic design, or new media, what you learn in this lesson is the basis of everything.
Typography can refer to many things in design. Typography is the act of creating writing styles. Typography is also about creating a typeface or family of forms. Typography can also be an animation. In real life, you can find typography, website design, app design, signage design, labels, logos, books and posters.
Typography Definition
- Typography is "the style and appearance of printed matter.", Typography is "the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing, letter-spacing, and adjusting the space within letters pairs. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers and symbols created by the process.
 |
| Fig. 1.1 / Research about Typography |
 |
| Fig. 1.2 / Research about Typography |
Week 2:
- In this week's lesson, we learned how to use Photoshop illustrations. Then we uploaded the sketches we did in week 1 to our Facebook group, and some students got feedback from Mr. Vinod. Students who did not receive feedback from Mr. Vinod due to time constraints had time to share ideas and give feedback to each other. As they said, I need little more attention to angle and size, and try not to put too many pictures. I have to submit JPEG file by next week. I have to choose 4 of my favorite ideas and complete digital photography using Photoshop illustrations.
- Typo_1_Development -
1. Early Letter form Development: Phoenician to Roman
- Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. The forms of uppercase letter forms (for nearly 2000 years the only letter forms) can be seen to have evolved out of these tools and materials. At their core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.
Writing direction:
Phoenicians: Right to left.
The Greeks: 'Boustrophedon’ (how the ox ploughs), read alternately from right to left and left to right. The same goes to the direction of the letter forms.
Like the Phoenicians, the Greeks did not use letter space or punctuation.
2. Hand script from 3rd – 10th-century C.E.
Square capitals: Written letter forms found in Roman monuments. These letter forms have serifs added to the finish of the main strokes.
Rustic capitals: Compressed version of square capitals, allowed for twice as many words on a sheet of parchment and took far less time to write. Faster and easier to do, but were slightly harder to read due to its compressed nature.
Roman cursive: Written for everyday transactions, forms were simplified for speed. Roman cursive is the beginning of lowercase letter forms.
Uncial: incorporated some aspects of the Roman cursive hand. Uncial – small letters. The broad forms of uncial are more readable at small sizes than rustic capitals.
Half-uncial: mark the formal beginning of lowercase letter forms, replete with a senders and descender, 2000 years after the origin of the Phoenician alphabet.
Charlemagne, the first unifies of Europe since the Romans, 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 minuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century.
Black letter to Gutenberg’s type
With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed strongly vertical letter form know as Black letter or textural gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s minuscule.
3. Text type classification
Type forms have developed in response prevailing technology. commercial needs, and aesthetic trends. Certain models have endured well past the cultures that spawned them. The following type form classifications are based on one devised by Alexander Lawson only covers the main form of text type.
Old style: Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline minuscule) and the uppercase letter forms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England.
Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
- Typo_2_Basic -
Describing Letter forms: As with any craft that has evolved over 500 years, typography employs a number of technical terms. These mostly describe specific parts of the letter forms. It is a good idea to familiarize yourself with the lexicon. Knowing a letter form's component parts make it much easier to identify specific typefaces.
Baseline : The imaginary line of visual base of the letter forms.
Median : The imaginary line defining the x-height of letter forms.
X-Height : The height in any typeface of the lowercase 'x'
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 letter forms 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. Do not confuse real small caps with those artificially generated.
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 when ever you would use upper and lowercase letter forms. Lowercase numerals are far less common in sans serif type-faces than in serif.
Italic: Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
Describing Typefaces:
Roman: The letter form 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.
Oblique: conversely are based on roman form of typeface
Boldface: Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'.
Light: A lighter stroke than the roman form. Even lighter strokes are called thin'.
Condense : A version of the roman form, and extremely condense styles are often called 'compressed'.
Extended: An extended variation of a roman font.
Comparing Type Family:
- What 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. For any typographer these feelings connote specific use and expression.
- Typo_3_Text_P1 -
Adobe In Design:
- Adobe In Design is a publishing software. This software allows us to deal with a large amount of text. For example: making templates, leaflets, brochures that require a lot of texts.
Shortcuts:
T = Type
Command + A = Select All
Command + Shift + > = Increase Text Size
Command + Shift + < = Decrease Text Size
Command + ; = Make the Margin and Column Lines Disappear
Option + Left/Right Arrow = Kerning
Tracking: Kerning and Letter spacing
Definitions:
Kerning: The automatic adjustment of space between letters. It is often mistakenly referred to as letter spacing.
Letter spacing : To add space between the letters.
Tracking: The addition and removal of space in a word or sentence.
Designers always letter space uppercase letters, but there has long been strong resistance within the type community to letter space lowercase letters within text. Uppercase letter forms are drawn to be able to stand on their own, whereas lowercase letter forms require the counter form created between letters to maintain the line of reading. (In other words: Do not letter space lowercase letter forms)
Formatting Text:
Definitions:
Flush Left: This format 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 (text on a white page).
Centered: This format 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.
Flush Right: This format 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.
Justified: Like centering, this format 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.
When setting the field of type, keep in mind the typographer's first job-clear, appropriate presentation of the author's message. Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.
Texture
Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in color is fundamental for creating successful layouts.
From the Figure above, we can see that:
Adobe Caslon: Has slightly smaller x-height, tends to be less readable.
Baskerville: Has slightly larger x-height, tends to be more readable.
From the Figure above, we can see that:
Bembo: Has more contrast, which reduces the efficacy as a typeface.
Adobe Garamond Pro: Has larger ascender and descender, the strokes tends to be thicker and makes it more readable.
From the Figure above, we can see that:
Bauer Bodoni: has a high contrast letter so it reduces its readability and legibility.
Adobe Jenson Pro: has a thicker stroke width, so it's more readable.
Leading and Line Length
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 photograph does.
Definitions:
Type Size: Text type should be large enough to be read easily at arms length-imagine yourself holding a book in your lap.
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.
Type Specimen Book
A Type Specimen Book shows samples of typefaces in various different sizes. A type specimen book (or e book for screen) is to provide an accurate reference for type, type size, type leading, type line length etc.
Note: When you do text formatting, determine the choice of type according to its purpose. If the output is to be printed, you have to print it out to be judged. If it's going to be on the screen, judge the design it from screen. Check the gray value.
Compositional requirement: Text should create a field that can occupy a page or a screen. Ideal text should have a middle gray value, not a series of stripes.
Week 4:
- Typo_4_Text_P2 -
Indicating Paragraphs
Pilcrow: A holdover from medieval manuscripts seldom use today. It is available in most typefaces. It is used in text to indicate paragraph spacing.
If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
Conclusion: By ensuring the Leading & Paragraph Spacing have equal value, you will ensure cross alignment.
Line Spacing: The descender from 1 sentence to the descender of another sentence.
Leading: The space between 2 sentences
The Indent: is the same size of the line spacing or the same as the point size of your text. It is best used with Justified Alignment.
Extended Paragraphs: As seen in the figure below, extended paragraphs create unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.
Widows & Orphans
In traditional typesetting (the kind that still endures among conscientious commercial publishers), there are two unpardonable gaffes-widows and orphans. Designers (specifically those that deal with large amounts of text in websites or books on online magazines or printed magazines, news papers or online journals) must take great care to avoid the occurrence of the the above mentioned.
Widow: a widow is a short line of type left alone at the end of a column of text.
Orphan: an orphan is 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 is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable.
Note: Shift + Enter = False Line Break
Solution to Widow: is to rebreak (using false line break) your line endings through out your paragraph so that the last line of any paragraph is not noticeably short. Or do some kerning (max. 3 points).
Solution to Orphan: Careful typographers make sure that no column of text starts with the last line of the preceding paragraph. Or reducing the length of the column.
Highlighting Text
Ways to highlight sentences: Use Italics, Use Bold, Change the Type Family, Change the Color of Text, Placing Bullet Fonts
Headline Within Text
There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled according to the level of importance. A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.
Week 5:
- Typo_5_Understanding -
Understanding Letter forms
The uppercase letter forms below suggest symmetry, however, it is not symmetrical. It's easy to see the two different stroke weights of the Baskerville stroke form (below). Also, each bracket connecting the serif to the stem has a unique arc. From this difference, it can be concluded that certain nuance are necessary for this particular strokes.
The uppercase letter form below may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both letter forms (Baskerville & Univers) demonstrate the meticulous care of a type designer takes to create letter forms that are both internally harmonious and individually expressive. Also, making the stroke difference on both letter forms affects viewer's optical.
The complex of each individual letter form is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces–Helvetica and Univers. A comparison of how the stems of letter forms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
Maintaining X-Height
The x-height generally describe the size of the lowercase letter forms. However, curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to be the same size as the vertical and horizontal strokes they adjoin.
Counterforms
- Just as important as recognizing specific letter forms is developing a sensitivity to the counterform (or counter)–the space describes, and often contained, by strokes of the form. The counterforms includes the space between them. How well the counters are handled determines how well the words hang together. Understand the form and counter of a letter to examine them in close detail. When designing new letters, It's imporant to analyze the existing typefaces that fall in the same category of the letter.
Contrast
Contrast is the most powerful dynamic in design–as applied to type, based on a format devised by Rudi Ruegg–. The simple contrast produces numerous variations: small + organic/large + machined; small + dark/large light.
Different Medium
When the internet became phenomenal in the late 80s, everybody was predicting that paper would go out of fashion, when in fact papers were being used even more when Printers were invented. No matter how the screen-use and technology become big part in human life, Tactility and Tactile Feel will always be an important factor. Touching and Feeling are required as part of humans' learning process.
Screens and prints are the example of design mediums. Print and Screen have a long history in may forms of art– graphic design, 3D animation, New Media, Environmental Entertainment Design, etc. And typography exists in all forms and shapes.
In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset 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. It is subject to many unknown and fluctuating parameters such as operating system, system font, the device and screen itself, the view-port and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.
Instruction
Practical
- Exercise 1: Type Expressions -
Week 1: Type Expressions Sketch
- In this week's exercise, we use our chosen words from posted on a Facebook group to get an idea out of our heads and complete a sketch. Typography that can express the meaning of the words in depth. At first, I struggled with this exercise a lot and wandered around, but after doing searches, I completed various sketches by referring to the notes I took during class.
The words I chose to design:
Melt
Water
Broken
Space
Glitch
Terror
 |
| - This is the first sketch I drew in my sketchbook, and I wanted to express the various ideas in my head as much as possible. I drew various shapes that fit these three words, but I thought it would be better to use angles and sizes rather than drawings. |
- These are my sketches that I drew again after receiving feedback. They look much better and look more like 'typography' than the sketch ideas I did at first. Once again I feel it's so difficult to get the ideas out of my head.
As I got in the feedback, I tweaked the angle and size, and made it not too complicated. To do that, I tried not to include too many images.
- Also, 'space' has various meanings. There is a space that expresses the universe, and there is a space that expresses area. I came up with a lot of ideas to express the universe, but expressing the area was much more difficult than I thought.
- Week 1 During practice, I had some free time, so I made digital typography using illustrator. It was just practice, but it was very interesting. However, the one I made looks very complicated with too many pictures that are too huge and useless.
Type Expressions Final
- This is my final digital idea.
- Exercise 2: Text Formatting -
Exercise 1.4
I watched the youtube video from Typo-formatting that Mr. Vinod told us, this watching video sessions have really important purposes, that first is to be able learn how to kerning and tracking, also learn how to use line length, font size, and paragraph space.
The task was to format the text using Adobe InDesign. It looks very simple, but if you look closely, it was a job that required a lot of attention to detail. First of all, I wrote my name in 10 different fonts. I put the font name on the left and my name on the right to balance it out.
Exercise 2:4 to 4:4
Text Formatting
- I have to create the text formation in Adobe InDesign. Firstly, we have to watch the tutorial videos.
Notes:
1. Font size (8–12)
2. Line Length (55–65/50–60 characters)
3. Text Leading (2, 2.5, 3 points larger than font size)
4. Ragging (left alignment) / Rivers (Left Justification)
5. Cross Alignment
6. No Widows / Orphans
- The purpose of this lecture is to learn font size, line length, and paragraph spaces. Learn how to layout fonts.
- Use InDesgin to create the layout using the note.
- What I using is
Font: Bembo Std
Font size: 14
Line Length 65/60
Text Leading 2
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans
Final Outcome:
Week 1: Feedback
- He told us that to create an e-portfolio we need to watch a video, and from watching the video we learned how to create the ideal e-portfolio. Since this is a blog where many errors occur, I also learned how to use various tools using HTML. I think I've learned something very useful for blogging.
Week 2: Feedback
- I learned how to use a blog. It's my first blog I'm making, so I'm lacking a lot, Mr. Vinod gave more details. He stayed after school to let me know what I needed for my blog. I also learned a lot about typography and did a lot of different things. These were the basics for what I needed to learn in the future.
Week 3: Feedback
- I made a sketch of my typography, and it was my duty to digitize it. I chose the word 'water', and my class mates who saw my sketch and they gave me a feedback, said it was a very cool idea, but it was dizzy with too many images. I will adapt and correct my work.
Week 4: Feedback
- We finally finished our Gif typography, but I made a mistake in one part. I was supposed to complete my work only in the font that Mr. Vinod uploaded on facebook group, but I didn't, thus I had to start over from the beginning. It has been a very difficult process, but as the saying goes, "Failure is but a stepping stone to success," I will always try hard.
Week 5: Feedback
N/A
Reflection
Experience - The typography class was very speedy for me, and I had more exercise than other classes. I had to check and observe more information than in other subjects, so I thought I had a lot more to learn. Since it was a long class, the Mr. Vinod started chatting with us for a while, so that the class didn't feel boring.
Observation - I have a worse memory than others, so I take notes in my notebooks of all my classes. That way, I can check it out at once even if I try to find it out later, and it will be helpful for my assignments as well. I have to watch all the important videos and texts a little more closely, and check what I've learned meticulously because I can make a lot of mistakes, and cover it up.
Findings - Typography was a very impressive class, and it is a very essential element that goes into any design. Therefore, I will have to learn slowly from the most basic. Try to understand what I hear in class, and if I don't understand something, take notes and watch the recorded class again.
Comments
Post a Comment