The Art Of Typography


Published on

Published in: Design, Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

The Art Of Typography

  1. 1. Website Fundamentals<br />The Art of Typography<br />
  2. 2. The Art of Typography<br />Introduction<br />
  3. 3. Introduction<br />We use words because they mean something to us.<br />However, it’s not just the dictionary definition of a word that affects our understanding of it.<br />The shape of the letters and the relationship between them also influences the way we interpret words.<br />
  4. 4. The Art of Typography<br />What is a Font?<br />
  5. 5. What is a Font?<br />When most people use the word “font” they actually mean “typeface”.<br />A typeface is a design for the alphabet, numbers and punctuation marks.<br />Typefaces come in different sizes (11pt, 8pt) and varieties (bold, italic).<br />A font is the name for a specific use of a typeface.<br />Arial is a typeface and Arial Bold 9pt is a font.<br />
  6. 6. The Art of Typography<br />Just add Structure<br />
  7. 7. Just add structure<br />Good typography should look attractive, but it should also help the reader to use the words on your page.<br />Typography can add structure to your web page, helping the reader navigate it.<br />
  8. 8. The Art of Typography<br />The Bold and the Beautiful<br />
  9. 9. The Bold and the Beautiful<br />One of the most obvious ways you can draw attention to certain words is to make them bold.<br />As they’re heavier and darker than ordinary type, the reader’s eye will be drawn towards bold words.<br />Italics also draw attention to words, but they can subtly change the way they’re interpreted, so you should use them sparingly.<br />You should also use italics for certain names and titles.<br />
  10. 10. The Art of Typography<br />Types of Typeface<br />
  11. 11. Types of Typeface<br />There are thousands of typefaces available to it helps to put them into categories:<br />Serif<br />Sans-serif<br />Graphic<br />Monospaced<br />
  12. 12. Types of Typeface<br />As well as choosing which typefaces to use on your site, you need to decide how to use them.<br />As a designer, you can control the size of the letters you use, their position on the page and the distance between them.<br />How you control these relationships will affect how well your site’s message comes across and, ultimately, how successful it is.<br />
  13. 13. Types of Typeface<br />The relationship between words and letters is less obvious than the size and typeface used, but it’s just as important.<br />Altering the space between letters lies and words can improve their impact and legibility.<br />Changing the space between individual letters is called kerning.<br />Use it in headings to reduce ugly gaps between letters.<br />
  14. 14. Types of Typeface<br />Changing the space between every letter is called tracking.<br />Changing the space between lines is called leading.<br />Extra space can make the text easier to read.<br />In fact, legibility is one of the most important functions of typography.<br />After all, words aren’t much use if we can’t read them.<br />
  15. 15. The Art of Typography<br />Fonts on the Web<br />
  16. 16. Fonts on the Web<br />The web was originally created by scientists to share physics papers.<br />Worthwhile as this was, unfortunately, it means HTML wasn’t created with typographers in mind.<br />
  17. 17. Fonts on the Web<br />Graphic designers and typographers are used to having lots of control over type, but HTML doesn’t give you nearly as many options as you’d have with even a simple word processor.<br />You can’t fit text to a curve, position type precisely or add drop shadows.<br />In fact, you can’t even choose the exact font to use.<br />
  18. 18. Fonts on the Web<br />This can be frustrating, but for the time being it’s something web designers have to live with.<br />
  19. 19. The Art of Typography<br />So what can you do?<br />
  20. 20. So what can you do?<br />Well, using CSS you can control the size, colour and position of text on the page and the spacing between letters and lines.<br />
  21. 21. So what can you do?<br />You can also specify the typeface to use.<br />However, because you don’t actually send the font with the HTML page, the visitor needs to have the font installed on their computer, if it’s to appear as you originally intended.<br />In practice, this means you’ve only got a few fonts to choose from: Times New Roman / Times, Arial / Helvetica, Verdana, Trebuchet, Georgia and Courier.<br />
  22. 22. The Art of Typography<br />Can you read it?<br />
  23. 23. Can you read it?<br />While it’s important for text to look attractive, it’s vital that people can read it easily.<br />There are several things you can do to improve the legibility of the text on your page:<br />
  24. 24. Can you read it?<br />Size:<br />Make sure the text is large enough for your target audience to read.<br />If your site is aimed at people the text will need to be larger than if its aimed at teenagers.<br />
  25. 25. Can you read it?<br />Contrast:<br />Red text on a black background is hard to see, if you want people to read what you’ve written then don’t use it.<br />Dark text on a light background is easiest for most people to read.<br />
  26. 26. Can you read it?<br />Leading:<br />Increasing the space between lines (or leading) slightly can improve the legibility of your text.<br />It’s very easy to set the leading using CSS.<br />