Your SlideShare is downloading. ×
The Art Of Typography
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


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