TYPOGRAPHY - TASK 2

3/11/2023-20/11/2023 ( Week06-Week08)

Chan Suet Yee/ 0358427/ Bachelor of Design (Hons) in Creative Media

GCD60104/ Typography

Task 2


LIST

TABLE OF CONTENTS :









LECTURES

WEEK 6 - LECTURE 06 : SCREEN AND PRINT


Typography / different medium


Fig 1.0 Examples of typographical Artwork design for print purpose




Fig 1.1 Screen design for website




Typography in different medium
  • Typography was once thought to be living only when it was printed on paper. A publication was finished when it was edited, typeset and printed. Nothing changed after that
  • Typography is used in many screens these days in addition to papers. I t could be affected by numerous unidentified and fluctuating parameters such as :
    • operating system
    • system fonts
    • the device and screen itself
    • the viewport


Print type vs Screen type

Type for print 

Most popular typefaces for printing:
  • Caslon, Baskerville and Garamond 
  • Have the characteristics of intellectual and elegant 
  • Highly readable when set a small font size
  • Versatile, easy-to-digest classic typeface has a neutrality and versatility that makes typesetting with it a breeze


Fig 1.2 Example of method of typesetting




Fig 1.3 Example of typography in print



Type for screen 
  • Web-safe typefaces are optimised and frequently modified to improve readability and performance in a range of digital contexts
  • This can include a :
    • Taller ×-height (or reduced ascenders and descenders)
    • Wider letterforms
    • More open counters
    • Heavier thin strokes and serifs
    • Reduced stroke contrast
    • Modified curves and angles for some designs
  • Another important adjustment especially for typefaces intended for smaller sizes is more open spacing
  • These factors can improve character recognition and overall readability in the non-print environment which include :
    • Web
    • E-books
    • E-readers
    • Mobile devices

 

Hyperactive link/ hyperlink
  • A word, phrase or image that can be clicked on to jump to new document or section within the current document
  • Hyperlinks are normally in blue and underlines by default
  • The arrow changes to a small hand pointing at the link when cursor is moved over a hyperlink


Font size for screen
  • 16px text on screen is about the same size as the text printed in a book or magazine
  • System Fonts for screen/ Web same fonts
  • Each device comes with its own pre-installed font selection which is based on its operating system
  • Web safe fonts that can be used on both platform:
    • Open sans
    • Lato
    • Arial
    • Helvetica
    • Times New Roman
    • Times
    • Courier New
    • Courier 
    • Verdana
    • Georgia
    • Palatino
    • Garamond  



Fig 1.4 Comparison of font size in both platforms



Pixel Differential between devices
  • Screen used by our PCs, tablets, phones and Tv are in different sizes, text seen on screen differs in proportion too since they have different sized pixels
  • For example : 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV


Fig 1.5 Pixels differential between devices



Static vs Motion

Static typography:
  • Minimal characteristic in expressing words
  • Traditional characteristics like bold and italic offer only a fraction of the expressive potential of dynamic properties

Motion typography:
  • Temporal media offer typographers opportunities to dramatise type , for letterforms to become "fluid " and "kinetic"
  • Film title credits present typographic information over time
  • Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack


Fig 1.6 Static vs motion



INSTRUCTIONS




TASK 2 - TEXT FORMATTING AND EXPRESSION

We were given three editorial texts for this task, and we have to select one to use on a two page (200mmx200mm) editorial spread. After creating the headline in Adobe Illustrator, the text should be formatted and the layout rearranged using Adobe InDesign. Graphic elements such as lines and shade may be used, but no images and colour are allowed.


SKETCHES

I created 2 sketches that shows different headline expressions and text layout arrangements.


Fig 1.7 Sketch 1 



Fig 1.8 Sketch 2



RESEARCH AND INSPIRATION

Prior to beginning my design, I browsed Pinterest for inspiration on how to represent the word 'Bauhaus'. I got my design concepts from the 3 images below. I picked them because they catch my eye and I believe it would be intriguing to incorporate some of these elements in my design.



Fig 1.9 Inspiration 1 




Fig 1.10 Inspiration 2




Fig 1.11 Inspiration 3



HEADLINE EXPRESSIONS EXPLORATIONS

The words ' bauhaus thought ' serves as the headline's primary focus. I experimented with different arrangements to see which best captures the bauhaus aesthetic. Using Adobe Illustrator, I produced 3 designs. I decided to use design 02 as my final headline design so that I could move on to the next exercise.


Fig 1.12 Headline design 01





Fig 1.13 Headline design 02





Fig 1.14 Headline design 03



DESIGN PROCESS

Initial design - layout 01 (process)

Since the word 'Bauhaus thought' is the keyword of the whole headline it should be appear first when readers scan the text, so I began by experimenting with different arrangements of the words to see which one would best help grab reader's attention. I ended up arrange them in the pattern as the image shown below.



Fig 1.15 design process 01



In order to express the word 'Bauhaus' I added lines on 'U' and 'T' as I want to extend one of their strokes. The vertical lines are added to give the design a balance appearance.



Fig 1.16 Design process 02



Final design for the headline



Fig 1.17 Design process 03




This is my initial design, I decided to change the text arrangement and the length of the lines because I think the 2 pages looks unconnected and like separate pages



Fig 1.18 Design process 4



LAYOUT 01




HEAD
Font/s:  Gills Sans Std Condensed (Bauhaus Thought), Futura Std Medium (The role of, on modern culture)
Type Size/s: 34pt (The role of, on modern culture), 120pt (Bauhaus thought)


LEAD IN TEXT
Font: Gills Sans Std Italic
Type Size: 20pt
Leading: 18pt


BODY
Font/s: ITC New Baskerville Std Roman
Type Size/s: 12pt
Leading: 14pt
Paragraph spacing: 14pt
Characters per-line: 51
Alignment: left justify


Margins: 10mm top, 10mm left + 10mm right + 10mm bottom
Columns: 2
Gutter: 5mm




Final layout - layout 02 (process)

For my second design which is also my final design, I move the entire headline a little upward to arrange it in the centre of the page.







After that I extended the line which next to the letter 's' so that it could help to link the headline and the text while leading the readers to read from the headline to the text.





Lastly, I changed the text font from ITC New Baskerville Std to Univers LT Std as I think this font is easier to read.




FINAL LAYOUT (WITHOUT GRID) - JPEG






FINAL LAYOUT (WITH GRID) - JPEG




FINAL LAYOUT (WITHOUT GRID) - PDF




FINAL LAYOUT (WITH GRID) - PDF




HEAD
Font/s:  Gills Sans Std Condensed (Bauhaus Thought), Futura Std Medium (The role of, on modern culture)
Type Size/s: 34pt (The role of, on modern culture), 120pt (Bauhaus thought)


LEAD IN TEXT
Font: Gills Sans Std Italic
Type Size: 20pt
Leading: 18pt


BODY
Font/s: Univers LT Std Roman
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 50
Alignment: left justify


Margins: 10mm top, 10mm left + 10mm right + 10mm bottom
Columns: 2
Gutter: 5mm



FEEDBACK


Week 6

Specific feedback : no feedback given
General feedback : no feed back given

Week 7

Specific feedback : Be careful on the extending strokes to make sure the thickness is the same
General feedback : Avoid long line length (more than 60 characters per line), don't squeeze all the words together 



REFLECTION


Experience
I came to the realisation that this task calls for a comprehensive understanding and an in-depth knowledge of text formatting. While working, it's critical to keep reader in mind because our decisions on the best fonts and layout affect how readable the work for the reader. It is very important for us to be emphatic and skilful in order to achieve a nice reading rhythm. However, I still found out it was quite interesting to experiment with different fonts to see which works better with the texts.

Observations
I can now use Adobe InDesign more proficiently than I did on the previous task. While there were still some parts where I have to double-check my steps with the recorded videos. I finished the task much faster than I had on the previous exercise because I was getting familiar with the programme over time.

Findings
Through my design work, I've learned that sometimes, simpler is always better and that even small design adjustments can have a significant impact on the overall layout and the appearance. Other than that, I have learned not to overdo our designs and keep the design minimalist.




FURTHER READING

Typographic Design : Form and Communication




The typographic grid

Structure and space

The shapes of typographic elements have directional qualities that are echoes as implied spatial corridors. These divisions establish proportional relationships and gives the space movement and kinetic energy.


Proportion

Divided space is provided as a system of proportional relationships. To work effectively with the typographic grid is to understand that it also is a system of proportions. The grid ratio, which is a mathematical relationship between two or more grid measurements governs the size and placement of typographic elements .

Golden section is a law of proportionally found frequently in nature and the human body, and used throughout centuries in art, architecture, design, and music.


The square

A natural devision of the golden section is the basic square. This archetypal form has influenced the development of the modern grid perhaps more than any other system of proportion. Square combination lend an infinite variety of visual patterns.
A square subdivided into a 256 unit grid of smaller squares displays on enormous range of proportional possibilities. The language of the horizontal and the vertical was elevated the spiritual status by practitioners of the de Stijl movement.


Single column Grids

When the text appear as a simple, linear narrative, as in the traditional novel or exhibition panel, it is often to set it as a single block. Always consider to the text block and the margins of the page as a proportional system, Marins function to set the typographic stage, they may be dynamically asymmetrical or quietly symmetry . Margins also accommodate marginalia, separate typographic part that support the text. This includes folios, running heads, running feet and notes. The negative space of margins flows gently into the text, a mingling of positive and negative space. The text block can be sized and adjusted within the page to attain a variety of proportional relationships.


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. Multicolumn grids possess unique anatomical  characteristics. These include margins that provide boundaries for typographic elements and define the active space of the page, text column, gutters that separate text columns and flow lines that create a dominant axis for the alignment of the elements from page to page. The baseline grid represents the baselines of the primary text, which run from the top margin to the bottom margin. These horizontal divisions of space aid the designer in aligning text elements from column to column.


Modular Grids
An excellent model for illustrating the modular grid is the work of Josef Muller-Brockman, a major contributor to its wide acceptance . A leader in the development of the International Typographic Style during the 1950s and 1960s, Muller-Brockman sought more pure objectivity in typography and graphic expression.


Improvisational Structures
Improvisational structures evolve in response to the specific elements of innformation as opposed to modular grids, which are predetermined organisational devices. A complete grasp of the visual material in question enables designers parts and to create visual hierarchies among them. In the metaphorical sense, typographic designers are information architects- they ;build' typographic environments for clear and accessible information.









Comments

Post a Comment

Popular posts from this blog

GAMES DEVELOPEMNT - TASKS

Image
23/04/2025 -21/05/2025 (Week 01-14) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Games Development  | DST611104 | Sec 01  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS   INSTRUCTIONS   TASKS  TASK 01 & 02 : GAMES DESIGN DOCUMENT & GAME ASSETS  TASK 01  For  Task 1  of our Game Development module, our group was formed during  Week 2 . I teamed up with  Mei Hui  and  Emily , and together, we began brainstorming ideas for our 2D side-scrolling game. After some discussion, we decided to draw inspiration from a tabletop game we previously created in one of our past semester projects, titled  "Sudsprite Spin."  We felt that the characters and gameplay mechanics from that game had potential to be developed into a fun and whimsical digital experience. In our 2D game adaptation, the  Sudsprite  becomes the main character. We wanted to preserve the bubbly, playful the...
Read more

APPLICATION DESIGN 2 - TASK 2

Image
19/05/2025 -08/06/2025 (Week 05-07) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Application Design II | DST60504 | Sec 01 Task 02 | Interaction Design Proposal & Planning  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. TASKS 3.REFLECTION   INSTRUCTIONS   TASKS  INSTRUCTIONS For this assignment, we are required to develop a  comprehensive interaction design plan  for our final  web-based mobile application . The goal is to  visually and conceptually prepare the user interactions and animations  that will enhance the overall user experience. The key components of the assignment include: 1. Interaction Design Documents Create  detailed flowcharts and wireframes  to map out the user journey. Clearly show the  layout of each screen  and the  navigation structure  of the app. 2. Animation Prototyping Micro Animations : Design small interactive effects (e.g., button clicks, loading in...
Read more

ADVANCED INTERACTIVE DESIGN - TASK 02

Image
23/05/2025-13/06/2025 (Week 05-08) Chan Suet Yee 0358427 Bachelor of Design (Honours) in Creative Media Advanced Interactive Design | DST60804 | Sec 02 Task 2 | Interactive Design Planning & Prototype  LIST  TABLE OF CONTENTS: 1. INSTRUCTIONS 2. EXERCISES 3. TASKS 4. REFLECTION   INSTRUCTIONS    EXERCISES  WEEK 5 - BOUNCING BALL ANIMATION In Week 5, we learned how to create a simple bouncing ball animation using Adobe Animate. The first step was to draw the ball using the  Oval Tool  and turn it into a  symbol . After that, we used the  Pencil Tool  to draw a curved path showing how the ball would bounce. Next, we added  keyframes  at the starting and ending points of the path. Then, we applied a  motion tween  so the ball would follow the path smoothly. To make the animation more realistic, we slightly adjusted the  speed and motion  using easing. This exercise helped me understand how keyframes an...
Read more