_ the design universal principles typography, grids & golden section
DESCRIPTION
Module 1: Introduction to digital media:. _ The design universal principles Typography, Grids & Golden section. Sami Niemelä | [email protected]. Module 1: Introduction to digital media. What is typography?. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/1.jpg)
_
The design universal principlesTypography, Grids & Golden section
Module 1: Introduction to digital media:
Sami Niemelä | [email protected]
![Page 2: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/2.jpg)
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]
![Page 3: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/3.jpg)
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]
![Page 4: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/4.jpg)
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
Different typefaces have different character which adds to the message
![Page 5: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/5.jpg)
Associating meaning with type
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
| Diploma
| Bauhaus
| Furby regular
The first impression is important
![Page 6: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/6.jpg)
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
![Page 7: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/7.jpg)
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
![Page 8: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/8.jpg)
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
![Page 9: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/9.jpg)
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”
![Page 10: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/10.jpg)
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
![Page 11: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/11.jpg)
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.
![Page 12: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/12.jpg)
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.
![Page 13: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/13.jpg)
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
![Page 14: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/14.jpg)
_
Good typography in web design
Module 1: Introduction to digital media:
Sami Niemelä | [email protected]
![Page 15: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/15.jpg)
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]
![Page 16: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/16.jpg)
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]
![Page 17: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/17.jpg)
Good typography on web designSolutions?
Pixel fonts
Gif imagesFlash
SVG
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
![Page 19: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/19.jpg)
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]
![Page 22: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/22.jpg)
Sami Niemelä | [email protected]
![Page 23: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/23.jpg)
Sami Niemelä | [email protected]
![Page 25: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/25.jpg)
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...
![Page 26: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/26.jpg)
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
![Page 27: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/27.jpg)
Golden section: architecture
Module 1: Introduction to digital media
Sami Niemelä | [email protected]
![Page 29: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/29.jpg)
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome
![Page 30: _ The design universal principles Typography, Grids & Golden section](https://reader036.vdocuments.site/reader036/viewer/2022070415/56814f31550346895dbcc24e/html5/thumbnails/30.jpg)
Golden section: art
Module 1: Introduction to digital media
Sami Niemelä | [email protected]'s unfinished canvas Saint Jerome