day01 designpinciples

The Design Universal PrinciplesTypography, Grids & Golden section

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.

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 typeDifferent typefaces have different character which adds to the message

Associating meaning with type

Module 1: Introduction to digital media

| 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://www.counterspace.us/typography/

http://www.counterspace.us/typography/

http://www.counterspace.us/typography/

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



Sami Niemelä | [email protected]

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


_

Grid Systems

Module 1: Introduction to digital media:

What are grids?

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


BBCi


_

Golden section

Module 1: Introduction to digital media:


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 AKA…Rule of Thirds


Seurat

Golden section: art


SeuratLeonardo's unfinished canvas Saint Jerome

day01 designpinciples

Education

digital mediabbci

digital mediaassociating

digital mediawhat

digital media serif

digital media good typography

digital mediahow type

sansserif sansserifs

greatlysami niemel