Typography / Task 1: Exercise 1 & 2
27.8.2021 - 24.9.2021 (Week 1 - Week 5)
Britney Chow Pei Jun / 0350043 /
BDCM
Typography
Task 1 / Exercises
LECTURES
Week 1 (27/08/2021): Introduction and Briefing to the Module
This week we were introduce to the Module by Mr. Vinod and
Mr. Charles by showing us the MIB (Module Information Booklet). We were also
guided by both lecturers to set up our e-portfolio. Soon after that, we were
brief by the lecturers about our first task, and we were also told to watch
the lecture videos recorded by Mr. Vinod.
~Typo_0_Introduction
In this video, Mr. Vinod had
explained to us the concept of typography is an act of creating letters from
geometrical shapes.
He had also explained the difference
between calligraphy and lettering:
Calligraphy: The writing styles (eg: Black Letter, Round Hand)
- Writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel.
- Uppercase form are simple combination of straight lines and pieces of circle.
- Greeks, like the Phoenicians did not use letter space or punctuations.
- Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them as to decrease the cost if made a mistake. (Certain qualities of their stokes are carried over into the carved letterforms)
- Square capitals were the written version that can be found in Roman monuments.
- Have serifs added to the finish of the main strokes.
- Pen held at an angle of approximately 60° off the perpendicular.
- Rustic Capitals, a compressed version of square capitals.
- Allowed twice as many words on a sheet and took less time to write.
- Angle at approximately 30°, slightly harder to read.
- Both square and rustic capitals were typically reserved for documents of some intended performance.
- We can see the beginning of what we refer to lowercase letterforms, however came from everyday transactions and were written in cursive hand in which forms were simplified for speed.
- Uncials incorporated some aspects of the Roman cursive hand (A,D,E,H,M,U and Q)
- More accurate to think of uncials simply as small letters
- Broad forms of uncials are more readable at small sizes than rustic capitals.
- Half-uncials, a further formalization of the cursive hand mark the formal beginning of lowercase letterforms.
- Charlemagne, the first unifier of Europe since the Romans, standardize all ecclesiastical texts.
- He entrusted this task to Alcuin of York, Abbot of St Martin of Tours.
- Rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation.
- Regional variations on Alcuin's script with the dissolution of Charlemagne's empire.
- In nothern Europe, a condense strongly vertical letterform know as Blackletter or Textura gained popularity.
- In the south, a rounder more open hand gained popularity, called 'Rotunda'.
- Gutenberg's skills included engineering, metalsmithing, and chemistry.
- His type mold required a different brass matrix, or negative impression, for each letterform.
- 1450 Blackletter
- Earliest printing type, based on hand-copying styles that were used for books in nothern Europe.
- Eg: Cloister Black, Goudy Text
- 1475 Oldstyle
- Based upon the lowercase forms used by Italian humanist scholars for book copying.
- Eg: Bembo, Caslon, Janson, Jenson, Palatino
- 1500 Italic
- The first italics were condensed and close-set, allowing more words per page.
- Although originally considered as their own class of type, italics were soon cast to complement roman forms.
- Since the sixteenth century, all text typefaces have been designed with accompanying italic forms.
- 1550 Script
- Originally and attempt to replicate engraved calligraphic forms.
- Not entirely appropriate in lengthy text settings.
- Forms now range from formal and traditional casual and contemporary.
- Eg: Kuenstler Script, Snell Roundhand, Mistral.
- 1750 Transitional
- A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing.
- Thick to thin relationships were exaggerated, and brackets were lightened.
- Eg: Baskerville, Bulmer, Century, Time Roman
- 1775 Modern
- Represents a further rationalization of oldstyle letterforms.
- Serifs were unbracketed, and the contrast between thick and thin strokes extreme.
- English versions are also known as Scotch Romans and more closely resemble transitional forms
- Eg: Bell, Bodoni, Caledonia, Didot, Walbaum
- 1825 Square Serif/Slab Serif
- Originally heavily bracketed serif, with little variation between thick and thin strokes.
- Responded to the newly developed needs of advertising for heavy type in commercial printing.
- Eg: Clarendon, Memphis, Rockwell, Serifa
- 1900 Sans Serif
- Eliminated serifs altogether.
- The forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the the twentieth century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura).
- Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic.
- Eg: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura
- 1990 Serif/Sans Serif
- Recent development
- Enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
- Eg: Rotis, Scala, Stone
- 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
- Flush left
- Mostly mirrors the asymmetrical experience of handwriting.
- Spaces between words are consistent throughout the text, allowing the type to create an even gray value.
- 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 material that is non-pictorial by nature.
- Centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.
- 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.
- Justified
- Imposes a symmetrical shape on the text like centering.
- 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.
- Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
- 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. 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.
- A type specimen book shows samples of typefaces in various different sizes.
- Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type.
- You only determine choice on screen when its final version is to read on screen.
- 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.
- Widows solution: Rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.
-
Careful typographers make sure
that no column of text starts with
the last line of the preceding
paragraph.
- Different kinds of emphasis require different kinds of contrast.
- In this example the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5
- Quotation marks, like bullets, can create a clear indent, breaking the left reading axis.
-
Compare the indented
quote at the top with
the extended quote at
the bottom.
- There are many kinds of subdivision within text of a chapters.
-
In the following visuals
these have been labeled
(A, B and C) according to
the level of
importance:
- A head indicates a clear break between the topics within a section.
- In the following examples ‘A’ heads are set larger than the text, in small caps and in bold.
-
The fourth example shows
an A head ‘extended’ to
the left of the text.
- The B head here is subordinate to A heads.
- B heads indicate a new supporting argument or example for the topic at hand.
- They should not interrupt the text as strongly as A heads do.
-
Here the B heads are
shown in small caps,
italic, bold serif, and
bold san serif.
- The C heads although not common, highlights specific facets of material within B head text.
- Not materially interrupt the flow of reading.
- C heads are shown in small caps, italics, serif bold and san serif bold.
-
C heads in this
configuration are
followed by at least
an em space for visual
separation.
- Putting together a sequence of subheads=hierarchy.
-
Obviously there is no
single way to express
hierarchy within
text
-
Cross aligning headlines
and captions with text
type reinforces the
architectural sense of the
page (the structure) while
articulating the
complimentary vertical
rhythms.
- Suggest symmetry, but in fact it is not symmetrical.
- 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
- May also 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.
- 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.
- X-height generally describe the size of the lowercase letterforms.
- Keep in mind that curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
- When letters are joined to form words, the counterform includes the spaces between them.
- To understand the form and counter of a letter is to examine them in close detail.
- In the past, 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.
- Exists not only on paper but on a multitude of screens.
- Was designed intended for reading from print long before we read from screen.
- It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.
- A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.
- Intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
- 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.
- Another important adjustment is more open spacing.
- 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.
- It's a word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
- Found in nearly all Web pages, allowing users to click their way from page to another.
- Text hyperlinks are normally blue and underlined by default.
- About the same size as text printed in a book or magazine
- Accounting for reading distance, because we read books pretty close, they are typically set at about 10 points.
- If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens
- Each device comes with its own pre-installed font selection, which is based largely on its operating system. The problem is that each differs a little bit.
- ‘Web safe’ ones, however, appear across all operating systems, they’re the small collection of fonts that overlap from Windows to Mac to Google
- However, no longer an issue.
- Are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels.
- 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
- Has minimal characteristic in expressing words.
- Traditional characteristics such as bold and italic only offer a fraction of the expressive potential of dynamic properties.
- From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes.
- Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
INSTRUCTIONS
For Task 1 Exercise 1: Type Expression
1. Choose 4 words out of the top
7
2. Make an idea sketch for the 4 words
3. Digitalize them in
illustrator
Week 2 (03/09/2021) Reviewing Idea Sketches:
Mr. Vinod started the class by asking us to post our idea
sketches at Facebook's comment section. After we finished posting the idea
sketches, Mr. Vinod and Mr. Charles look through most of them and gave
insightful feedbacks.
Next, he divided us into 10 breakout rooms
and asks us to give feedbacks to our peers instead. He guided us through this
by giving us questions to think about when looking at one's idea sketches.
1.
Are the explorations sufficient?
2. Does the expression match the meaning
of the word?
3. On a scale of 1–5, how strong is the idea?
4. How
can the work be improved?
After the
session end, he continued to give us feedback for our e-portfolio.
EXERCISES
Progression of Task 1 Exercise 1: Idea Sketches
- For the word "broken", I want to give out an impression of how the surface of something (this can be interpret by the viewer, be it a heart or glass or memories or whatever) is broken and it's falling slowly. A sad broken, and a torn broken is what I want to show in this sketch.
- For the word "bark", I make the alphabet "A" here as a dog's snout, and the word itself is mirrored, while the background is just barks! all over it. The idea for this is that I often see dogs don't only bark once or twice, but many times to either alert their owner, or just being noisy.
- For this idea sketch, I'm basically trying out new stuff, just like the word "glitch". To me, glitch comes in all sorts of forms, and thus the reason why I made the letters all seem different.
- As for the word "terror", I want to make it seem like people are terrified of something, or trying to run away from something they are scared of.
- In this sketch, I tried to make bark a bit playful, as dogs are usually seen as cute and fluffy, friendly type of creatures. For "broken", I want to make it a sad-depressing type, maybe someone who is heartbroken from a relationship or lose someone important.
Progression: Digitalizing
- The idea over here compare to my idea sketches different by a lot, however I combine some of them together.
- For the word "broken" I tried to make it look as if the sentence, or rather the word here is broken and slowly falling down like glass shards.
- As for the word "glitch", I got the reference from my own TV. Like when someone isn't watching it, there's the word "no signal" keep appearing and popping out wherever it wants to, and thus I tried to do, and I also remove the letter "t" from the glitch too.
- I want to express noisy in the word "bark" as I got this idea by watching my neighbor's dog keep barking. The dog doesn't really stop barking until it is tired and thus the reason why I put lots of barks in it.
- When I thought about terrifying stuff, I always feel my heartbeat beats faster, because I'm scared. And thus I tried to create the heartbeat with the word "terror" to signify I feel scared in these type of situations.
Final Task 1 Exercise 1: Type Expression
Type Expression Animation:
Final Task 1 Exercise 1: Type Expression Animation
- The font size should be between 8 to 12 points.
- The line-length should be from 55 to 65 characters.
- The leading should be plus 2 points depending on your font size.
- The paragraph spacing should be the same value as your leading.
- The alignment choice suggested is either left align or left justify. (The problem with left justify: if kerning is not good, there would be excessive amount of spacing between words)
- The ragging could be adjusted with kerning, does not have to be a straight line exactly.
- Hyphenation is recommended to be turned off or if it is on, make sure that there are not too many or else you will have to make more adjustments.
- One should avoid widows and orphans and always maintain cross alignments.
Final Task 1 Exercise 2: Type Formatting
FEEDBACK
Week 1 (27/08/2021):
General Feedback: (For the e-portfolio) Students were told to
not make too much customization on the blog and is recommended to do so
towards the end of semester. Instead, it is better to make it default.
Specific Feedback:
(For the e-portfolio) The overall format is okay, however, I made a mistake of
using jump break instead of horizontal rule (forced line break).
Week 2 (03/09/2021):
General Feedback: Watch out for the distortion as it doesn't have the
typeface, less is more.
Specific Feedback: My idea sketches
has too much illustration, one should keep it simple but interesting instead
of relying too much on the illustration. (Breakout Room): There's still room
to explore, add more variations, do implement more hierarchy.
Week 3 (10/09/2021):
General Feedback: Only black and white could be use, and do not depend
too much on graphical elements.
Specific feedback: The lecturers
has suggested to remove some elements on the word "terror", the word "broken"
and "glitchy" is not expressed well and the letter "k" at the word "bark" is
fine, however, there's no point in putting so many "bark", the word itself
should also not be in italics. It's all about simplicity.
Week 4 (17/09/2021):
General Feedback: Make the animation even more smoother by either
extending the time or adding more frames.
Specific Feedback:
Could explore more like adding more movements for the other letters. My
original one lacks impact and action and I do not need to italic the
word.
REFLECTIONS
Experience: By completing this exercise, I have learned the basics of typography and how to use apps related to it. In my first progression for the type expression (idea sketches), I was confused as to what to do with it because I'm not exactly familiar with the 10 typefaces and I keep rely on the graphical elements or illustrations. I find it especially challenging as I couldn't come up with much ideas for it and I was afraid that my ideas are not good at all. It took me some time to get used to Illustrator as we have to use it to do both the type expression and animation. I think the animation part is the most challenging one as I do not know a lot of the functions and it took most of my time trying to research them. For task 1 exercise 2, type formatting, it may seem easy to others but personally I feel that it isn't as easy as one thinks because there are a lot of things that one have to look out for such as the font size, leading, paragraph spacing and more. Although the whole task in my opinion, is pretty challenging and difficult, I still have a lot of fun doing it.
Observations: After completing the task, I have observe that typography isn't easy at all as one have to consider the design elements like hierarchy and visual weight when designing something. I also observed that one should always explore more and choose the correct typeface to better express the word, because the typefaces are more important than what the majority thinks.
Findings: I've learned the terminology of typography by watching the recorded lectures provided. It is also important to be strict on criticizing so that we or others could improve their own work and that we also shouldn't be afraid when giving out comments. During the process of this task, I've familiarized myself with the typefaces such as Gill Sans, Futura Std, Janson text and more. I also know that one should always considers a lot of things when designing something and also always think outside of the box.
FURTHER READING
Basic: Describing Letterforms
- Typography employs a number of technical terms
























































































Comments
Post a Comment