Typography & Design Principles

Typography

Essential Design Knowledge

Multiple Choice

Knowledge Review:

The design element that relates to shades of dark or light is called:

• space

• texture

• value

Multiple Choice

Review:

The feel or look of the surface of a design relates to the design element of:

• space

• colour

• texture

• value

Multiple Select

Review:

The element of colour is useful to:

(select which apply)

• show importance

• attract attention

• generate emotion

Multiple Select

This is an example of the element of _____.

This attracts attention and creates a focal point.

• shape

• texture

• line

Multiple Choice

The pictured is a strong example of the element of ____.

It makes certain elements appear more important.

• size

• texture

• value

Open Ended

Prior Knowledge

What is typography?

Typography refers to the art of writing

• the style and appearance of printed text

• this includes selection of font

How do you select the right font?

• An important element to all fonts are the serif or sans serif.

Open Ended

Analyse: (click the image to view larger)

What appears to be the main difference between a serif and sans serif in this example?

Serif

• In typography, serifs are the little decorations and elaborations that you see at the edges of characters in fonts

• Note the blue serifs on the right

Sans serif

• Sans serif basically applies to fonts that do not have these decorations and are known for their simple lines

• Arial and Calibri are two known examples

Multiple Choice

Checking for understanding

Serif or sans serif?

• Serif

• sans serif

Multiple Choice

Checking for understanding

Serif or sans serif?

• Serif

• sans serif

Things to consider when selecting font

Sans serif fonts work better with younger audiences

Things to consider when selecting font

Typically, serif fonts are more suitable for older audiences and appropriate for formal texts

Things to consider when choosing font

Sans serif as a more modern look,

while serif is more classical and formal.

Fill in the Blanks

Things to consider when choosing font

Fonts are useless if your audience can’t read your text. 

Some fonts look absolutely breathtaking when they’re used for just a short title, but absolutely horrible if they are used for large amount of text.

Poll

Which design looks more effective, in your opinion?

(click to enlarge)

• Design 1

• Design 2

Tracking

(letter spacing)

Try playing with letter spacing, also known as tracking. This is the space between letters in words.

Increasing your letter spacing will help your type breathe, while decreasing it will tighten your type.

Letter spacing is also a great way to make different lines of text the same width so they visually balance.

Achieving Balance

Break your text up into separate text boxes, this way you’ll be able to experiment with fonts, sizes, spacing and colours.

This way you can emphasize different elements of the text.

Placing your text

• Consider the colour of the text in relationship to the background on which they appears.

• Make sure you place your text where it can be easily read.

• Clear, open areas that are great for placing text are referred to as copy space.

• If you’re working with images that have a lot of copy space, your text will pop in these empty areas.

Multiple Choice

Checking for understanding

The font style typically most appropriate for younger audiences is:

• serif

• sans serif

Part II: The Principles of Design

The Key

Principles of Design

Principle: Repetition

Creates consistency in designs

This can be repeated font types

or visual elements

Principle: Contrast

Contrast helps elements stand out by creating difference.

This can be achieved through using different/opposite use of:

- colour

- value (light or dark)

- size

- font style

Fill in the Blanks

Principle: Movement

• movement directs and leads the viewers' eyes in a certain direction

• this is achieved through cohesive arrangement of your graphic elements

Open Ended

What repeated element creates movement in this poster?

Principle:

White Space

• intentional use of empty space will enhance the visual impact of your design

• creates breathing space

• clean

Multiple Choice

Where are most of the elements in this poster positioned?

• To the left

• In the middle

• To the right

Principle: Alignment

Alignment refers to the positioning and structure of the objects and text in the design

It increases readability

Principle: Balance

• Relates to how the design elements are arranged according to visual 'weight'

• creates a visual pattern

Principle: Proximity

• Relates to the distance between elements in your design

• Close proximity between elements shows a connection

Poll

Does this movie advertisement have good visibility?

• Yes

• No

Open Ended

How might context (where the media is being displayed) influence the designer's artmaking decisions?

Principle: Visibility

• The goal of good design is for it to be read and seen clearly by viewers

• Consider the distance viewers will read your design from

Multiple Select

What design principles are demonstrated in this example?

(click image to enlarge)

• Repetition

• Contrast

• White space

• Alignment