Typography / Task 2: Typography Exploration & Communication
24.09.2021 - 08.10.2021 (Week 5 - Week 7)
Lulu Luisa Linardi / 0349358 / Bachelor of Design (Hons) in Creative
Media
Typography
Task 2 / Typography Exploration & Communication
LECTURES
|
|
Fig 1.0: Thumbnail, 05.09.2021 |
Link to:
Task 2: Typography Exploration & Communication
Task 3(A): Type Design & Communication
Task 3(B): Type Design & Communication
Week 5: Understanding
a. Understanding Letterforms
- The uppercase letterforms below suggest symmetry, but in fact it is not
symmetrical
- It's easy to see the two different stroke weights of the Baskerville
stroke form (below); more noteworthy is the fact that each bracket
connecting the serif to the stem has a unique arc
|
| Fig 1.1.1: Baskerville |
- 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 (previous) and Univers (below) demonstrate the meticulous
care a type designer takes to create letterforms that are both internally harmonious and individually
expressive
|
| Fig 1.1.2: Univers |
|
| Fig 1.1.3: Helvetica (Left); Univers (Right) |
b. Maintaining x-height
- The 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.
|
| Fig 1.1.4: X-height |
c. Form / Counterform
- Is the space describes, and often contained, by the strokes of the
form
- Includes the spaces between letters, when they're joined to form
words
|
|
Fig 1.1.5: Counterforms #1 |
|
| Fig 1.1.6: Counterforms #2 |
d. Contrast
- The simple contrasts produces numerous variations: small+organic /
large+machined; small+dark / large+light
|
| Fig 1.1.7: Contrast |
Week 6: Screen & Print (Typography in Different Medium)
a. Print Type vs Screen Type
Type for Print
- Primarily, type was designed intended for reading from print long
before we read from screen
- 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
- They are versatile, easy-to-digest classic typeface, which has a
neutrality and versatility that makes typesetting with it a breeze
|
| Fig 1.2.1: Example of Type for Print |
Type for Screen
- 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance
- 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
|
| Fig 1.2.2: Font Size for Screen (Left); Print (Right) |
Pixel Differential Between Devices
|
| Fig 1.2.3: Pixel Differential |
b. Static vs Motion
|
| Fig 1.2.4: Static Typography |
INSTRUCTIONS
Task 2: Typography Exploration & Communication
For this task, we were told to create a layout of editorial text. There are
three different text options provided in Facebook group, and we are given
the chance to choose it by ourselves. So I chose the second option, which
heading is "Be Good, Do Good, Follow the Code." Again, we are only allowed
to use the 10 typefaces given by Mr. Vinod to complete this task. There's
also another requirements for the task as well.
Requirements for
Task 2:
- Font size (8–12)
- Line Length (55–65/50–60 characters)
- Text Leading (2, 2.5, 3 points larger than font size)
- Ragging (left alignment) / Rivers (Left Justification)
- Cross Alignment
- No Widows / Orphans
|
| Fig 2.1.1: Preview of Chosen Editorial Text |
So before I start doing it, I did a layout research first to gain more ideas for the layout. I explored for the headline and body text layout in Pinterest and got these as my references.
|
| Fig 2.1.2: Layout Reference #1 |
|
| Fig 2.1.3: Layout Reference #2 |
|
| Fig 2.1.4: Layout Reference #3 |
After having those references, I went to Procreate to draw the thumbnail sketch for my editorial layout. I came out with 3 different ideas. I made the plan for my actual layout later and also replaced the body text with patches for now.
|
| Fig 2.1.5: Rough Sketch, 29.09.2021 |
Next, I created the actual design of my headings using Adobe Illustrator. I made the same design of the heading layout as my rough sketch, except for the second sketch. For the second layout, I tried to explore more on it and finally got a new idea as seen on Fig 2.2.4. I also did the kerning for some letters and fixed the leading to make it looks better and nicer.
- Heading #1
|
| Fig 2.2.1: Heading #1 making process, 01.10.2021 |
|
| Fig 2.2.2: Heading #1, 01.10.2021 |
- Heading #2
|
| Fig 2.2.3: Heading #2 making process, 01.10.2021 |
|
| Fig 2.2.4: Heading #2, 01.10.2021 |
- Heading #3
|
| Fig 2.2.5: Heading #3 making process, 01.10.2021 |
|
| Fig 2.2.6: Heading #3, 01.10.2021 |
I made my headlines for both sketches in Illustrator, and moved them to
InDesign immediately. Actually I encountered a problem when moving the
headline, even though I had followed the same steps as Mr. Vinod. I tried to
fix that problem for many times and finally I could overcome it. So, here's
my attempt for the layout, and its digital progression.
 |
| Fig 2.3.0: Idea Exploration for Layout, 02.10.2021 |
- Layout #1
This is my first attempt for this editorial text layout. I provided
the original outcome and the one that is covered with patches. I also put
the proof of cross alignment (achieved).
|
| Fig 2.3.1: Covered Layout #1, 02.10.2021 |
|
| Fig 2.3.2: Cross Alignment achieved #1, 02.10.2021 |
- Point Size: 12 pt
- Text Leading: 14.5 pt
- Line Length: 50-56 (left page); 29-37 (right page)
- Alignment: Justified
|
| Fig 2.3.3: First layout attempt, 02.10.2021 |
- Layout #2
Here is my second layout for this editorial text. I provided the original
outcome and the one that is covered with patches. I also put the proof of
cross alignment (achieved).
|
| Fig 2.3.4: Covered Layout #2, 02.10.2021 |
|
| Fig 2.3.5: Cross Alignment achieved #2, 02.10.2021 |
- Fonts: Serifa Std (46 Light Italic, 65 Bold, 75 Black) [Heading]; Futura
Std (Book, Heavy Oblique) [Body Text]
- Point Size: 11 pt
- Text Leading: 14 pt
- Line Length: 28-36
- Alignment: Justified
|
| Fig 2.3.6: Second layout attempt, 02.10.2021 |
- Layout #3
This is the third layout I made for the editorial text. I provided the
original outcome and the one that is covered with patches. I also put the
proof of cross alignment (achieved).
|
| Fig 2.3.7: Covered Layout #3, 02.10.2021 |
|
| Fig 2.3.8: Cross Alignment achieved #3, 02.10.2021 |
- Fonts: Gill Sans Std (Ultra Bold), Univers LT Std (93 Extra Black
Extended) [Heading]; Gill Sans Std (Light, Regular, Bold Italic) [Body
Text]
- Point Size: 10.5 pt
- Text Leading: 13 pt
- Line Length: 36-42 (left page and 1st & 2nd column in right page);
38-49 (3rd column in right page)
- Alignment: Justified, Left-justify
(the 5th paragraph from bottom)
|
| Fig 2.3.9: Third layout attempt, 02.10.2021 |
Actually I was very confused when choosing which layout should I use.
But then, I decided to choose the first layout as the final outcome because I
think it is really neat and the alignment is well-executed, if I compare it to the other layouts.
However, after getting feedback from Mr. Vinod, saying that I shouldn't have the different column width, and my column interval (column gutter) between two text columns is too close, I made a bit change on it. I decided to break the two columns in the left page into three columns, so it is now having the same width. I also modified the gutter, made it bigger from 4.233 mm to 5.5 mm.
 |
| Fig 2.4.1: Modifying the Columns, 08.10.2021 |
 |
| Fig 2.4.2: Repairing some details #1, 08.10.2021 |
 |
| Fig 2.4.3: Repairing some details #2, 08.10.2021 |
Here's the updated details.
- Fonts: Bodoni STD (Poster, Poster Italic, Roman, Italic) [Heading]; Bembo STD (Regular, Semibold Italic) [Body Text]
- Point Size: 12 pt
- Text Leading: 14.5 pt
- Line Length: 28-38
- Alignment: Justified, Left-justify (the last paragraph & 5th paragraph from bottom)
- Margin: 10 mm
- Gutter: 5.5 mm
 |
| Fig 2.4.4: Covered Layout (Revised ver.), 08.10.2021 |
 |
| Fig 2.4.5: Cross Alignment achieved (Revised ver.), 08.10.2021 |
Final Outcome
 |
| Fig 2.4.6: Final Outcome in .jpg, 08.10.2021 |
Total hours spent on this task: 10 hours
FEEDBACK
WEEK 6
- 2nd and 3rd sketch also seems okay
- Need to done the actual layout first to see whether the layout is exciting or not
WEEK 7
- Good progress, keep it up!
(Task 2)
- Layout is adequate but, the coloumn width of the body texts differ (it should not)
- The coloumn interval (space between two text coloumns when justified must be bigger-right now its too close)
REFLECTIONS
FURTHER READING
|
| Fig 3.1: Typographic Design: Form and Communication |
 |
| Fig 3.2: Example of Type Family |
Weight changes
- By simply changing the stroke width relative to the height of the
letters, a whole series of alphabets, ranging from extremely light
to very bold, can be produced
Proportion
- Changing the proportions of a typestyle by making letterforms
wider (expanded) or narrower (condensed), as discussed earlier, is
another method for adding typefaces to a type family
Angle
- In the discussion about the basic classifcation of typefaces,
italics were presented as a major independent category
Elaboration
- An added complexity, fullness of detail, or ornamentation