1 / 21

Typography

Typography You only notice typography if it’s wrong What is it? Communicating with the printed word Good typography will inform and be beautiful Anatomy of Type Fonts There are many thousands of fonts available. They can be categorised in many ways.

emily
Download Presentation

Typography

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Typography You only notice typography if it’s wrong

  2. What is it? • Communicating with the printed word • Good typography will inform and be beautiful

  3. Anatomy of Type

  4. Fonts There are many thousands of fonts available. They can be categorised in many ways. No system of categorisation is foolproof. The one that we use is quite straightforward. OLDSTYE SCRIPT MODERN DECORATIVE SLAB SERIF SANS SERIF

  5. Oldstyle Based on hand lettering. Always has SERIFS. Lowercase serifs always at an angle. Thick and Thin parts to letters.

  6. Modern Vertical stress, cold & elegant. Always has SERIFS. serifs always thin & horizontal. Thick and Thin parts to letters.

  7. Slab Serif Sometimes called ‘Egyptian’. Always has SERIFS. Serifs are horizontal thick slabs. No thick and thin parts to letters.

  8. Sans Serif Based on hand lettering. Never has SERIFS. Often available ‘extended’ & ‘condensed’. No thick and thin parts to letters.

  9. FORMS OF A FONT: SWISS 721

  10. STANDARD – COMPRESSED - EXTENDED

  11. Script Based on hand lettering with a pen, brush, pencil or technical pen. Also available as unconnected and traditional calligraphic styles

  12. Decorative Easy to identify. If you feel that you could not read more than a few words written in this font your identification is correct. They are so distinctive that their use is limited. Often only available as uppercase and only work well when bigger than 36pts.

  13. Fonts • Each font possesses a family of typefaces which are distinguished by variances like weight, proportion and through manipulation by the designer using software or by hand. • The size of a font is measured in points – pica (0.35135mm). 12 picas equal an Em point. • Computer – used in DTP equal to 0.35277mm). • The choice of font will be decided on by the type of document to be produced, legibility, and aesthetic appearance. • The spacing between letters can help legibility and can be done in a number of ways: • Leading, Tracking, Kerning.

  14. Effects and adjustments • To make a contrast between heading and text:- • Size • Italics • Lower and upper case • Colour • Character shape and width – serif/sans serif • Character width – expanded, condensed • Position on page • Density – solid, outline, positive, negative

  15. Typographic grids Basic Grid Designing a layout begins by developing a basic grid. Think about it in terms of slicing up your page. Designate specific areas for titles, sub-headers and content. But most importantly: leave strategic areas of white space. White spaces guide the eye (and mouse) of your visitor. Detailed Layout Now that you have a basic layout grid, it is time to go in and build up your hierarchy. Start thinking about justification and the "color" of the type as you introduce different headers, subheads and so on. Don't panic, if your design begins to look corporate (or like a newspaper). That is only because there isn't any imagery. Type See how the word "Headline" stands out against the gray color of the paragraph below it? At this point, you should start thinking about this as well as how your other "text boxes" interact with each other. Specifying and adjusting your type is a fairly technical process. You can do a lot of dramatic effects by simply changing or contrasting the point size, tracking and line spacing.

  16. Captions and breakouts • Captions –assist in the explanation of photographs and images. Distinctive style and consistent throughout the document. • Position should be close to the image but separate from the body text. • Breakouts – relevant sections of text ie. Quotes that are separated and contrasted to the main body text. May be shown by a line or box, space around the quote, or distinctive font.

  17. Leading Is the space between the lines of text. Get it right and the eye skip along the line of text with ease. Get it wrong and the eye/brain has to work harder to read the text The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

  18. Tracking

  19. Kerning Kerning is where you move two letters closer together or further apart to help make it more legible (easier to read) What has been moved and why? Before After

  20. Awful typography – Why? How could it be improved?

More Related