_ The design universal principles Typography, Grids & Golden section

_

The design universal principlesTypography, Grids & Golden section

Module 1: Introduction to digital media:

Sami Niemelä | [email protected]

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

http://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

• 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

SVG



_

Grid Systems



What are grids?

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



BBCi



BBCi





_

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):



B C

A

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

8

13

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

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

Golden section: architecture



Golden section:art



Golden section: art


Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome

Golden section: art


Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome



FIN

Documents

_ The design universal principles Typography, Grids & Golden section