Modular Grid & Hierarchy

VISC 202

VISC 414 ↩

↪ VISC 302

Modular Grid + Hierarchy

In this project, you will learn to see typography in two ways:

as visual elements in a two- dimensional composition
as information that represents hierarchical organization. Emphasis will be on establishing a clear visual hierarchy and exploring compositions closely adhering to a given modular grid.

Analyze the given text. You will be asked to classify it into three levels of informational importance; dominate, sub-dominate, and subordinate. Your compositions will simplify and clarify the information, encouraging the viewer to read the information in a logical and pre-determined order.

You will create a series of typographic compositions that closely adhere to a traditional grid form (a straightforward composition that stresses organization and legibility). Use a clear vertical/horizontal structure in the organization of the information. Do not orientate the type at an angle, running vertically, or into any shape or form.

Learning Objectives

explore visual elements in a two-dimensional composition
explore hierarchy and how to enhance it through typographic color, color, and rules (line)
understand how to use a modular grid
understand Swiss Design and its place in design history
InDesign basics

Explore Design Principles

Tension: how the page is used, how the edges are used, activate the page
Grouping: how things are grouped together, use triangulation as a guide.
Alignments: vertical, horizontal (type must stay horizontal)
Coding: type that is the same size and style will be read together

Hierarchy
You will be asked to classify the text into three levels of informational importance/hierarchy; Primary, Secondary, and Tertiary. Your compositions will simplify and clarify the information, encouraging the viewer to read the information in a logical and predetermined order.

There are a variety of ways you can create a sense of hierarchy. Many of these will also affect the typographic color.

Here are some of the most common techniques

Placement: Where text is located on the canvas can also establish hierarchy. Typically you read from top to bottom, left to right, but this can be changed by employing some of the techniques above.
Size: It almost goes without saying, but the bigger the type, the quicker the eye will be drawn to it. Type sizing should correlate to the order of importance in reading the text.
Weight: The thickness of letters can make text look larger (bold, thick strokes) or smaller (thin or compressed typefaces).*
Tracking: Adjusting the overall spacing of a group of letters is called tracking or letter spacing.*
Capital and lowercase letters: Capital letters will appear larger and come to the forefront while lowercase letters appear smaller and often fall into the background. (Be wary of use for text/ body copy).*
Bold: Bold lettering is a good point of emphasis for a single word or phrase. It works especially well in the tertiary level of type.*
Italics: Italic lettering can highlight a single word or phrase in a less dramatic and more subtle way than bolding. It works especially well in the tertiary level of type.*
Color: Changing the text from black to a color.
Typographic color: Refers to the space between letters, words, and lines of text as well as the weight of the font. Leading, and tracking among other things help control typographic color and can be used to control the hierarchy of your text. When text gets too dense (has too much color) it becomes harder to read.

Dates/Timing
It is your responsibility to have everything asked of you ready before class begins. The process is 50% of your grade. You can't pass the project or the course if you don't come prepared for every class.

Also, if you have prints in the print lab when class begins, you will be counted LATE (three tardies = one absence). Remember, there are 40 of you, and you can't all print at the same time, coming in 15 minutes before class to print will get you into trouble.

Deliverables
More directions will be given closer to the due date.

Packaged InDesign File of final 8 compositions.
*Make sure you are locking to the baseline grid, using the grid correctly, using style sheets.
Behance Post: finals posted, process optional
Process Book: spiral bound*
*Keep all your handouts, lecture notes, class work, homework, + research. If you do a title page, as asked, for every project, you will be prepared for your process book. You are printing all your homework, so all you have to do is keep it all and keep it organized and then spiral bind it together.

Text for the project.
Analyze the given text...

My Way to Typography
Retrospective in Ten Sections
Wolfgang Weingart
1941 – 2021

Weingart was most influential as a teacher and a design philosopher. He began teaching at the Basel School of Design, where Armin Hofman appointed him an instructor of typography in 1963. He also taught for the Yale University Summer Design Program in Brissago. Throughout his career, he traveled and lectured throughout Europe, the Americas, Asia, and Australia.

He taught a new approach to typography that influenced the development of New Wave, Deconstruction, and much of graphic design in the 1990s. While he would contest that what he taught was also Swiss Typography, since it developed naturally out of Switzerland, the style of typography that came from his students led to a new generation of designers that approached most designs in an entirely different manner than traditional Swiss typography.

Modular Grid

You will be using InDesign for this project. Please use InDesign (even if you know Illustrator or Photoshop better). This is an intro to InDesign project. Now is the time to learn it. If you need more help with the software, please let me know.

Please use the file provided. It is set up correctly for you to use.

Page Size: 6 x 9in. Single pages in InDesign. Not spreads
Margins: .25 inch
Column: 5-column grid
Horizontal lines: 7

Ask yourself...

How does where you put text on the page affect what we see first?
How does bold type affect what we read first?
How does size affect what we read first?
What about tracking?