Typography / Task 1 / Exercises

7.4.2023 - 14.5.2023 (Week 1 - Week 6)
Elysa Wee Qi En / 0355060 / Bachelor of Design (Hons) in Creative Media / Taylor's University
Typography
Task 1 / Exercises

Contents:

Task 1: Exercises
Task 2: Typographic Exploration and Communication
Task 3: Type Design and Communication

LECTURES

Week 1 / Introduction
- Typography is creating letters, fonts, typefaces etc.
- It can be found in animations, website designs, app designs, signage designs, book covers, posters and many many more. It is very important, and having good knowledge of the subject is key in many aspects of a designer's life.
- Logo Types are one of the best examples of something that needs good typography skills/ knowledge
- Reading is important, a lot of information comes from further reading
- Typography involves choosing typefaces and adjusting things like point size, line length, line spacing (leading), letter-spacing (tracking), and the spaces between letters (kerning). [wikipedia.com]

Font:
Individual weight of the letters within the typeface (e.g. regular, italic, bold, condensed)

Typeface:
The group of all the fonts that share similar characteristics and/or styles (e.g. Arial, Times New Roman)

Week 2 / Development
Originally, people would write by scratching letters onto clay or carving them onto stone with a chisel. Therefore, most original forms of letters consisted of straight lines or simple curves.

Later on, people began using a paintbrush to mark out the letters before carving them, and so their handwriting would be carried on into the carving.

Fig. 1.1. Development of the letter 'A' over the years (30/4/2023)

Square capitals - written letters (in around the 4th and 5th century C.E.) that have added serifs at the end of the main strokes, and were written with pens with a rectangular nib, causing some strokes to be thicker than others. The pen or brush was held at around 60 degrees off of the perpendicular.

Fig. 1.2. Square capitals (30/4/2023)

Rustic capitals - square capitals but compressed. They allowed for twice as many words on a sheet of paper and they took less time to write. The pen or brush was held at around 30 degrees off of the perpendicular. Because they were compressed, they were also a little more difficult to read.

Fig. 1.3. Rustic capitals (30/4/2023)

Square and rustic capitals were normally used for documents. Normal, everyday transactions were written in cursive, where the letters were simplified for speed. This is how the lowercase letters were developed.

Uncials - This way of writing did not have a variation of lowercase and uppercase letters, and it incorporated a few aspects of the Roman cursive hand, notably in the shape of the letters A, D, E, H, M, U and Q. The letters are more readable at small sizes than rustic capitals.

Fig. 1.4. Uncials (30/4/2023)

Half-uncials - This was a further formalisation of the cursive hand, and they are the beginning of the development of lowercase letters in the Roman script today.

Fig. 1.5. Half-uncials (30/4/2023)

The writing system was standardised because the first unifier of Europe, Charlemagne, issued an edict in 789 to standardise all ecclesiastical texts. Monks rewrote all these texts using uppercase, capitalisation, punctuation etc. and this set the ground for calligraphy.

When the empire dissolved, regional varieties of Alcuin's script were created. A more condensed and strongly vertical letterform (Blackletter/ textura) became popular in northern Europe, while the south preferred a rounder, more open hand (rotunda).

Week 3 / Text pt. 1
Kerning - The automatic adjustment of space between letters
Letterspacing - The action of adding spaces between letters.
Tracking - The action of adding and removing spaces in a word or sentence.

Kerning and letterspacing are not typically done for large bodies of text. They are more used in things like titles and headlines. Sometimes, uppercase letters require letterspacing to be less cornered by the other letters.

Fig. 2.1. Kerning example (1/5/2023)

Fig. 2.2. Tracking example (1/5/2023)

Adding letterspacing can reduce the readability of a word, as the brain recognises words by seeing the pattern of the letters, and adding spacing disrupts that pattern.

Although designers often use letterspacing between uppercase letters, many people often dislike letterspacing between lowercase letters within text. This is because uppercase letters are created to stand individually, but lowercase letters rely on the counterform created between letters to be read easily.

Fig. 2.3. Letterspacing in lowercase letters (1/5/2023)

However, it is also possible to remove too much space between letters and make them compressed and difficult to see.

Fig. 2.4. Example of tight tracking (1/5/2023)

Flush left - The format of pushing the text to the left of the screen, most closely imitating handwriting. Every line starts at the same point, but the line ends where the last word that can fit in the line ends. The spaces between the words are equal and consistent, so the grey value is even.

Grey value - The text on a white page. If the page is too dark or light (the grey value is too high or low), the text is more unreadable.

Ragging - The jagged, uneven end point of each line of text because of the flush left (or right) alignment.

Centred - This format causes symmetry in the text, making it so both ends of every line have equal value and weight. It is normally used for smaller amounts of text, as both ends are very jagged and unbalanced.

Flush right - The opposite of flush left, where the end of the line is now even, while the beginning is jagged. This is typically used for things like captions, to strongly relate the text to an image. Like the centred alignment, it is used sparingly and in certain situations.

Justified - Both ends of the line are now even, because this format expands and reduces the spacing between words and occasionally between the letters themselves. This can sometimes create 'rivers' of space, where there is too much space between the words.

Choosing a format can be a result of personal preference, culture, or something the designer wants to express, but never forget that the first priority is to create a clear and appropriate presentation of the text and the author's message.

Type that calls attention to the design rather than the word itself is an interference and should be changed.

Fig. 2.5. Example of using different types of fonts on a wedding invitation (1/5/2023)

The example on the left has a more suitable typeface to suit the occasion with a more common alignment, but using script typefaces on a word with all capital letters makes it strange. It might be necessary to use a second typeface for the 'RSVP' at the bottom to avoid this.
The one on the right has a more unique alignment that can appeal to only a small audience. However, the text is easily legible and clear.

Different typefaces suit different messages and situations. Pay close attention to the grey value of text and typefaces to create successful layouts.

This is because different typefaces have different textures (anatomies). Type with a large x-height or heavy stroke width will create a darker mass on the page than type with a smaller x-height and lighter strokes.

X-height - The area between the baseline and the mean line (the middle line). If the ascender and descender are smaller than the x-height, the type is more readable.

Fig. 2.6. Anatomy of a typeface (1/5/2023)

The main goal of setting text type is to allow for easy and prolonged reading.

Text type - The size of the text. It should be big enough to be read easily at arm's length.

Leading - The space between each line of text. Type with too little leading encourages vertical eye movement and makes it so the reader can easily lose their place (which line they were reading). Too much leading however creates striped patterns that make it so the reader loses concentration easier.
2.5-3 pts. larger than the text size is a good range for leading space for larger bodies of text.

Line length - Shorter lines will require less reading, and vice versa. Lines that are too short or long will impair reading. 55-65 characters per sentence is a good range.

You should be determining type size, leading and tracking using print (unless you are designing for screen). Printing out a copy of the work as a test or using a type specimen book works.
It can be recommended to at least enlarge the type to 400% on the screen to clearly see and get a sense of the relationship between the descenders on a line and the ascenders on the line below.

Fig. 2.7. Smaller leading (top) vs larger leading (bottom) (1/5/2023)

Week 4 / Text pt. 2
Ways to indicate paragraphs:
- A pilcrow ( ¶ )
-Adding a paragraph space. Line space size and paragraph spacing size should be equal, and this helps with cross-alignment. Should be 2-3 pts larger than the text size.
- Indentation. Usually the same size of the line spacing or the point size of the text. When using indentation, you should not have ragging on the right because there is already ragging on the left. Therefore best used with justified alignment.
- Extended paragraphs, where the first line is normal and the rest of the lines are indented.

Line space vs leading:
- Line space is the total 'height' of the line, including the leading above it, taking into account the descenders of a line and the ascenders of the line below it.
- Leading is only the empty space between the lines.

Fig. 3.1. Line space vs leading (2/5/2023)

Widows and orphans:
Widow - a short line of text that is left alone at the end of a column of text
Orphan - a short line of text left alone at the start of a new column.

Fig. 3.2. Widow and orphan example (2/5/2023)

They are especially serious in justified alignment. Flush left and flush right can be more forgiving towards widows, but orphans are always bad.
Widows can be fixed by rebreaking your line endings throughout the paragraph so the last line is not too short. Orphans can be avoided by making sure no column of text begins with the last line of the last paragraph.

Forced line breaks are done by pressing Shift+Enter. It will create an invisible ~ symbol.
Alternatively, highlight the entire line and kern the spacing (by ±3 spaces max).

Ways to emphasising text within a large body of text:
- Using bold or italics
- Change the typeface of the specific text
(decrease size of sans serif fonts by .5 to match the x-height of serif typefaces)
- Change the colour of the specific text (only for colour printing)
(Only black, cyan and magenta can be used for body text)
- Highlighting the specific text
(indent the highlighted lines so that the left reading axis is still equal)

Also decrease the size of aligned figures (numbers) or All Captial acronyms by .5 to have a constant sizing throughout the text.

Fig. 3.3. Indenting highlighted text (2/5/2023)

Fig. 3.4. Placing equation marks behind the reading axis (2/5/2023)

Typographic hierarchy:
A head: Indicates a clear break between the topics - headline

Fig. 3.5. A heads (2/5/2023)

B head: A subordinate to the A heads. Indicates a new supporting point or argument under the topic of A. They use a leading space rather than a paragraph space.

Fig. 3.6. B heads (2/5/2023)

C head: Less common, but are under the B head topics. They use an em space (two spaces) to separate it from the body text.

Fig. 3.7. C heads (2/5/2023)

Fig. 3.8. All three together (2/5/2023)

Cross alignment:
Making sure the individual lines in columns that are next to each other are even and aligned.
If the text sizes for both columns are different from each other, you could change the leading size (by ratio).

Week 5 / Understanding

Understanding letterforms:
Letterforms are not always created symmetrically. This can be obvious or a very minor detail, but there is a lot of complexity in every letterform.

Fig. 4.1. Baskerville capital letter A analysis (27/6/2023)

- The arcs connecting the serif to the stem are all different

Fig 4.2. Univers capital letter A analysis (27/6/2023)

- The width of the left stroke is thinner than the right stroke. This shows the intense care into the details that are put into the letterforms to produce the illusion of equal weight.

Fig. 4.3. Helvetica (left) and Univers (right) (27/6/2023)

Both of these typefaces are similar at first glance, but they have specific characteristics ingrained into each individual arc in the letterforms. These details change the output and overall look and aesthetic of the typeface.
But there is no need to overload the typeface with too many features and make it too fancy or stylised. Focus more on consistency in one detail.

Maintaining x-height:
- Curved strokes (such as in the letters 's' and 'r') should rise above the median line to appear the same size as the rest of the strokes and letters.

Fig. 4.4. Curved strokes slightly exceed the median and baseline (27/6/2023)

Counterform:
- The spaces that are described by the strokes of the form, including when the letters are put together to form words.
- Having too much space between letters will decrease readability.

Fig. 4.5. The black spaces are the counterforms (27/6/2023)

Contrast:
- One of the most important principles of design

Fig. 4.6. Examples of contrast in typography (27/6/2023)

Week 6 / Screen and Print

Print type vs Screen type:

Print:
Caston, Garamond, Baskerville etc. are the most commonly used typefaces for print because they have high visual appeal while also having high readability even at small font sizes.

Screen:
Types intended for screen may be modified to have a taller x-height (or smaller ascenders and descenders), heavier thin strokes and serifs (reduced stroke contrast), or overall modified curves and angles to have enhanced readability on screen.
Verdana, Georgia etc. are good examples.

Typefaces that are made for smaller sizes tend to have more open spacing. This improves character and letter recognition and readability for non-print surfaces.

16-pixel text on a screen is about the same size as text printed in a book or magazine, accounting for reading distance. Normally you would want the font size of books to be about 10 points (as you often put the book only a few inches away from your face). However, reading at arm's length would have 12 points be more suitable, which is around the same size as 16 pixels on most screens.

Different devices have different pixel measurements.

Fig. 5. Pixel differences between devices (28/6/2023)

Static vs Motion:
You can achieve dynamic designs even in static typography, perhaps using italics and bold. But temporal media allow the letterforms to move and create further dynamics.

INSTRUCTIONS

Fig. 6. Module Information Booklet (7/4/2023)

Task 1: Exercise 1 - Type Expression

For this assignment we have been tasked with conveying the meaning of certain verbs through visuals, using minimal graphics and just altering the fonts and typefaces of the word.

Fig. 7. Sketches for planning (26/4/2023)

Fig. 8.1. Idea development (1) (28/4/2023)

Fig. 8.2. Idea development (2) (28/4/2023)

Process:

Fig. 9.1. Beginning to create 'destroy' (28/4/2023)

For the word 'destroy', I first tried using Futura Std Extra Bold, which I later changed to Futura Std Extra Bold Oblique.

Fig. 9.2. Experimenting with 'party' (28/4/2023)

This design for the word 'party' went through the most changes. At first, all the repeated words were of the same typeface, before I experimented using different typefaces in the same design. After listening to feedback, I not only varied the typefaces of each word, I varied the fonts and typefaces of the individual letters.

Fig. 9.3. Creating 'silence', 'pause' (initial idea) and 'split' (28/4/2023)

The design for 'silence' was simple enough. I chose an elegant font to give the feeling of softness, and the lower opacity makes it seem light and barely there.

I then chose to illustrate my first design for 'pause', which was simply the letters spaced out to provide a pause in between them.
Moving on, I attempted to digitise one of my ideas for 'split', which consisted of the letter 'I' being split in half.

Fig 9.4. Creating second idea for 'pause' (28/4/2023)

I decided to digitise one of my other ideas for 'pause', this time making the word seem paused from running into a wall. By making the letters 'U', 'S' and 'E' more condensed than the 'P' and 'A', I was able to make them look squished as if the pause was abrupt. This second design was the one I ended up choosing rather than the first.

FINAL Type Expression

Fig. 10.1. Type Expression Final (28/4/2023)

Fig. 10.2. Type Expression Final (PDF) (28/4/2023)

Type Expression Animation

Next, we had to choose one of our final four designs and animate it. For this, I chose my finalised idea for 'pause'.

Fig. 11.1. Beginning animation process (28/4/2023)

I started by making the word 'pause' enter the frame at a moderate speed. It would then ram into the wall and be 'paused'.

Fig. 11.2. Adding more frames (28/4/2023)

The initial final frames were not enough and the animation was not as smooth as I wanted it to be. So I added more frames in between some of the ones I already had, in particular the frames where the letters became squished.

Fig. 11.3. Adding more to the animation (28/4/2023)

After receiving feedback, I made the wall static and it no longer moved in the beginning of the animation. I also added more to the end of the animation, as the original did not convey the meaning of the word appropriately enough.

Now, after stopping the word from progressing, the wall would collapse and the word 'pause' continued on its way back out of the frame. This way it would more closely resemble the meaning of pausing -- temporary interruption -- rather than just stopping.

FINAL Type Expression Animation

Fig. 12. Final GIF animation (28/4/2023)

Task 1: Exercise 2 - Text Formatting

Fig. 13.1. Initial planning sketches (16/5/2023)

I decided to start out by creating a few sketches of possible layouts. For my first draft, I ended up going with something similar to number 4.

Fig. 13.2. Initial design and formatting (16/5/2023)

My first layout is shown in the top left. At the time, I hadn't done ragging correctly. Instead of using the kerning method, I used a lot of line breaks instead, which gave me a very rough and uneven ragging, which is not wanted. However, I did pay attention to the cross-alignment.

Fig. 13.3. Experimenting and adjusting (16/5/2023)

I focused on the details first - like reducing the size of capital acronyms and isolated numbers by .5 pts to make them look the same size as the rest of the text. Then, based on what I learnt in the lectures, I changed the leading space to be more appropriate.

Fig. 13.4. Format development timeline (16/5/2023)

After receiving feedback from my lecturer, I adjusted the ragging to look more even.

After receiving feedback from some friends, I changed the layout by making the column on the left higher than the other two, making them descend in order to ensure the reading order is not disrupted. By making the last column end lower than the top of the image, it creates a type of balance by adding more weight to the right to go against the heavy weight of the image and title on the left.

FINAL Text Formatting Layout

HEAD

Font/s: Univers LT Std 67 Bold Condensed

Type Size/s: 36 pt (heading), 26 pt (subheading)

Leading: 38.5 pt (heading), 36 pt (subheading)

Paragraph spacing: 0

BODY

Font/s: Univers LT Std 55 Roman

Type Size/s: 6,5 pt

Leading: 9 pt

Paragraph spacing: 9 pt

Characters per-line: 53

Alignment: Flush left

Margins: 12 mm top + bottom, 11 mm left + right

Columns: 3

Gutter: 5 mm

Fig. 14.1. Text Formatting Final (14/5/2023)

Fig. 14.2. Text Formatting Final (PDF) (14/5/2023)

Fig. 14.3. Text Formatting Final w/ guides and grids (14/5/2023)

Fig. 14.4. Text Formatting Final w/ guides and grids (PDF) (14/5/2023)

FEEDBACK

Week 2
General Feedback:
- Having different sizes, fonts or opacity (contrast) can help convey meaning better
- Adding some graphical elements can be allowed if it helps the idea
- 'Stupid' ideas can be thrown out in a brainstorm as messy sketches before getting fleshed out and redrawn later
- Having the same idea as someone is normal and fine, but popular ideas may just be basic
- Graphical elements (lines) should be minimal at 0.5 thickness
- Four questions to ask yourself:
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?

Specific Feedback:
1. My designs for each word have different explorations with font and size.
2. Pause-1, Party-4 and Split-3 might be more difficult to understand without explanation.
3. Pause-3, Silence-1 and 3, and Split-1 are my strongest ideas in terms of understanding the reason
behind the execution.
4. Destroy-2 has the most potential out of my three ideas for that word. It can be improved by removing the cracks at the bottom and instead having cracks along the letters, and making the letters more dynamic.

Week 3
Specific Feedback:
- No problems with 'destroy' or 'silence'
- Second idea for 'pause' can convey meaning better
- Can add even more typefaces or even fonts to 'party', not just per word but per letter
- Font choice for 'split' can be changed (Futura? Bold and/or condensed?). Letter 'I' does not need to be enlarged.

Week 4
General Feedback:
- If the GIF isn't a perfect loop, make a pause at the end
- Make the animation smoother by adding more frames
- Motion blur is an option

Specific Feedback:
- Keep the wall static (still)
- Current animation is more like 'stop', so make the wall disappear and allow the word to continue on

Week 5
General Feedback:
- Rivers in the text should be avoided
- Too many hyphenations are not good
- Too much difference in weight between text can look strange
- Dynamism makes the layout look more appealing
- Do not use bold or italics for the entire body text, bold is for headings and italics are to emphasise.

Specific Feedback:
- Capital letters and numbers can stand out too much in text, can be solved by choosing to use a 'small capital'. Alternatively, reduce the size of the text by .5.
- Avoid forced line breaks as much as possible (use them sparingly). They are an extreme solution. Turning on hyphenations is a better option (if the kerning doesn't work).
- Try to make spacings between different boxes of text follow a ratio (1:1, 1:2 etc.).
- Reduce ragging, the 'by' line is too similar to the title line, the layout still needs work.
- If using fluh left alignment, some ragging still needs to be seen to make it look like it's left-aligned

TEXT FORMATTING
1. Is kerning and tracking appropriately done?
2. Does the font size correspond to the line-length, leading & paragraph spacing
3. Is the alignment choice conducive to reading?
4. Has the ragging been controlled well?
5. Has cross-alignment been established using base-line grids?
6. Are widows and orphans present?

REFLECTIONS

Experience
Conveying meaning with the visuals of text is very interesting to me, and I'm happy I got to try it out in this module. Using minimal graphical elements was a challenge, but it served to be good in testing my creativity and I'm quite happy with how my designs turned out. Animating one of the designs frame by frame was fun despite the annoyances I had with needing to constantly re-export the frames from Adobe Illustrator with every mistake. The last part, text formatting, was also quite challenging as I'd never really tried to format text like this before.

Observations
There are absolutely a lot of intricate details in typography, and these first few exercises did well in teaching me that. There are a lot of things to worry about, such as the sizing of the words, the leading space, the paragraph spacing, weight and balance of the overall design, even small details like cross-alignment of text. I learnt that all these play important roles in making the formatting pleasing to the eye but also much easier to read.

Findings
In typography, creativity and aesthetics are important, but practicality is still the main focus. If the text is unreadable, there's no point because the whole point of laying out text is getting people to read it. There is a lot more to typography than just choosing the right font (although that is also very important), and with the right techniques, you can create something that is meaningful, nice to look at, easily understandable, and easily legible.

Search This Blog

Elysa Wee Qi En (0355060)

Typography / Task 1 / Exercises

Process:

Comments

Post a Comment

Popular posts from this blog

Portfolio

Spatial Audio Design / Task 4 / Game Audio

Information Design / Exercises