WEBSITE FUNDAMENTALSThe Art of Typography

THE ART OF TYPOGRAPHYIntroduction

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.

THE ART OF TYPOGRAPHYWhat is a Font?

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.

THE ART OF TYPOGRAPHYJust add Structure

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.

THE ART OF TYPOGRAPHYThe Bold and the Beautiful

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.

THE ART OF TYPOGRAPHYTypes of Typeface

TYPES OF TYPEFACE

There are thousands of typefaces available to it helps to put them into categories: Serif Sans-serif Graphic Monospaced

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.

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.

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.

THE ART OF TYPOGRAPHYFonts on the Web

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.

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.

FONTS ON THE WEB

This can be frustrating, but for the time being it’s something web designers have to live with.

THE ART OF TYPOGRAPHYSo what can you do?

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.

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.

THE ART OF TYPOGRAPHYCan you read it?

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:

CAN YOU READ IT?

Size: 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.

CAN YOU READ IT?

Contrast: 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.

CAN YOU READ IT?

Leading: 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.