Typography and grids

Editor's Notes

• #3: Students should be familiar by now with the limited choice they get from Dreamweaver. It is worth repeating that this is due to the fact that the type is displayed by the browser and one has to be certain that the font is in the user’s system.
• #4: There is enormous amount of work on typography and recently, Georgia and Verdana have been specifically designed for computers. Typography has a long tradition and we can only scrape the surface here.
• #5: This is quite a common work around solution. Students need to be aware of image size constraints. If they load up with too many large images, their pages will take a long time to download.
• #6: One of the easiest ways to spot amateur work is when too many different fonts are used.
• #7: Obviously it’s Coutt’s but the important thing for the students is to realise that the way these sites are designed is to appeal to their target user base. Gets students to spend some time looking at the different sites and explain what underlying messages they get from the look of the pages.
• #8: Spend some time discussing the fonts here with the class. Which is more appropriate and why? What do the different fonts communicate? Where would they be suitable. There are many free font websites as well as paid for. Ask students if they think it would be worth buying a typeface.
• #9: Ask students if they recognise this font. The roundel appears after clicking but this font, designed by Edward Johnston is a famous example of a company using a font for corporate identity. London Transport kept ownership of this font extremely seriously and would not allow any other institution to use it. Owning their own typeface allowed them to communicate identity in all of their communications.
• #10: Jamie Reid’s cover for the Sex Pistols demonstrates the power of type and how it can be effectively used to communicate a whole sub culture. You may have to discuss the wide reaching cultural effect of punk across music, art and design. Ask the students to look at http://sexpistolsofficial.com/ As a continutiy break, get them to discuss the site. Point out how polished the site looks and the amount of detail in the typography to give the impression of unpolished and thrown together look.
• #11: Discuss the monarchy website shown. The site is heavily purple, seen as a colour of royalty in Britain, discuss how the banner photograph, the large crown and the text impress the image the royal family want us to have of them.
• #12: The rule of thirds comes from photography and is relatively simple. Point out how the picture is broken into 9 sections, splitting it into distinct groupings of threes.The theory is that if points of interest is put on the intersections then the picture becomes balanced. There are more examples on the next slide.
• #13: These three pictures demonstrate the rule of thirds. Of course, understanding rules give students the tools to break them.
• #14: Here, a page of A4 is split. Af has a ratio of 1:1.414. The ratio is repeatedly used here to break the page up.
• #15: The ratio is used to split the page into a grid.
• #16: The grid can then be used to hang page elements.
• #17: We can use the grid to fix the look of our pages. This layout assumes a page width of 750 pixels.
• #18: We can use the grid to fix the look of our pages. This layout assumes a page width of 750 pixels. KhoiVinh at subtraction.com suggests making a photoshop gif image of your grid and making it the background of your image whilst designing, thereby making layout a matter of fitting to the grid.
• #19: This is the first of several examples. Point out that the page is centered and surrounded by a purple background colour. This means that the site can fix its dimensions and be reasonably certain that it will look the same on any size monitor.
• #20: This is the first of several examples. Notice that the large photo at the top breaks the visual grid, but keeps to the invisible grid.
• #21: Though this appears to be freeform, it keeps rigidly to a grid.
• #22: A box grid.
• #23: There is also the desire to break a grid. If students are tempted to do this then they need to be careful not to abuse the technique.