Assignment 4_3: Typography_Text, Lines, and Shapes

Start with one of the compositions from the last assignment (4-2). Together we will decide which composition to proceed with. The goal of this next assignment is to continue to shift or reinforce the already established visual hierarchy. For example, shapes can be used to separate the information (head, subhead, intro, body copy, footnote). You create those shapes (rectangles) by filling in the div elements with black. Shapes can also drastically shift the balance and activity of the page. You may change the text to white for black backgrounds.

Fixed: Use existing composition, type should not be moved, lines may be edited out but not added.
Variables: Shape size, position and placement
Goal: Reinforce visual hierarchy with shape, shift balance/activity, or shift hierarchy
Task: The main design question is, how many ways can I change my primary composition? Create 5 compositions.

Due: Tuesday, October 25

Example

Tip

You may need to turn a black paragraph to white text. Below are two examples how this can be achieved.

1. In the HTML you can give the body element classes and write the CSS rules accordingly in order to re-use previous rules but overwrite certain declarations if they need to change (black text turns to white here). The "comp-4-3 declaration "color: white;" overwrites the declaration in 4-1 ("color: black" ).

HTML code: CSS code:

Or you write a new rule in the CSS for the white paragraph (including all other declarations) and apply the matching class name to the HTML.

HTML code: CSS code: