_
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
Sami Niemelä | [email protected]
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
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Different typefaces have different character which adds to the message
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
| Diploma
| Bauhaus
| Furby regular
The first impression is important
How type works?
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
•Type communicates visually with curves, corners, variation, visual balance etc
•Anatomy of a letterhttp://counterspace.motivo.com
How type works?
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
• 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?
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
• This is text written with a serif typeface
• This is text written with a serif typeface
Serif & sans-serif?
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
• serif : A stroke added usually to the beginning or the end of a letter
• sans: ”without”
A small glossary of typographic terms
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Letterspacing
unnevenly spaced letters can disrupt our ability to distiguish words
A small glossary of typographic terms
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Line-height (leading)
can have great impact on legibility of text passages.
A small glossary of typographic terms
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
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.
A small glossary of typographic terms
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
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
Module 1: Introduction to digital media:
Sami Niemelä | [email protected]
Good typography on web design
• The biggest problem for good online typography is the screen resolution
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Good typography on web design
• With html we only have limited array of typefaces available
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Good typography on web designSolutions?
Pixel fonts
Gif imagesFlash
SVG
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
What are grids?
Grid is a graphic design tool for aligning the content whithin each other
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Sami Niemelä | [email protected]
Sami Niemelä | [email protected]
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):
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
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
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
http://www.textism.com/bucket/fib.html
http://www.textism.com/bucket/fibsquare.html
8
13
Golden section: architecture
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome