_ The design universal principles Typography, Grids & Golden section

transcript

The design universal principlesTypography, Grids & Golden section

Module 1: Introduction to digital media:

Sami Niemelä | sn@neocite.com

What is typography?

• Design is fundamentally about communication, and, for all the power of images, words remain at the core of how we communicate.

• Alas, Typography is the practice of visually representing words.

• Type conveys a meaning the face, size, weight, color etc.. They all add to the message.

Module 1: Introduction to digital media

What is typography?

• Remember: legibility is important AND the content is the king.

• Legibility comes from various things – spacing, letter shape, size, weight..

• Both content and presentation have direct effect on the message we convey

Associating meaning with type

Different typefaces have different character which adds to the message

Associating meaning with type

| Diploma

| Bauhaus

| Furby regular

The first impression is important

How type works?

•Type communicates visually with curves, corners, variation, visual balance etc

•Anatomy of a letterhttp://counterspace.motivo.com

How type works?

• Typefaces come in variety of styles;Old-style, Transitional, Modern, Egyptian/slab-serif, Sans-serif

• Sans-serifs can be further classified realist, geometric & humanist faces

Serif & sans-serif?

• This is text written with a serif typeface

Serif & sans-serif?

• serif : A stroke added usually to the beginning or the end of a letter

• sans: ”without”

A small glossary of typographic terms

Letterspacing

unnevenly spaced letters can disrupt our ability to distiguish words

Line-height (leading)

can have great impact on legibility of text passages.

Line length

The main issue for the reader is the disruption of having to go from the end of one line to the beginning of the next. When lines are too long this can be quite difficult because of the sheer distance the eye has to travel. On the other hand,if lines are setextremely short,the reader willhave to switchlines much more often.

X-height

Has a great impact on legibility:

Both typefaces are set on the exact same size but

the readability varies greatly

Good typography in web design

Good typography on web design

• The biggest problem for good online typography is the screen resolution

Good typography on web design

• With html we only have limited array of typefaces available

Good typography on web designSolutions?

Pixel fonts

Gif imagesFlash

Grid Systems

What are grids?

Grid is a graphic design tool for aligning the content whithin each other

Golden section

Golden sectionThe Golden Section is based on a ratio which results in phi -take a line and divide it so that the ratio of the large piece (B) to the whole line (A) is the same as the ratio as the small piece (C) to the large piece (B):

So A is 161.8% of B and B is 161.8% of C.

The golden section numbers are ±0·61803 39887... and ±1·61803 39887...

Golden section

http://www.textism.com/bucket/fib.html

http://www.textism.com/bucket/fibsquare.html

Golden section: architecture

Golden section:art

Sami Niemelä | sn@neocite.comSeurat

Golden section: art

Sami Niemelä | sn@neocite.comSeuratLeonardo's unfinished canvas Saint Jerome

Golden section: art

Sami Niemelä | sn@neocite.comSeuratLeonardo's unfinished canvas Saint Jerome

Sami Niemelä | sn@neocite.comSeurat

_ The design universal principles Typography, Grids & Golden section

Documents