TYPOGRAPHY - TASK 2 : Typographic Exploration and Communication

-

24.9.2021 - 08.10.2021 (Week 5 - Week 8)
Hansel Ribowo / 0350008 / Bachelor of Design In Creative Media
Typography
Task 2 / Typographic Exploration and Communication

Lectures

Week 5
Typography: Letters / Understanding Latterforms
  • 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.
  • 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.
  • 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.
Typography: Letters / Maintaining x - height
  • 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.
Typography: Letters / Forms / Counterform
  • 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.
Typography: Letter / Contrast
  • The basic principles of Graphic Design apply the directly to typography. The following are some example of contrast -- the most powerful dynamic design -- as applied to type, based on a formate devised by Rudi Ruegg.
Week 6
Typography In Diffrent Medium:
  • 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 result of skilled typesetter and designers. Today typography exist not only on paper but on a multitude pf 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.
Print Type Vs Screen Type
Print Type:
  • Primarily, type was designed intended for reading form print long before we read from screen. It is designer's job to ensure that text is Smoot, flowing, and pleasant to read. They are versatile, easy0to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it breeze.
  • 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.
Screen Type:
  • Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. Another important adjustment -- especially for the 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 page to another. Text 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 book 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 as 16 pixels on most screen.
System Fonts for Screen / Web Safe Fonts:
  • Open sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.
Pixel Differential Between Device:
  • 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.
Static Vs Motion:
  • Static typography has minimal characteristic in expressing words. Traditional characteristic such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
  • Temporal media offer typography opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellatoni, 1999). Film title credits present typographic information overtime, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.
Instructions

Exercises

Task 2: Formating and Expression
For task 2 Mr Vinod told us to use Adobe Illustrator and Adobe InDesgin CC to formating our text, and theres rules for the task:
  • Create 2 Pages (200mm x 200mm)
  • No Image or Color
  • You can use minor graphical element on your design
  • Final result in JPEG
Sketches for Tittles:
Fig 1.1 Tittle Sketchs - Week 6 (29/9/2021)

For task 2 Mr Vinod ask us to sketch for the composition titles for the text using adobe illustrator, to guide us making the composition Mr Vinod gave us video demo for composition the titles and text.

For my paragraph spacing :
Fig 1.2 Paragraph Spacing / Week 6 (29/9/2021)
For my cross allignment :
Fig 1.3 Cross Alignment / Week 6 (20/9/2021)

Progression Layout :
Fig 1.4 Sketch Layout 1 - Week 6 (29/9/2021)
  • Fonts: Gill Sans Std Bold, Gill Sans Std Reglar.
  • Point Text: 15pt (Text Lead), 11pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).


Fig 1.5 Sketch Layout 2 - Week 6 (29/9/2021)
  • Fonts: Gill Sans Std Bold, Gill Sans Std Reglar.
  • Point Text: 15pt (Text Lead), 11pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).

Fig 1.6 Sketch Layout 3 - Week 6 (30/92021)
  • Fonts: Gill Sans Std Bold, Gill Sans Std Reglar.
  • Point Text: 15pt (Text Lead), 11pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).

Fig 1.7 Sketch Layout 4 - Week 6 (30/9/2021)
  • Fonts: Gill Sans Std Bold, Gill Sans Std Reglar.
  • Point Text: 15pt (Text Lead), 11pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).
Fig 1.8 Sketch Layout 5 - Week 6 (7/10/2021)
  • Fonts: ITC New Baskerville Std Roman, Bold, Bold Italic.
  • Point Text: 21pt (Text Lead), 14pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).
Fig 1.9 Sketch Layout 6 - Week 6 (7/10/2021)
  • Fonts: ITC New Baskerville Std Roman, Bold, Bold Italic.
  • Point Text: 21pt (Text Lead), 14pt (Text) 
  • Leading: 12pt (Text Lead), 24pt (Text).
  • Paragraph Spacing: 12pt (Text).
Fig 1.10 Sketch Layout 7 - Week 6 (7/10/2021)

So this for progression i try a diffrent layout because i dont know which one is better for my final layout.

Final Outcome
For my final outcome i choose the last one because i think its better than the others.
Fig 1.11 Final Outcome JPG - Week 6 (7/10/2021)

Final Outcome PDF - Week 6 (7/10/2021)
Feedback

Week 6
General Feedback : For formating text the title must interesting when someone see it and expres the tittle, dont use too much graphic design and dont make the graphic design is the star.
Specifik Feedback : For my sketch 1-4 the text is too tight need more leading and for the sketch 4 the layout is not working, because the tittle is to far away from each other and theres no expression in the tittle.
Week 7
Feedback : The layout and headline exp is adequate, but has rrom for greater improvement, for this more exploration is necessary, sadly we have run out of time. That said typesetting of the diff paras are good, however the awkward spacing between the sub-haeds andthe text makes it inconsistent.
Reflection
For task 2 at first i was confuse with expressing the tittle for the text, after i listen to the lecture again i can understand how to express it and i observe that i must combine the format text skill with the type expression skill in order to make the tittle and text interesting to see and i found that its not easy but the end of the day i finally can done it.
Further Reading
Fig 2.1 Typographic Design : Form and Communication (2015)
Reference:
Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.
(2015). Typographic design: Form and communication.
Hoboken, New Jersey: John Wiley & Sons, Inc.

The Typographic Grid

Fig 2.2 Pg. 75, Typographic Design : Form and Communication (2015)

When working with multicolumn grids, it is essential to balance three interdependent variables. These are type size, line length, and interline spacing (leading). An adjustment to any one of these aspects will most likely require an adjustment to the others. Changing the size of type, for example, will probably create a need to adjust the line length. Since the typographic space is divided horizontally into columns of varying widths, it is possible to control these variables while also creating a rhythmic visual field.

Fig 2.3 Pg. 76 Typographic Design : Form and Communication (2015)

Grids may consist of primary and secondary divisions of space. For example, the grid used in this book consists of two columns as the dominant structure, with an optional structure of six columns (note the visible grid lines on this page). Concurrent grids not only provide added flexibility, they also enable the designer to layer typographic elements, achieving the illusion of three-dimensional space.



Comments

Post a Comment

Popular posts from this blog

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more

APPLICATION DESIGN II - LECTURE

-
Image
03/05/2023 Hansel Ribowo/BDCM App Design II Lecture Lecture In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website, Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation First we need to add id to the logo. and then add the Gsap at the java script section. This one is for adding ease in/out for the animation After that, we added some animation delay to make it come one by one. This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel. now we making the main lo...
Read more