typography and grids
DESCRIPTION
The basics of using Typography and GridsTRANSCRIPT
![Page 1: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/1.jpg)
Visual Design
![Page 2: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/2.jpg)
Typography
Dreamweaver gives a limited choice.
Use Arial, if they haven’t got Arial, use Helvetica, if they haven’t got either, use a sans-serif font.
![Page 3: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/3.jpg)
Typography
SSerif fonts (a serif is the little tags on the letters.)
Are tagged because it was found that when reading from paper, the tags help the eye to perceive the type.
SSans serif fonts (Sans is french for
without).Are considered easier to read on screen.
![Page 4: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/4.jpg)
Typography
Dancebase have got around the problem of limited typefaces by making jpeg images of the typeface in logos and their banner.
The rest of their type is font-family: Verdana, Arial, Helvetica, sans-serif.
![Page 5: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/5.jpg)
Too Much
TypographyThe art of good typography is about
subtlety. You can make a value judgement based on typography, use of colour and the look and feel.
On the next slide are two websites from two different banks. Which one does the Queen bank with? How can you tell just from the look of the site?
![Page 6: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/6.jpg)
![Page 7: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/7.jpg)
Typography tells its own story
![Page 8: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/8.jpg)
Typography tells its own story
![Page 9: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/9.jpg)
Typography tells its own story
![Page 10: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/10.jpg)
Visual Language
Your visual design needs to match your site objectives. Very often a site objective is to communicate brand identity.
Your whole site needs to reflect brand values.
![Page 11: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/11.jpg)
Grids
Designing with grids has become very fashionable. The first principle to understand is the rule of thirds.
![Page 12: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/12.jpg)
Rule of Thirds
![Page 13: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/13.jpg)
Splitting a page.
images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
![Page 14: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/14.jpg)
Splitting a page.
images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
![Page 15: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/15.jpg)
Splitting a page.
images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
![Page 16: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/16.jpg)
Splitting a page.
images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
![Page 17: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/17.jpg)
Splitting a page.
images from http://www.markboulton.co.uk/journal/comments/five_simple_steps_to_designing_grid_systems_part_1/
Adding gutters helps stop text running into each other .
Elements can then be designed to complement the grid structure.
![Page 18: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/18.jpg)
Splitting a page
![Page 19: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/19.jpg)
Splitting a page
![Page 20: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/20.jpg)
Splitting a page
![Page 21: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/21.jpg)
Splitting a page
![Page 22: Typography and grids](https://reader033.vdocuments.net/reader033/viewer/2022042613/54c80e404a7959f55d8b457d/html5/thumbnails/22.jpg)
Breaking the grid.