TYPOGRAPHY / TASK 2 : TYPOGRAPHIC EXPLORATION & COMMUNICATION
29.09.2021 - 09.10.2021 (Week 6 - Week 7)
Luisa Audrey / 0348741 / Bachelor of Design in Creative Media
Typography
Task 2 / Typographic Exploration & Communication
LECTURES
TYPO_5_UNDERSTANDING
LETTERS / UNDERSTANDING LETTERFORMS
The uppercase letterforms below suggest symmetry but in fact, it is not symmetrical. It is 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 Baskerville |
The uppercase letterforms may appear symmetrical, but a close examination shows the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrate the meticulous care a type of designer takes to create letterforms that are both internally harmonious and individually expressive.
 |
| Fig 1.2 Univers |
The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly 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 1.3 Helvetica & Univers |
 |
| Fig 1.4 Helvetica & Universe (2) |
LETTERS / MAINTAINING X-HEIGHT
As you already know, the x-height generally should describe the size of the lowercase letterforms. However, you should 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.5 maintaining x-height |
 |
| Fig 1.6 Median & Baseline |
LETTERS / FORM / COUNTER FORM
Just as important as recognizing specific letterforms is developing a sensitivity to the counter form the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counter form includes the spaces between them.
The latter is particularly and important concept when working with letterforms like lowercase 'r' that have no counters per see. How well you handle the counters when you set the type determines how well words hang together in other words, how easily we can read what's been set.
 |
| Fig 1.7 counter form |
One of the most rewarding ways to understand the form and counter of a letter is to examine them in close detail. The examination also provides a good feel for how the balance between form and counter is achieved and a palpable sense of letterform's unique characteristics. It also gives you a glimpse into the process of letter-making.
It is worth noting here that the sense of the 'S' holds at each stage of enlargement, while the 'g' tends to lose its identity, as individual elements are examined without the context of the entire letterform.
 |
| Fig 1.8 counter form (2) |
LETTERS / CONTRAST
The basic principle of Graphic Design applies directly to typography. The following are some examples of contrast the most powerful dynamic in design as applied to type, based on a format devised by Rudi Ruegg.
The simple contrasts produces numerous variations: small+organic/large+machined: small+dark/large light
 |
| Fig 1.9 Helvatica Bold |
 |
| Fig 1.10 Baskerville |
 |
| Fig 1.11 contrast |
TYPO_6_SCREEN&PRINT
TYPOGRAPHY / DIFFERENT MEDIUM
 |
| Fig 2.1 different medium |
 |
| Fig 2.2 Different Medium (2) |
In the past typography was viewed as living only when it reached paper. Once a publication was edited, typeset, and printed, it was done. Nothing changed after that. Good typography and readability were the results of skilled typesetters and designers.
Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewpoint, and more. Our experience of typography today changes based on how the page is rendered because typesetting happens in the browser.
Print Type vs Screen Type
1. Type for Print,
Primarily, the 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.
A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characters 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 neutrality and versatility that makes typesetting with it a breeze.
 |
| Fig 2.3 Print type |
 |
| Fig 2.4 Print Type (2) |
2. 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 (or reduced ascenders and descenders), wide 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. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.
Font Size 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. Because we read books pretty close, often only a few inches away, 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
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. The problem is that each differs a little bit.
Let's say the designer picked some obscure, paid font family for this site's design. If you don't have that font already installed and it's not pulling from a web-friendly place, more on that later, the font you see would default back to some basic variations like Times New Roman. You, as the visitor, wouldn't necessarily know that is what happened, though. To you, it would just look plain ugly.
Web safe ones, however, appear across all operating systems. They are the small collections of fonts that overlap from Windows to Mac to Google. Open San, Lato, Arial, Helvetica, Times New Roman, Courier New, Verdena, Georgia, Palatino, Garamond.
 |
| Fig 2.5 Screen & Print |
Pixels Differential Between Devices
The screens used by our PCs, tablets, phones, and TVs 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. Even within a single device class, there will be a lot of variations.
 |
| Fig 2.6 Pixels details |
 |
| Fig 2.7 Pixels differential |
Static vs Motion
Static Typography, Static has a minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only 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 design, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
 |
| Fig 2.8 Brochure |
 |
| Fig 2.9 Brochure (2) |
Motion Typography, Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999). Film title credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.
Type is often overlaid onto 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.
INSTRUCTION
<iframe src="https://drive.google.com/file/d/1d0ArruiGDMwb2Jq-jVxMN6PY2xOcseAB/preview" width="640" height="480" allow="autoplay"></iframe>
In task 2, we were instructed to express topographically the content in the file given by Mr. Vinod. Here are the following requirements the submission task 2:
- Layout research
- Sketches
- Digital Progression
- JPG submission (300dpi, grayscale, max quality)
- PDF embedded
Here are the sketches that I made:
 |
| Fig 3.1 Sketches, 30.09.2021 |
The 3 pictures on the right are the titles that I sketched which later on will I recreate in Adobe Illustrator. The ones on the right are the layout design that I planned to do after I have moved everything to Adobe Indesign.
First Attempt :
 |
| Fig 3.2 Title first attempt, 30.09.2021 |
 |
| Fig 3.3 Layout first attempt, 30.09.2021 |
At first, I wanted to make a quite simple but catchy title for the public. I decided to put the title in the center to make it look less common. I also planned to put the left and right texts aligned and on the same level to maintain the balance. To overcome the empty spaces, I decided to add few square elements on the top left and bottom right as decoration and to make it look less boring.
Here is how I made the title in Adobe Illustrator:
 |
| Fig 3.4 (THE) first attempt, 30.09.2021 |
As for the "THE", I used Futura Std light and put it on the top left, and make it small to make it look like the support character from the title,
 |
| Fig 3.5 (IMPACT) first attempt, 30.09.2021 |
For the "IMPACT" I used Futura Std Bold Condensed. I intentionally made it big and tall as it is the main focus I wanted the public to look into first.
 |
| Fig 3.6 (OF BAUHAUS) first attempt, 30.09.2021 |
For the "OF BAUHAUS" I used Futura Std Book and put it in the middle. I used a white rectangle shape behind the "OF BAUHAUS" and in front of the "IMPACT" text to create a space in order for the reader to be able to the the "OF BAUHAUS" clearly.
 |
| Fig 3.7 (ON MODERN) first attempt, 30.09.2021 |
As for the "ON MODERN", I used Futura Std Light Condensed to make it thin and create a nice contrast between the texts.
 |
| Fig 3.8 (CULTURE), first attempt, 30.09.2021 |
 |
| Fig 3.9 Lead text first attempt, 30.09.21 |
For the lead text, I used Futura Std Bold with the font size 14 pt together and leading 14 pt to match the rest of the paragraph.
 |
| Fig 3.10 Paragraph first attempt, 30.09.2021 |
For the paragraph, I used Futura Std Medium with the point size 11 pt and leading 3 points bigger which is 14.
 |
| Fig 3.11 First attempt screenshot, 30.09.2021 |
 |
| Fig 3.12 FIRST ATTEMPT, 30.09.2021 |
Fonts: Futura Std Bold (Lead Text), Futura Std Medium (Paragraph)
Font Sizes: 14 points (Lead Text), 11 points (Paragraph)
Leading: 14 points (Lead Text, Paragraph)
Paragraph Spacing: 14 points
Alignment: Left alignment
Second Attempt:
 |
| Fig 3.13 Title second attempt, 30.09.2021 |
 |
| Fig 3.14 Layout second attempt, 30.09.2021 |
This time I tried to make a rather unique design for the title. I planned to make it look rather unbalanced but still pleasing to the eye. I tried to add few rectangle elements on the top right and bottom left for aesthetic purposes. This time I also added a line under the paragraphs on the second page to make it look neater.
Here is how I made it in Adobe Illustrator:
 |
| Fig 3.15 (THE) Second attempt, 30.09.2021 |
As for the "THE" I used Futura Std Bold to add a bit of contrast between the word "IMPACT OF".
 |
| Fig 3.16 (IMPACT OF) Second attempt, 30.09.2021 |
As for the "IMPACT OF", I used Futura Std Medium to make it look thinner. I also placed it horizontally to add more variety to the texts and to make the title looks less boring.
 |
| Fig 3.17 (BAUHAUS) Second attempt, 30.09.2021 |
For the word "BAUHAUS", I used the font Futura Std Extra Bold to catch the public's view. I also purposely made each letter placed not accordingly and make it positioned like the letters are dropping down little by little. I also made the last line of the U and the first line of the H slightly longer to make it look more appealing.
 |
| Fig 3.18 How I made the H and U |
I created the longer line with a curvature tool. Firstly I need to create the outlines for both letters H and U, after that, I could adjust the shape of the letter as I pleased.
 |
| Fig 3.19 (ON) Second attempt, 30.09.2021 |
As for the word "ON" I used Futura Std Light Condensed. I purposely placed it smaller next to modern to make it look more creative and less monotone.
 |
| Fig 3.20 (MODERN) Second attempt, 30.09.2021 |
For the word "MODERN", I used Futura Std Light Condensed. I also made the word slightly bigger than the "ON" to create a good scaling on the font size.
 |
| Fig 3.21 (CULTURE) Second attempt, 30.09.2021 |
As for the "CULTURE", I used Futura Std Light. For this word, I used a bit of kerning just like the previous "CULTURE", however, I don't use a rectangle as background this time, and it looks thinner and smaller.
Afterward, I moved it to Adobe Indesign.
 |
| Fig 3.22 Lead text second attempt, 30.09.2021 |
For the Lead text, I used Futura Std Bold Condensed. I also added an underline for aesthetic purposes. For the font size, I used 23 points with the leading 28 points to match the main paragraph.
 |
| Fig 3.23 Paragraph second attempt, 30.09.2021 |
For the paragraph, I used Futura Std Medium with point size 11 points and leading 14 points like before.
 |
| Fig 3.24 Second attempt screenshot, 30.09.2021 |
 |
| Fig 3.25 SECOND ATTEMPT, 30.09.2021 |
Fonts: Futura Std Bold Condensed (Lead Text), Futura Std Medium (Paragraph)
Font Sizes: 23 points (Lead Text), 11 points (Paragraph)
Leading: 28 points (Lead Text), 14 points (Paragraph)
Paragraph Spacing: 14 points
Alignment: Left alignment
Third Attempt:
 |
| Fig 3.26 Title third attempt, 30.09.2021 |
 |
| Fig 3.27 Layout third attempt, 30.09.2021 |
In this design, I wanted to make it more unique and appealing to the eye. I tried to utilize the contrast of color black and white to create an eye-catching title. I also originally planned to create the I as the platform for the"MPACT" to sit. This time I placed the title in the upper left and add a bit of text on the bottom right of the first page. I also add a bit of a black outline on the right part of the second page. Then, I added black lines on the top left and on the bottom right.
Here is how I made the title in Adobe Illustrator:
 |
| Fig 3.28 (THE) third attempt, 30.09.2021 |
For the "THE", I used Futura Std Light Condensed. I placed it right on top of the Impact with the size slightly smaller.
 |
| Fig 3,29 (IMPACT) third attempt, 30.09.2021 |
For the "IMPACT", I used Futura Std Bold Condensed. I placed it right on top of a white rectangle shape to create a nice contrast and to play around with the black and white.
 |
| Fig 3.30 (OF) third attempt, 30.09.2021 |
As for the "OF", I used Futura Std Light Condensed. I placed it right at the top corner of the B and smaller the font to make it look less of a nuisance.
 |
| Fig 3.31 (BAUHAUS) third attempt, 30.09.2021 |
As for the word "BAUHAUS", I used Futura Std Cold Condensed. I placed the B bigger than the rest of the letter to make a good impression of the main focus of the title. I also connected the U with the H to create a quite unique figure.
 |
| Fig 3.32 How I made the connected U and H |
Just like the previous one, I have to create outlines for the U and then I used the curvature tool to stretch the line of the U until it is the same height as the other H line. As for the H line, I cut it using a line tool and a pathfinder divide.
 |
| Fig 3.33 How I made the U |
As for the U, I also used the pathfinder. Firstly I have to create outlines, and then I create the line segment tool in the place where I want it to be cut, afterwards, I used pathfinder divide to create 2 separate shapes.
 |
| Fig 3.34 (ON MODERN) third attempt, 30.09.2021 |
As for the "ON MODERN", I used Futura Std Light Condensed to make it thin and create a nice contrast between the texts.
 |
| Fig 3.35 (CULTURE) third attempt, 30.09.2021 |
As for the "CULTURE", I used Futura Std Light. I used a bit of kerning on the text to create nice spaces between each letter. I also used a black rectangle behind to add variation.
Here is how I made it in Adobe Indesign:
 |
| Fig 3.36 Lead text third attempt, 30.09.2021 |
For the lead text, I used Futura Std Bold Condensed with the font size 14 points and the leading 14 points as well
 |
| Fig 3.37 Paragraph third attempt, 30.09.2021 |
For the main paragraph, I used Futura Std Medium with a point size of 11 points and leading 14 points.
 |
| Fig 3.38 third attempt screenshot, 30.09.2021 |
 |
| Fig 3.39 THIRD ATTEMPT, 30.09.2021 |
Fonts: Futura Std Bold Condensed (Lead Text), Futura Std Medium (Paragraph)
Font Sizes: 14 points (Lead Text), 11 points (Paragraph)
Leading: 14 points (Lead Text, Paragraph)
Paragraph Spacing: 14 points
Alignment: Left alignment
After getting the feedback from Mr. Vinod, I realized that my titles outline is a bit messy and it needs to be adjusted a bit so it looks neater. However, I have tried to revise my old work but didn't manage to get a satisfying result.
So I decided to come up with new Title designs, and here are my other 2 attempts.
 |
| Fig 4.1 4th and 5th attempt, 07.10.2021 |
I got these ideas after looking through the Bauhaus poster on google. Here are some of my references:
 |
| Fig 4.2 reference 1, 07.10.2021 |
 |
| Fig 4.3 reference 2, 07.10.2021 |
I realized that the long lines represent the word Bauhaus a lot because many posters of Bauhaus are using the same concept. So I tried to make my own version of Bauhaus, but at the same time, people are still able to feel the meaning behind the word.
 |
| Fig 4.4 4th attempt, 07.10.2021 |
For this title, I used Futura Std light condensed for the "The" and make it look a bit smaller than the other words. For the word "IMPACT" I used Futura Std Bold to draw a bit of attention to the word. For the "OF" I used Futura Std Light condensed again.
Next for the word "BAUHAUS", I used Futura Std Extra Bold Condensed and add few long lines at the end of few alphabets. For the "ON MODERN" I used another Futura Std light condensed. Lastly, for the "CENTURY", I used Futura Std Light.
 |
| Fig 4.5 5th attempt, 07.10.2021 |
For this one, I used Futura Std Bold for the "THE". As for the "IMPACT OF", I used Futura Std Medium. For the word "BAUHAUS", I used Futura Std Heavy and added few lines as well. This time I added grey lines for aesthetic purposes.
As for the word "ON", I used Futura Std Light condensed. For the word "MODERN", I used another Futura Std Light condensed but I make it bigger. Lastly for the word "CULTURE", I used Futura Std Light.
After arranging the titles, I planned on making several types with the same model. For the 4th attempt, I made 3 styles.
 |
| Fig 4.6 4th attempt (1), 07.10.2021 |
 |
| Fig 4.7 4th attempt (2), 07.10.2021 |
 |
| Fig 4.8 4th attempt (3), 07.2021 |
For the second one, I used a black background to vary it a bit. I also added another black list at the very right of the paper to match the aesthetic.
For the third one, I noticed that some of the Bauhaus posters' text is presented a bit tilted, so I tried to tilt mine.
As for the 5th attempt, I made 3 styles as well.
 |
| Fig 4.9 5th attempt (1), 07.10.2021 |
 |
| Fig 4.10 5th attempt (2), 07.10.2021 |
 |
| Fig 4.11 5th attempt (3), 07.10.2021 |
For the first design, I planned on making it look rather simple. With this placement, I feel like the text looks much more well arranged and neat.
For the second one, I changed the placement and also the arrangement of the texts.
For the third one, just like the previous attempt, I tried to tilt it a bit for aesthetic purposes.
FEEDBACK
REFLECTION
FURTHER READING
After going through a dilemma, I finally chose the 2 best results from the 4th ad 5th attempts.
 |
| Fig 4.12 4th attempt best result, 07.10.2021 |
Fonts: Futura Std Bold Condensed (Lead Text), Futura Std Book (Paragraph)
Font Sizes: 21 points (Lead Text), 11 points (Paragraph)
Leading: 28 points (Lead Text), 14 points (Lead Text, Paragraph)
Paragraph Spacing: 14 points
Alignment: Left alignment
 |
| Fig 4.13 5th attempt best result, 07.10.2021 |
Fonts: Futura Std Bold Condensed (Lead Text), Futura Std Book (Paragraph)
Font Sizes: 21 points (Lead Text), 11 points (Paragraph)
Leading: 28 points (Lead Text), 14 points (Lead Text, Paragraph)
Paragraph Spacing: 14 points
Alignment: Left alignment
After asking my friends and my family's opinion, I decided that I would go for the 5th attempt best result. Here are few screenshots from the Adobe Indesign:
 | |
|
 |
| Fig 4.15 screenshot 2, 07.10.2021 |
FINAL RESULT:
 |
| Fig 4.16 FINAL RESULT, 07.10.2021 |
PDF FINAL RESULT
FEEDBACK
Week 6:
General Feedback: Try to pay attention to the ragging. Pay attention to the widows and orphans as well. Make sure that we use the same typeface for the title and the texts.
Specific Feedback: Mr. Vinod said that my title outline is not neat. He suggested that each of the letters of "BAUHAUS" is straight and aligned. Also, the squares under and on top of the pages look unnecessary so it is better to be removed.
REFLECTION
Experience: In this project, I had a little bit of fun creating the title of the text. I also learned how to create interesting layouts as well as good and neat arrangements of the text. Although, I did find a lot of difficulties throughout the process like finding the suitable design as well as struggling to arrange the texts.
Observation: I found a lot of difficulties in looking for a suitable design for the text. I tried so hard on experimenting with the title. I also had a hard time managing the text arrangements as we need to pay attention to the ragging also few details such as widows and orphans.
Findings: I found that creating a layout is not an easy task. We need to pay attention to every little detail to satisfy the reader.
FURTHER READING
 |
| Fig 5.1 Typographic Design Form and Communication, 2015 |
SINGLE COLUMN GRIDS
When text appears as a simple, linear narrative, as in the traditional novel or exhibition panel, it is often best to set it as a single block. There exist many ways to orient single text blocks to pages.
The problem is always to consider the text block and the margins of the page as a proportional system. Margin function to set the typographic stage, they may be dynamical, asymmetrical, or quietly symmetrical. Margins also accommodate marginalia, separate typographic parts that support the text.
 |
| Fig 5.2 margin1 |
 |
| Fig 5.3 margin 2 |
Single column grids may appear quite unremarkable to the average reader, but in reality, effective layouts are crafted with the utmost concern for minute detail. Choosing the right typeface for the content, adjusting letter, word, and line spacing for optimum legibility, and developing the proportions to set an appropriate tone are some issues that require the designer's attention.
 |
| Fig 5.4 cover and spread from a small book published in 1957 by the German Publisher |
MULTICOLUMN GRIDS
An elemental grid is based upon a Cartesian coordinate system of intersecting perpendicular axes. It consists of rectangular modules defined by a network of horizontal and vertical lines.
Before any decision can be made about the construction of the typographic grid, the designer must first become thoroughly acquainted with the amount of text, its content, the audience for which it is intended, and the medium used for its delivery.
Multicolumn grids possess unique anatomical characteristics. these include margins that provide boundaries for typographic elements and define the active space of the page, text columns, gutters that separate text columns, and flow lines that create a dominant axis for the alignment of elements from page to page.
To structure type is to organize typographic forms into a unified whole, and to establish visual pathways between them.
 |
| Fig 5.5 multicolumn grids |
When working with multicolumn grids, it is essential to balance three interdependent variables. These are type size, line length, and interline spacing. An adjustment to any one of these aspects will most likely require an adjustment to the others.
In the normative sense, column intervals separating text columns are adjusted to enable the eye to flow logically from one column to the next without confusion about reading directions.
 |
| Fig 5.6 Multi columns sample |
1.jpeg)
Comments
Post a Comment