_ the design universal principles typography, grids & golden section module 1: introduction to...
Post on 24-Dec-2015
213 Views
Preview:
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
Sami Niemelä | sn@neocite.com
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ä | sn@neocite.com
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
Different typefaces have different character which adds to the message
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
| Diploma
| Bauhaus
| Furby regular
The first impression is important
How type works?
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
•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ä | sn@neocite.com
• 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ä | sn@neocite.com
• 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ä | sn@neocite.com
• 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ä | sn@neocite.com
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ä | sn@neocite.com
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ä | sn@neocite.com
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ä | sn@neocite.com
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ä | sn@neocite.com
Good typography on web design
• The biggest problem for good online typography is the screen resolution
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
Good typography on web design
• With html we only have limited array of typefaces available
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
Good typography on web designSolutions?
Pixel fonts
Gif imagesFlash
SVG
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
What are grids?
Grid is a graphic design tool for aligning the content whithin each other
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.com
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ä | sn@neocite.com
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ä | sn@neocite.com
http://www.textism.com/bucket/fib.html
http://www.textism.com/bucket/fibsquare.html
8
13
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.comSeuratLeonardo's unfinished canvas Saint Jerome
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | sn@neocite.comSeuratLeonardo's unfinished canvas Saint Jerome
top related