Typography / Task 2: Typographic Exploration & Communication

-
01.10.2021 - 08.10.2021 (Week 6 - Week 7)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Typography / Taylor's University 
Task 2 / Typographic Exploration & Communication (Text Formatting and Expression)

LIST

LECTURES

Week 5 (24/08/2021) : Introduction to Task 2

While marking our Task 1 E-Portfolio, we were asked to watch 2 lecture videos in order to proceed to the next step, Task 2. 

  • "Typo_5_Understanding"
1. Letters
Most of the time we always thought that a letter case has to be symmetrical / always symmetrical. But not all typefaces are symmetrical, even though it looks symmetrical, it's not. It is easy to see the two different stroke weights of the Baskerville stroke form (on example), each bracket connecting the serif to the stem has a unique arc. (look at the circle). The width of the left slop is thinner than the right stroke.
fig. 1, Baskerville, source; lecture video, Week 5 (24.09.2021)

Even Univers, which look very symmetrical actually has a difference between the left gap and right gap of the letter. The left one is smaller.
fig. 2, Univers, source; lecture video , Week 5 (24.09.2021)

Both Baskerville and Univers demonstrate that meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. Which mean, every type designer have their own reason of making their letterforms. 

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. 3, comparison, source; lecture video, Week 5 (24.09.2021)

Usually, the common mistakes are changing a letter or adding some changes and elements into the typeface. Whereas what is needed in a font style is the importance of simplifying the characteristics but still feel decorative and appreciate it.

2. Maintaining X-height
fig. 4, maintaining x-height I, source; lecture video, Week 5 (24.09.2021)

As you already know, the x-height generally describes 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. The reason is, if we make the letter at the same size it will look optically smaller.

fig. 5, maintaining x-height II, source; lecture video, Week 5 (24.09.2021)

3. Letters / Form / Counterform
fig. 6, Letters / Form / Counterform I, source; lecture video, Week 5 (24.09.2021)

Just as important as recognizing specific letterforms is developing a sensitivity to the counter form (or counter)—the space describes and is 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 an important concept when working with letterforms like lowercase ‘r’ that have no counters per se. How well you handle the counters when you set type determines how well words hang together—in other words, how easily we can read what’s been set.
fig. 7, Letters / Form / Counterform II, source; lecture video, Week 5 (24.09.2021)

One of the most rewarding ways to understand the form and counter of a letter is to examine them in close detail. The examinations also provide 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.

Of course, to know the examples above for each letter, we must understand the condition of the typeface with a lot of type analysis and break down each typeface element so that we can smoothly design a typeface.

4. Contrast 
The basic principles of Graphic Design apply directly to typography. The following are some examples of contrast—the most powerful dynamic in design—as applied to the type, based on a format devised by Rudi Ruegg. The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/ large light.
fig. 8, Diagram, source; lecture video, Week 5 (24.09.2021)

We need contrast in order to differentiate from any information that we will convey. The diagram is very important as an inspiration in combining every typeface that we can include in our design work.
  • "Typo_Task 2_Process Demo" (Brief Tutorial on Making Task 2)

In this video Mr. Vinod gives a tutorial on making layouts.
First, Mr. Vinod told us to create the sketches. including entering all existing writings and formats into a sketch sheet.
fig. 9, Sketch, source; lecture video, Week 5 (24.09.2021)

After that, sketch a good headline, then try to put it in the format. After sketching, illustrate it on illustrator. Then, we have to do this;
  1. Open Indesign and create a paper
  2. Make facing pages, turn off selected spreads, drag the second page next to the first page.
  3. Edit the layout.
  4. For the last step, Mr. Vinod asked us to put on some patches to see whether the layout is good or not. It also to indicate balance and flow.
fig. 10, Patches, source; lecture video, Week 5 (24.09.2021)

Week 6 (01/09/2021) :

Today, Mr. Vinod started the class by asking us, "how are we feeling?' and "what can we do to improve the learning," which it were a great session that we can exchange thoughts and understand our lecturers and peers better. After that, Mr. Vinod started the feedback session. First, he gave some feedbacks to some students, then change the moderator to be one of us. Thus, we all can conduct in the learning actively.

  • "Typo_6_Screen and Print"

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 viewport and more. Our experience of typography today changes based on how the page is rendered because typesetting happens in the browser.

1. Print Type Vs Screen Type
  • PRINT TYPE
fig. 11, print type, source; lecture video, Week 5 (24.09.2021)
    • Needed 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 are 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.)
  • SCREEN TYPE
fig. 12, screen type, source; lecture video, Week 5 (24.09.2021)
    • Optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. 
    • Can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. 
    • More open spacing (especially for typefaces intended for smaller sizes). To improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.
2. Hyperactive Link/ hyperlink
  • Hyperlink = word, phrase, or image that you can click on to jump to a new document or a new section within the current document. 
  • 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. 
3. Screen Font
fig. 13, font difference, source; lecture video, Week 5 (24.09.2021)
  • Size:
    • 16-pixel text on a screen = same size as text printed in a book or magazine 
    • if 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
  • Font:
    • Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
  • Pixel:
fig. 14, pixel types, source; lecture video, Week 5 (24.09.2021)
    • 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 variation.
4. Static vs Motion
  • Static
fig. 15, static typography, source; lecture video, Week 5 (24.09.2021)

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. 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.
  • Motion
fig. 16, motion typography, source; (https://www.youtube.com/watch?v=FD7w2l88dl8), Week 5 (24.09.2021)

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.

Week 7 (08/09/2021) : 

INSTRUCTIONS
<back to top>

<iframe src="https://drive.google.com/file/d/1_JYfWVZTe7oDL_0AAImBCEdqsEdKjEXO/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2 submissions MUST include the following:
  1. Layout Research
  2. Sketches
  3. Digital Progression
  4. JPG submission (300dpi, grayscale, max quality)
  5. PDF embedded
  • 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

Week 5: Begin to make some sketches / brainstorm some idea for Task 2
Week 7: Submission deadline, the task (E-portfolio): Friday, 8 Oct 2021, 5 AM (UTC +8)

There are 3 texts provided:


fig. 17 Texts Provided, Week 5 (24.09.2021)

EXERCISES

1. Layout Research
Before I start to make my layout, I did some research in Pinterest and Web: 
fig. 18, Research 1, source; (https://maxboam.wordpress.com/2011/04/18/marking-paragraphs-conventionally-2/#jp-carousel-2238), Week 5 (24.09.2021)
fig. 19, Research 2, source; (https://pin.it/1YGUxRj), Week 5 (24.09.2021)

Most of the layout design I found give an easy accessibility for reading and they don't use any graphical elements. From some layouts I discovered, I found a layout that seems very catchy for me, I did an observation on it.
fig. 20 Research 3, source; (https://pin.it/1je6YL4), Week 5 (24.09.2021)

The type expression is designed simple but easy to understand. What I like the most is the flow, they're neat and clean. The designer played with dark and light color in order to make contrast between the text, which can highlight some vital points.

2. Sketch
I have no idea at first, so, I made 2 rough sketches:
fig. 21, Sketch 1, Week 5 (24.09.2021)

fig. 22, Sketch 2, Week 5 (24.09.2021)

I want to make something like a staircase paragraph, so it'll have a flow, so I explore more one by one as I go through the digital progression.

3. Digital Progression
I began to create my idea. I arranged some words for the title in Adobe Illustrator because I want to see the preview with the exact font. Then, I exported it as PNG and import it in Procreate so it'll be easier and faster to arrange. I mostly use Futura and Univers to gain a clean look. Also, I remembered Mr. Vinod mentioned that sans serif types are suitable for digital use. Then, I began to arrange my typefaces and layouts, and here are some results I made:
  • Type Expression
First of all, I tried to make some type expressions for article 2:
fig. 23 type expression 1, Week 5 (24.09.2021)

fig. 24, type expression 2, Week 5 (24.09.2021)

For article 3, I want to try making something with exact edge:
fig. 25, type expression 1 article 3, Week 5 (24.09.2021)

fig. 26, type expression 2 article 3, Week 5 (24.09.2021)
  • Layout
So, I started to arrange article 2. The reason I chose this is because I want to try experiencing with each paragraph's topic title. 
fig. 27, article 2 draft 1, Week 5 (24.09.2021)

fig. 28, article 2 draft 2, Week 5 (24.09.2021)

fig. 29, article 2 draft 3, Week 5 (24.09.2021)

After that, I create some layouts for paragraph 3. For this article I want to experience with the names provided. So, here're the draft:
fig. 30, article 3 draft 1, Week 5 (24.09.2021)
fig. 31, article 3 draft 2, Week 5 (24.09.2021)
fig.  32, article 3 draft 3, Week 5 (24.09.2021)

I want to try to make something different with the "N" and "E" letters. So, I modified the letters.
fig. 33, article 3 draft 4, Week 5 (24.09.2021)
fig. 34 article 3 draft 5, Week 5 (24.09.2021)

So, here's the compilation of my drafts:

fig. 35, draft compilation, Week 5 (24.09.2021)

After I received feedbacks and hear some given feedbacks for my peer, I want to explore more. I actually don't quite satisfied with mine, so I tried to start back from making the type expression. I focused my work on Article 3, so here're some of my type expression explorations:
fig. 36, type expression exploration part 2, Week 6 (01.10.2021)

I actually want to make something that is "connecting" so there's a sense of "unite" word in that. I actually tried to make some ligature but turns out it make the word harder to read in first glance. So, I like the fifth type expression I made.

Moving to the paragraph layout, first I turned on my hidden character, to check the multi spacing in the text.
fig. 37 , hidden character Week 6 (01.10.2021)

I found out that there texts aren't typed neatly, so I removed some excessive spacing:
fig. 38, spacing (before) Week 6 (01.10.2021)
fig. 39, spacing (after) Week 6 (01.10.2021)

Then, I started to proceed making my paragraph formatting task. First, I try to rearrange my type expression based on my previous draft. I refer to these three drafts:
fig. 40, article 3 draft 3 Week 6 (01.10.2021)
fig. 41, article 3 draft 4 Week 6 (01.10.2021)
fig. 42, article 3 draft 5 Week 6 (01.10.2021)

So, this is my type expression draft:
fig. 43, type expression Week 6 (01.10.2021)

Then, I add my paragraphs and did some cross alignments:
fig. 44, cross alignment Week 6 (01.10.2021)

Then, I adjusted the tracking;
fig. 45, tracking Week 6 (01.10.2021)

4. JPG submission (300dpi, grayscale, max quality)
fig. 46, blocked Week 6 (01.10.2021)
fig. 47, info, Week 6 (01.10.2021)
fig. 48, font setting, Week 6 (01.10.2021)
Description:
Fonts: Univers LT Std (75 Black, 65 Bold Oblique, 57 Condensed Oblique, 55 Roman, 45 Light Oblique)
Point size: 8 pt (text), 19 pt (lead-in text), 94 pt (headings)
Leading: 12 pt
Tracking: range -15 until 15 (mixed)
Line length: 58 (body text)
Widow / Orphan: -
Raging: Used
Cross Alignment: Achieved
Paragraph Spacing: Added
fig. 49, final Week 6, (01.10.2021)

5. PDF embedded
<iframe src="https://drive.google.com/file/d/17f1ncY_RGqW5RgSOOj2s051hSy2PODx0/preview" width="640" height="480" allow="autoplay"></iframe>

FEEDBACKS

WEEK 6 
    General Feedback: 
  • Typographic Exploration & Communication:
    • Condensed font not suitable for reading 
    • Use the same typeface! 
    • Get hand motion to do sketches so there'll be more idea and development 
    • Keep paragraph formatting good (achieve cross alignment, ragging, spacing, etc.) 
  • E-Portfolio:
    • Add shortcut link to Task 1
    • Can follow past student's ways to present work in E-Portfolio (but no plagiarism!)
    Specific Feedback: 
  • Typographic Exploration & Communication:
    • The layouts are impactful 
    • Layout 4 and 5 title are little bit hard to read
WEEK 7
    Specific Feedback: 
  • Typographic Exploration & Communication:
    • Lack paragraph spacing
    • Will be better if text coloumns had a consistent starting point (at the top), or, a consistent ending point (at the bottom), so the layout would be a lot more fluid.
  • E-Portfolio:
    • Must add dates for complete information
    • Final JPG should be next to PDF

REFLECTION 

-Experience: 
In this particular exercises, I started to explore more about both type expressions and paragraph layouting. I actually don't have any idea at first, but as I started to jump in the exercises and study from the lectures, I started to understand better. It's actually a little bit hard to perfectly made a design without any visual elements.

-Observation:
As I see lots of references in the Internet, I found out that most of the designers never used any visual elements in expressing the meaning of the type. They use mostly pure typographic exploration which is used only by using letterforms. They also create a catchy layout which make the viewers want to read on the text.

-Finding:
I found out that in Adobe Indesign, we can create some graphical elements. I used that to create the "UN" in my UNITY have a sense of unity. I also just known that the letter faces used for screen varies. I thought that there're no such things like that.
FURTHER READING

Based on this exercise, for further reading I want to study more about typography's basic knowledge about kerning, tracking, and leading. Since it's a digital typography task, so I used "I.D.E.A.S." by David Creamer.
fig. 50, "I.D.E.A.S Computer Typography Basic" by David Creamer Week 6 (01.10.2021)
Reference:
David Creamer. (2003). "I.D.E.A.S Computer Typography Basics",www.Ideastraining.com

1. Kerning
fig. 51, kerning, source; book, Week 6 (01.10.2021)
  • An inter character spacing
  • Can create more pleasing kook on the text
  • Certain letter combination require manual adjustment; F, I, K, L, O, P, Q, T, V, W, X. (both uppercase and lowercase)
2. Tracking
fig. 52, tracking 1, source; book, Week 6 (01.10.2021)
fig. 53, tracking 2, source; book,  Week 6 (01.10.2021)
  • Adjustment of word spacing
  • refers to adjustment of selected characters, word, spaces.
  • Purpose: make type fit a required space without altering the type size / spacing.
  • Important use : fix 1-3 short words in the end of the paragraph
  • Can be used as effect
3. Leading (line spacing)
fig. 54, leading, source; book, Week 6 (01.10.2021)
  •  Refers to the amount of space between lines of type
  • To ensure a uniform setting : select the entire paragraph
  • 10/12 manner : if pt size is 10, leading is 12, must be (+2)

How to Use Font Ligatures in InDesign, Photoshop & Illustrator

I also did some further reading about "ligature" on a web since I want to try using ligature at first.

What's a ligature?
Ligature is a form of combination of 2 or 3 characters into a single characters. 
  • Different ligatures depending on the language. (In English: ff, ffi, fi, and fl are common because there are many words with these combinations) 
  • Ligatures need to be used carefully as they can look very obvious if your text contains wide letter spacing.
Type's of Ligatures:
  • Standard Ligatures
    • The most standard one
  • Discretionary Ligatures
    • Usually for decorative purpose
fig. 56, discretionary ligatures, source; (https://design.tutsplus.com/tutorials/how-to-use-font-ligatures-in-indesign-photoshop-illustrator--cms-35554), Week 6 (01.10.2021)

How to Use It?:
fig. 57, tutorials, source; (https://www.youtube.com/watch?v=_5FaneDYWhk&t=18s), Week 6 (01.10.2021)

The web provided me with a video on how to use ligature. 
For short, we have to select the text and choose, windows > glyphs, then select ligature as the choice.

Comments

Post a Comment

Popular posts from this blog

How to Create Jump Link

-
Image
What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code:  <span id="LIST"></span>  on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
Read more