1. Exploring Web Design Chapter 3 Web Typography

3. The goal of any web page is to communicate.

4. What is Typography? Typography is the manipulation of text on the page. Through typography we can better convey that which we are trying to communicate.

5. Why is Typography Important? Font refers to the style of printing letters, numbers and characters. Choice of font, in addition to color, helps set the tone of a page. –Is the site friendly, fun or cool (1) (2) (3)?fun123 –Is the site professional, radical or edgy? –Is the site dark, grungy or gothic?grungygothic

6. Ten Basic Fonts

7. Font Choices (1) Viewers only see the fonts they have installed on their machines. If you use a font they don’t have, the font reverts to one they have. This means THEY WON’T SEE YOUR COOL FONT!! Ex: You see this: They see this: AGENT ORANGE

8. Font Choices (2) Dark Grey on Black Background Avoid these for the color blind: –Yellow on green –Green on red –Red on green –Blue on red –Red on blue –Red on black Tactics: use a contrasting outline around text

9. Font Choices (3) Make use of size and contrast The goal (most often) is readability Don’t make your page a chore to read

10. Typography Terminology Font: refers to styles of text Arial Times New Roman

12. Typography Terminology (2) Font Family: groups or variations of a single style of font. Also called styles.

13. Typography Terminology (3) X-Height: the height of a lowercase x. –Sets the standard height for lowercase letters.

14. Typography Terminology (4) Baseline: the line that the base, or the bottom, of the letters are aligned to.

15. Typography Terminology (5) Baseline shift: setting your text below the baseline.

16. Typography Terminology (6) Ascender: parts of the font that extend above the x-height line.

17. Typography Terminology (7) Leading: the vertical space between two lines of type.

18. Typography Terminology (8) Kerning: the spacing between individual letters.

19. Typography Terminology (9) Tracking: the spacing between all letters.

20. Typography Terminology (10) Scale: changes the height / width of text

21. Typography Terminology (11) Serif: those little tails and hooks!! I call them “fonts with feet!”

22. Typography Terminology (12) Sans Serif: sans = without. Therefore, these are fonts without feet (serif strokes). Sans Serif

23. Yeah, so what!?! HTML / XHTML does not allow you to set: –Kerning –Tracking –Scaling –Leading –Font relative to baseline So why do you need to know these terms?

24. Why Know Typography? You can apply these concepts to graphics. You can also apply shadows, glows, bevels, etc. You can use Cascading Style Sheets (CSS) to set baseline, leading and tracking as well as set the spacing between words.