Typography / Task 1: Exercises
25/08/2021 - 22/09/2021 (Week 1 - Week 5)
Reagan Val Adelbert Mahadi /
0349177
Typography / Bachelor of Design in Creative Media
Task 1 /
Exercises 1 & 2
LECTURES
Week 1
For our first meeting in typography, Mr. Vinod explained to us what we are
gonna expect in this module. He explained the MIB for this module and taught
us how to make the e-portfolio. By following his instructions, I got to make
my e-portfolio according to the format. Soon after that, Mr. Charles picked
some of us in class to check whether we have done the e-portfolio according to
the format or not.
In the introduction video, Mr. Vinod explained about font and typeface.
A font refers to the individual font or weight within the typeface. Whereas, a
typeface refers to the entire family of fonts or weights that share similar
characteristics or styles.
For the first lecture video, Mr. Vinod will be explaining typography's
development and timeline.
Phoenician to Roman
At first, writing was defined as scratching into wet clay with a sharpened
stick or carving into stone with a chisel.
Fig. 1.1 Evolution of Phoenician letters
Phoenicians write from right to left. As for Greek, they developed a
writing style called 'boustrophedon', which meant that they read
alternately from right to left then left to right. They also change the
orientation of the letterforms as they change the direction of reading.
Fig. 1.2 Boustrophedon writing style
Fig. 1.3 Phoenician to Roman
Fig. 1.2 Boustrophedon writing style
Fig. 1.3 Phoenician to Roman
Hand script from 3rd - 10th-century C.E.
Square capitals were the written version that is found in Roman
monuments. They contain serifs added to the finish of the main
strokes.
Fig. 1.4 Square capitals
Rustic capital is a compressed version of square capital. It is a capital that allows twice as many words on a sheet of parchment and took less time to write. Even though rustic capitals were faster and easier to use, they were slightly harder to read due to their compressed nature.
Fig. 1.5 Rustic capitals
Roman cursive is used in everyday transactions, which forms were simplified for speed. Roman cursive is the beginning of what we refer to as lowercase letterforms.
Fig. 1.6 Roman cursive
Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q. The broad forms of uncials are more readable at small sizes than rustic capitals. Uncials didn't have lower and upper case letterforms, but they have elements of capital and lower case integrated into the writing system.
Fig. 1.7 Uncials
Half uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.
Fig. 1.8 Half uncials
Charlemagne was the first unifier of Europe since the Romans,
issued an edict in 789 to standardize all ecclesiastical text.
This task is entrusted to Alcuin of York, Abbot of St Martin of
Tours. The monks rewrote the text using both majuscules
(uppercase), minuscule, capitalization, and punctuation which
set the standard of calligraphy for a century.
Fig. 1.9 Caloline miniscule
Fig. 1.10 Blackletter
Gutenberg's skills included engineering, metalsmithing, and
chemistry. He marshaled them all to build pages that accurately
mimicked the work of scribe's hand - Blackletter of northern
Europe. His type mold required a different bass matrix, or
negative impression, for each letterform.
Fig. 1.11 Text type classification
Fig. 1.4 Square capitals
Rustic capital is a compressed version of square capital. It is a capital that allows twice as many words on a sheet of parchment and took less time to write. Even though rustic capitals were faster and easier to use, they were slightly harder to read due to their compressed nature.
Fig. 1.5 Rustic capitals
Roman cursive is used in everyday transactions, which forms were simplified for speed. Roman cursive is the beginning of what we refer to as lowercase letterforms.
Fig. 1.6 Roman cursive
Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q. The broad forms of uncials are more readable at small sizes than rustic capitals. Uncials didn't have lower and upper case letterforms, but they have elements of capital and lower case integrated into the writing system.
Fig. 1.7 Uncials
Half uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.
Fig. 1.8 Half uncials
Fig. 1.9 Caloline miniscule
Blackletter 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 letterform know 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.Fig. 1.10 Blackletter
Text Type Classification
Typeform classifications:- 1450 Blackletter
- 1475 Oldstyle
- 1500 Italics
- 1550 Script
- 1750 Transitional
- 1775 Modern
- 1825 Square Serif / Slab Serif
- 1900 Sans Serif
- 1990 Serif/Sans Serif
Fig. 1.11 Text type classification
For week 2, Mr. Vinod asked us to send him sketches of our work at Facebook. He reviewed most of our sketches and gave feedbacks to anyone whose sketch is selected by him and Mr. Charles. After people have received their feedbacks from Mr. Vinod and Mr. Charles, we were grouped with several classmates to give feedback regarding the sketches we made. Soon after we finished giving feedback to each other, Mr. Charles was picking some of us to see whether our blog has been updated weekly.
For the second lecture, Mr. Vinod will be explaining the basics of typography.
Describing Letterforms
- Baseline - The imaginary line is 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 is above and vertex is below)
- Arm - Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y)
- Ascender - The portion of the stem of a lowercase letterform that projects above the median
- Barb - The half-serif finish on some curved stroke
- Beak - The half-serif finish on some horizontal arms
- 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 the body of the letterform
- Em - The width of an uppercase M
- En - The half size of an em
- Finial - The rounded non-serif terminal to stroke
- Leg - Short stroke off the stem of the letterform
- Ligature - The character formed by the combination of two or more letterforms
- Link - The stroke that connects the bowl and the loop of a lowercase G
- Loop - 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 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 extends 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
Fig. 2.1 Anatomy of Typography
The Font
Week 3
During the third week, we were told to submit our type expressions that are digitised into Facebook so that Mr. Vinod and Mr. Chalres can give feedback on our works. Mr. Vinod gave some examples for several people regarding their type expression works. After they have been giving feedback to most of us, we were told to join a breakout room to create a GIF for one of the type expressions. He asked us to follow a video given by him so that we can create the GIF smoothly. When the session is almost over we were told to submit the work.
For the third week's lecture, Mr. Vinod explained about Text.
Letterspacing: Kerning and Letterspacing
Kerning - The automatic adjustment of space between letters.
Letterspacing - To add space between the letters
Tracking - The addition and removal of space in a word or sentence
Fig. 3.1 Kerning and Letterspace
Fig. 3.2 Normal tracking, loose tracking, and tight tracking
Formatting Text
Flush left - Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Space between words is consistent throughout the text, allowing the type to create an even gray value.
Fig. 3.4 Centered
Flush right - 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.
Fig. 3.5 Flush right
Justified - 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 spacing running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
Fig. 3.6 Justified
Texture
It is important to understand how different typefaces feel as text. 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.
Fig. 3.7 Anatomy of a typeface
Leading Line and Length
The goal in setting a text type is to allow for easy, prolonged reading. At the same time, a field of type should occupy the page as much as a photograph does.
Type size - text type should be large enough to be read easily at arm's length
Leading - Text that is set too tightly encourages vertical eye movement; a ready can easily loose place type that is set too loosely creates stripped patterns that distract the reader from the material at hand
Line length - A good rule of thumb is to keep line length between 35-65 characters. Extremely long or short lines lengths impair reading. Shorter lines require less leading, while longer lines require more.
Type Specimen Book
A type specimen book shows samples of typefaces in various different sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length etc.
Fig. 3.8 Sample type specimen sheet
Indicating Paragraphs
- 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
- Uppercase Numerals (Lining Figures) - Has the same height as uppercase letters and are all set to the same kerning width
-
Lowercase Numerals (Old Style Figures/Text Figures) - Set to x-height with
ascenders and descenders
- Italic - Fifteenth-century Italian cursive handwriting
- Punctuation, miscellaneous characters
- Ornaments
Describing Typefaces
Fig. 2.2 Typefaces
Comparing typefaces
- Roman
- Italic
- Boldface
- Light
- Condense
- Extended
Fig. 2.2 Typefaces
Comparing typefaces
Fig. 2.3 Type families
Week 3
During the third week, we were told to submit our type expressions that are digitised into Facebook so that Mr. Vinod and Mr. Chalres can give feedback on our works. Mr. Vinod gave some examples for several people regarding their type expression works. After they have been giving feedback to most of us, we were told to join a breakout room to create a GIF for one of the type expressions. He asked us to follow a video given by him so that we can create the GIF smoothly. When the session is almost over we were told to submit the work.
For the third week's lecture, Mr. Vinod explained about Text.
Letterspacing: Kerning and Letterspacing
Kerning - The automatic adjustment of space between letters.
Letterspacing - To add space between the letters
Tracking - The addition and removal of space in a word or sentence
Fig. 3.2 Normal tracking, loose tracking, and tight tracking
Formatting Text
Flush left - Closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Space between words is consistent throughout the text, allowing the type to create an even gray value.
Fig. 3.3 Flush left
Centered - 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 the 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.Fig. 3.4 Centered
Flush right - 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.
Fig. 3.5 Flush right
Justified - 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 spacing running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
Fig. 3.6 Justified
Texture
It is important to understand how different typefaces feel as text. 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.
Fig. 3.7 Anatomy of a typeface
Leading Line and Length
The goal in setting a text type is to allow for easy, prolonged reading. At the same time, a field of type should occupy the page as much as a photograph does.
Type size - text type should be large enough to be read easily at arm's length
Leading - Text that is set too tightly encourages vertical eye movement; a ready can easily loose place type that is set too loosely creates stripped patterns that distract the reader from the material at hand
Line length - A good rule of thumb is to keep line length between 35-65 characters. Extremely long or short lines lengths impair reading. Shorter lines require less leading, while longer lines require more.
Type Specimen Book
A type specimen book shows samples of typefaces in various different sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length etc.
Fig. 3.8 Sample type specimen sheet
Indicating Paragraphs
There are several options for indicating paragraphs, and the first example is
'pilcrow' (¶). Pilcrow is a holdover from medieval manuscripts seldom use today. Pilcrow
is used to indicate paragraph space.
A good paragraph requires the paragraph space to have the same points as the leading. This ensures cross-alignment across columns of text. The leading points have to be 2-3 points bigger than the text point size.
Leading space is the space between two sentences. While line spacing is the space between the descender of one sentence to the descender of another sentence.
Fig. 3.9 Line spacing and leading
Another way to indicate paragraphs is the use of indentation. The indent is the same size of the line spacing or the same as the point size of your text. Indentation is used best when the text is justified, otherwise, there will be ragging on the left and right sides.
A good paragraph requires the paragraph space to have the same points as the leading. This ensures cross-alignment across columns of text. The leading points have to be 2-3 points bigger than the text point size.
Leading space is the space between two sentences. While line spacing is the space between the descender of one sentence to the descender of another sentence.
Fig. 3.9 Line spacing and leading
Another way to indicate paragraphs is the use of indentation. The indent is the same size of the line spacing or the same as the point size of your text. Indentation is used best when the text is justified, otherwise, there will be ragging on the left and right sides.
Fig. 3.10 Indentation example
The method of extended paragraphs in Fig. 3.11 creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it.
Fig. 3.11 A method to indicate pargraph
Widows and Orphans
A widow is a short line of type left alone at the end of a column of text. An orphan is a short line of type left alone at the start of new column. Avoid these mistakes when making paragraphs with columns
You can avoid it by reducing the column width or the column height on one side. The only solution to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short. As for orphans, we need to make sure that no column of text starts with the last line of the preceding paragraph.
Highlighting Text
Fig. 3. 13 Example of highlighting text
Fig. 3.14 Example of highlighting text
When you want to change the type family of a text from serif typeface to sans serif typeface, you might want to reduce the point size of the highlighted text. Generally sans serif typefaces tends to look larger.
Fig. 3.15 Serif and sans serif
Other ways to highlight text is to add a box around the text.
Fig. 3.16 Highlighting text with box
Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type to maintain a strong reading axis.
Fig. 3.17 Highlighting text with points
Quotation marks, like bullets, can create a clear incident, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.
Headline within Text
A head indicates a clear break between the topics within a section.
Fig. 3.19 A heads
The B head is subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do.
Fig. 3.21 C heads
Cross Alignment
Cross alignment headlines and captions with text type reinforce the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.
Week 4
For this week's lecture, Mr. Vinod will be explaining letters.
Understanding Letterforms
The uppercase letterforms suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.
The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
The complexity of each individual letterform 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 the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
Maintaining x-height
X-height generally describes the size of the lowercase letterforms. Curved strokes, such as 's', must rise above the median in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
Counterform (or counter)—the space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the space between them. The letter is a particularly and important concept when working with letterforms like lowercase 'r' that have no counter per see. How well the counters are handled when type is set determines how well words hand together—in other words, how easily we can read what's been
Contrast
Week 5
For the last lecture, Mr. Vinod will be presenting about screen and print
Type for Print
Type was designed intended for reading from print long before we read from the screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read.
Common typefaces that are used for print:
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Another important adjustment - especially for typefaces intended for smaller sizes - is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.
Hyperactive Link / Hyperlink
A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default.
Font Size For Screen
16-pixel text on a screen is about the same size as text printed in a book it magazine; this is accounting for reading distance. Because we read books pretty close—often only a few inches away—they are typically set at about 10 points. If someone were to read at arm's length, they would want at least 12 points, which is about the same size as 16 pixels on most screens.
System Fonts for Screen / Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is based largely on its operating system. Each differs a little bit which creates a problem.
Typefaces include:
Static typography has a minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Motion Typography
Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identifies of film and television production companies, increasingly contain animated type.
Type is often overlaid into music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.
INSTRUCTIONS
For this week's lecture, Mr. Vinod will be explaining letters.
Understanding Letterforms
The uppercase letterforms suggest symmetry, but in fact, it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.
Fig. 4.1 Baskerville's A
The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.
Fig. 4.2 Univers' A
The complexity of each individual letterform 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 the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
Fig. 4.3 Helvetica and univers
Maintaining x-height
X-height generally describes the size of the lowercase letterforms. Curved strokes, such as 's', must rise above the median in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
Fig. 4.4 Median and baseline
CounterformCounterform (or counter)—the space describes, and is often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the space between them. The letter is a particularly and important concept when working with letterforms like lowercase 'r' that have no counter per see. How well the counters are handled when type is set determines how well words hand together—in other words, how easily we can read what's been
Fig. 4.5 Counterform
Contrast
Fig. 4.6 Contrast
Week 5
For the last lecture, Mr. Vinod will be presenting about screen and print
Type for Print
Type was designed intended for reading from print long before we read from the screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read.
Common typefaces that are used for print:
- Caslon
- Garamond
- Baskerville
Their characteristics are elegant and intellectual but also highly readable
when set at a small font size. They are versatile, easy-to-digest classic
typeface, which has neutrality and versatility that makes typesetting with
it a breeze.
Type for Screen
Fig. 5.1 Print type
Type for Screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Another important adjustment - especially for typefaces intended for smaller sizes - is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.
Hyperactive Link / Hyperlink
A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Hyperlinks are found in nearly all web pages, allowing users to click their way from one page to another. Text hyperlinks are normally blue and underlined by default.
Font Size For Screen
16-pixel text on a screen is about the same size as text printed in a book it magazine; this is accounting for reading distance. Because we read books pretty close—often only a few inches away—they are typically set at about 10 points. If someone were to read at arm's length, they would want at least 12 points, which is about the same size as 16 pixels on most screens.
System Fonts for Screen / Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is based largely on its operating system. Each differs a little bit which creates a problem.
Typefaces include:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
Pixel Differential Between Devices
The screens used by our PCs, tablets, phones, and TVs are not only different sizes, but the text we see on-screen differs in proportion too because they have different sized pixels.
Static TypographyThe screens used by our PCs, tablets, phones, and TVs are not only different sizes, but the text we see on-screen differs in proportion too because they have different sized pixels.
Fig. 5.2 Pixel differential between devices
Static typography has a minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Motion Typography
Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identifies of film and television production companies, increasingly contain animated type.
Type is often overlaid into music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.
INSTRUCTIONS
Task 1: Exercise 1 - Type Expression
For this week's exercise, we were asked to type a word of action and voted on 4 words out of 7 of the chosen ones. The 7 words include, terror, error, melt, gone, light, pour, and shiver. Since terror was mandatory, I decided to pick error, melt, and gone. We were told to create a design about the word as creatively as we can.
Sketches
Fig. 6.2 "Error" (31/08/2021)
Fig. 6.3 "Gone" (31/08/2021)
Fig. 6.4 "Melt" (31/08/2021)
After hearing feedback from my classmates, I decided on choosing bottom right terror, top right error, top right gone, and bottom-right melt. For terror, I will make the type expression fewer details and make it less distorted.
Digitization
For terror expression, I was trying to find a suitable type family for it and ended up using ITC Garamond Std Light Condensed. I cramped the letters with each other and made the initial letter T bigger than the others.
Fig. 6.5 Terror digitization process (07/09/2021)
Then I added some lines at the bottom part of the words to represent blood dripping. I used the line segment tool to create the lines.
Fig. 6.6 Terror digitization process 2 (07/09/2021)
After that, I used the eclipse tool to create an eye and grouped them all together for the final design.
Fig. 6.7 Terror digitization process 3 (07/09/2021)
For error expression, I used Bodoni Std Book and created a zig-zag
line by using the line segment tool. To create a zig-zag line
select the line, go to effect > distort and transform >
zig-zag to open up the zig-zag panel.
Fig. 6.8 Error digitization (07/09/2021)
Fig. 6.9 Error digitization result (07/09/2021)
For expression gone, I used Futura Std Light. For this expression, I reduced the opacity of the word and add some distance between the letters to match up with the expression. I also used a smaller font size for it.
Fig. 6.10 Gone digitization result (07/09/2021)
For melt expression, I used Gill Sans Std. I used the warp:arc
effect to create a curve effect.
Fig. 6.11 Melt digitization process (07/09/2021)
I also adjusted the sizes for each letter in it so that it would feel like it's melting. I also adjusted the character rotation for each letter.
After receiving some feedback from Mr. Charles I made some changes to my type expressions.
For error, I ended up deleting the question mark and changed the type family to Gill Sans Std Light.
Fig. 6.12 Error changes (08/09/2021)
As for melt, I had to remake it and use other designs from my sketch. I ended up using the top right sketch as my reference. I changed from Gill Sans Std to Futura Std Bold Condensed.
Fig. 6.13 Melt changes (14/09/2021)
I used the eclipse tool and the line segment tool to create the melting effects.
For terror, I made some changes for the dripping blood effect and made the eye thicker.
Fig. 6.14 Terror changes (14/09/2021)
Final Type Expression
Type Expression Animation
During the third week, I tried to create a GIF for one of my type expressions
I made another GIF for my final type expression animation.
Fig. 7.2 Error GIF (14/09/2021)
For error, I wanted to create a GIF of a person typing from error to erorr and showed the error lines below.
After receiving some feedback from Mr. Vinod during the fourth week I'm gonna make some changes to the gone GIF and use it for my final type expression animation.
Fig. 7.3 Gone timeline (21/09/2021)
Final Type Expression Animation
Fig. 7.4 Final Type Expression Animation "gone" - GIF (21/09/2021)
Task 1: Exercise 2 - Text Formatting
During our fourth week, we proceeded to the next exercise, text formatting. We all watched the videos made by Mr. Vinod and follow the instructions inside it to make the next exercise.
Fig. 8.1 Text formatting with kerning (15/09/2021)
Fig. 8.2 Text formatting 2:4 demo (21/09/2021)
By following the video, I used kerning on the paragraphs so that the
ragging will be smoother.
Fig. 8.3 Text formatting 3:4 demo (21/09/2021)
After I used kerning for the whole paragraphs to make the ragging
smoother and used cross alignment with the help of a baseline grid I
came up with these layouts.
Fig. 8.4 Layout 1 (21/09/2021)
Fig. 8.5 Layout 2 (21/09/2021)
Fig. 8.6 Layout 3 (21/09/2021)
Fig. 8.7 Layout 4 (21/09/2021)
Fig. 8.8 Layout 5 (21/09/2021)
Final Text Formatting
Fig. 8.9 Final Text Formatting - JPEG (21/09/2021)
After hearing feedback from my classmates, I decided on choosing bottom right terror, top right error, top right gone, and bottom-right melt. For terror, I will make the type expression fewer details and make it less distorted.
Digitization
For terror expression, I was trying to find a suitable type family for it and ended up using ITC Garamond Std Light Condensed. I cramped the letters with each other and made the initial letter T bigger than the others.
Fig. 6.5 Terror digitization process (07/09/2021)
Then I added some lines at the bottom part of the words to represent blood dripping. I used the line segment tool to create the lines.
Fig. 6.6 Terror digitization process 2 (07/09/2021)
After that, I used the eclipse tool to create an eye and grouped them all together for the final design.
Fig. 6.8 Error digitization (07/09/2021)
For expression gone, I used Futura Std Light. For this expression, I reduced the opacity of the word and add some distance between the letters to match up with the expression. I also used a smaller font size for it.
Fig. 6.10 Gone digitization result (07/09/2021)
Fig. 6.11 Melt digitization process (07/09/2021)
I also adjusted the sizes for each letter in it so that it would feel like it's melting. I also adjusted the character rotation for each letter.
After receiving some feedback from Mr. Charles I made some changes to my type expressions.
For error, I ended up deleting the question mark and changed the type family to Gill Sans Std Light.
Fig. 6.12 Error changes (08/09/2021)
As for melt, I had to remake it and use other designs from my sketch. I ended up using the top right sketch as my reference. I changed from Gill Sans Std to Futura Std Bold Condensed.
Fig. 6.13 Melt changes (14/09/2021)
I used the eclipse tool and the line segment tool to create the melting effects.
For terror, I made some changes for the dripping blood effect and made the eye thicker.
Fig. 6.14 Terror changes (14/09/2021)
Fig. 6.15 Final Type Expression - JPEG (14/09/2021)
Fig. 6.16 Final Type Expression - PDF (14/09/2021)
Type Expression Animation
During the third week, I tried to create a GIF for one of my type expressions
Fig. 7.1 Gone GIF (08/09/2021)
I made another GIF for my final type expression animation.
Fig. 7.2 Error GIF (14/09/2021)
For error, I wanted to create a GIF of a person typing from error to erorr and showed the error lines below.
After receiving some feedback from Mr. Vinod during the fourth week I'm gonna make some changes to the gone GIF and use it for my final type expression animation.
Fig. 7.3 Gone timeline (21/09/2021)
I added some time for it when it disappears and changed from 0 to 0.2
seconds for the initial and last layer.
Final Type Expression Animation
Fig. 7.4 Final Type Expression Animation "gone" - GIF (21/09/2021)
Task 1: Exercise 2 - Text Formatting
During our fourth week, we proceeded to the next exercise, text formatting. We all watched the videos made by Mr. Vinod and follow the instructions inside it to make the next exercise.
Fig. 8.2 Text formatting 2:4 demo (21/09/2021)
From the video Mr. Vinod gave, I learned that for one line of the
paragraph there must be 55-65 characters. The leading must be 2-3
bigger than the text point size. The paragraph spacing points is
as big as the leading points.
Fig. 8.3 Text formatting 3:4 demo (21/09/2021)
Final Text Formatting
Fig. 8.10 Final Text Formatting - PDF (21/09/2021)
FEEDBACK
Week 2
General Feedback: Read a lot of books about typography as much as possible. Try not to distort the letters too much.
Specific Feedback: When I was grouped, my classmates think that the bottom right terror has the best expression for the word but the word has too many details in it. For error, some like the top right and some like the bottom left. The bottom left is too distorted compared to the top right sketch. As for the word gone, they all like everything except the top left sketch. For melt, my classmates like the top and bottom right sketches. The top right sketch is too distorted. Regardless, my classmates told me that most of the expressions match the meaning of the word.
Week 3
General Feedback: Place the expression within the container and make use of the space so that the expression is visibly present. Try not dominantly use the space.
Specific Feedback: Mr. Charles gave me feedback that for the word error, I don't need to use the question mark and the typeface can be a sans serif. As for terror, he said that it looks terrifying and he said the eye is interesting, he told me that I can turn the eye into more like a wedge-shaped. Mr. Charles wasn't so sure about the melt design. For gone, he said that it looks nice and faded.
Week 4
General Feedback: At least 3/4 of the lecture has to be in the e-portfolio. For progression images, we need to add labels, descriptions, and dates. We can't upload PDF as progression, PDF is for final.
Specific Feedback: Mr. Vinod said that he likes the gone GIF. He suggested I add time for it to let it disappear for a half-second or a second and then return back to the original position. As for error, he said that my GIF was quite confusing but he knows what I'm trying to do. He suggested I ideally start with the wrong spelling first then with the correct spelling.
Week 5
Specific Feedback: Good progression documentation, and well organized.
REFLECTIONS
Experience
Learning through the lecture takes a lot of time as there are many theories contained inside. I tried to learn the use of the software by experimenting with it and trying to get used to it. Creating the GIF takes a long time for me as I have never done this before, but I was able to follow the instructions clearly. I get to learn new software that I have never used before which is InDesign. I will try on experimenting more in the software so that I can get used to it.
Observations
My classmates all have very interesting and unique ideas for the type expression task. When I saw my classmates' GIF works, I was amazed at how well they made them.
Findings
I found out that typography is very useful for designs and I never thought about it before. Other than that, I also just noticed that typography can be really strict. We need to be careful and neat when making something related to typography otherwise the result can be really bad.
FURTHER READING
Fig. 9.1 Typographic design: FORM AND COMMUNICATION
Looking through the files on Facebook I decided to read this book.
Fig. 9.2 Typography from Gutenberg to the nineteenth century: 1450-1800 CE
From reading this page, we get to see the evolution of typography from
Gutenberg to the nineteenth century.
Comments
Post a Comment