Typography 1

December 16, 2009


Note: This is in the process of being transferred from an earlier version in word and still needs a bit of work to finish

Typography

Introduction

Typography is traditionally defined as the “Art of printing” or “Style or appearance of printed matter”.

However, as visual technologies have progressed, an increasing amount of material is being published electronically with the result that we tend to read more from electronic displays.

Good typographic design is just as important for a web page as it is for, say, a newspaper, or any other medium.  It should still be easy to read and pleasing to the eye regardless of whether it appears on a computer screen or piece of paper.

The designer has to adapt their design concepts to suit the medium being used.

Lets look at a simple example in terms of the different letter spacing needed for a headline in a poster and a magazine to be readable.

We tend to read magazines straight on and at arms length so the letter spacing can be fairly tight but still be readable.  Posters, on the other hand, may often be viewed at an angle, this can tend to distort our view of the text.  In this case a designer will need to ensure that the letter spacing is enough to be able to identify individual characters and hence the words.

Each medium presents its own set of issues and challenges to the designer, and the web, or computer screens in general, present their own set of problems to be solved.

One of the main challenges facing the web page designer is dealing with different computer platforms and screen sizes.

Whilst any browser will take a block of text and display it on a screen, the designer has no guarantee of how it will look on the end users machine as it’s configuration can affect how a page looks.

For example the designer may specify a particular font such as Verdana which may not be loaded on that machine and so the text for that page could be displayed using a default font such as Courier.

Again the page layout may be designed for an 800 by 600 pixel screen resolution and distortions may result when the page is viewed at 1024 by 768 pixels.

It is stated that the “twin tests” of type are legibility and attractiveness.

What does this mean?

Type is used to convey a message.  If that message is to be effective then it must be legible.

In order to deliver a message effectively to an audience they must be able to read it!

The typeface used should therefore encourage reading by being both attractive and appropriate.

How is this done?

There are a number of considerations when choosing what type to use for a project.

One of the most important decisions the designer has to make is what typeface to use.

What is a typeface?

A good description is ‘the clothes that letters wear’

There are two main families of type – serif and sans serif faces

The best known serif typeface is probably Times – serifs are the little twiddly bits at the ends of the letters (although each of these does have a proper name).  The serifs help the eye scan along a line and improve the readability of the type.

As you may know Times was invented for the Times news paper, which contains a lot of quite small type on each page.

One of the generally accepted rules of print is that serif typefaces are better for “body text” – that is the main bulk of text on a page, set at 12 points or less (don’t worry if you do not understand this we’ll look at point sizes later).

However, for text that is to be displayed on a screen, the resolution can distort the serifs, making the type harder to read at small sizes, so for SCREEN DISPLAY sans serifed type is normally a better choice for small point sizes.

Helvetica is an example of a sans serif face.

The letters are very plain (often nearly the same thickness throughout) with no extra embellishments.

This makes the text easy to resolve and read on screen.

The rules are therefore reversed when you are designing for a screen.

Hence sans serif type is recommended for body text on screen but for headings in hardcopy print.

Remember that like any other area of design, once you know the rules and how to apply them you are also able to break the rules to achieve a specific effect.

Activity

Look at the following typefaces (which are all 22 point) and decide whether they are serif or sans serif faces.

Courier

Arial

Bookman

Ocra

Garamond

Calisto

Verdana

Impact

Serif and sans serif is the simplest division of typefaces

They can be broken down into a number of smaller categories a few of the more common are outlined below.

Book

Sometimes easily legible fonts are known as book faces.  These are easy to read at small sizes, however, they do not enlarge as well as typefaces designed for large point sizes.  They appear thicker and clumsier.

Image – example of book face

Display

More decorative or unusual faces used for titles are known as display fonts.  They are not easy to read at small sizes and should only be used sparingly for effect to set the mood and style of a design.  Note that most custom display fonts are provided at large sizes only, and do not scale down well.

Image – example of display face

Script

Script fonts represent handwriting.  There are lots of these available.  Be careful when reversing them out of a darker background.  Like serifed typefaces the ‘tails’ may be lost as well as the delicate shapes.

Image – example of script face

As mentioned previously, the choice of typeface has a significant influence on the overall impact of your design.  In the next activity you will discover how type sub-consciously affects you when you read it.

Activity

Lets go onto the internet now and have look at an interesting site devoted to all things to do with type

This first page covers general design principles

http://www.will-harris.com/use-type.htm

Next have a look at the psychological factors involved

http://www.will-harris.com/esperfonto/

Type family

A type family is all the different versions available of a typeface and the individual attributes of each is known as the type style.

Most typefaces have two postures – roman or italic.

Although a typical word processor will have an italic option in the format menu that lets you “italicise” the face this is NOT the same as actually having the proer italic version installed on your computer.

Look at the example below that uses two sans serif typefaces that have similar letter shapes.

The first example shows them in their normal ‘roman’ style

Example 1- normal roman type

Example 2 shows the change in the first face when the italic option is chosen from the word processor format menu.

computer italic or ‘oblique’

Example 2

This should be really known as slanted or oblique text as the letters are simply reproduced at an angle.

In example 3 the face is, in fact, a separate italic version of the typeface in which some of the letters are actually different.

Example 3 – proper italic

Note how the  ‘a’ has changed shape completely in the first example.

This is known as single storey whereas the ‘a’ shape is known as two storey.

Type also comes in different weights which include book, ultra, bold, black, condensed etc.

Again this is not the same as clicking the ‘bold’ command on the computer.

Arial – Arial Black – Arial Rounded MT Bold – Arial Narrow

Example 4

Type size

This is measured in points.

1 point = 1/72 inch, so 72 point text should be 1 inch high (see later for why this is’nt exactly true).

12 points = 1 pica which is a measure used for line lengths.

Therefore there are 6 picas in an inch.

Note

In most sophisticated programs the ruler display can be set to not only cm or inches but also to points and picas allowing accurate measurement and layout of type.

The point measure is based on the top of an ‘ascender’ to bottom of a ‘descender’  i.e. from the top of an ’l’ to the bottom of a ‘p’.

This system of measurement means that different typefaces can look very different (in size) on the page despite actually being the same point size.  It is important to pick a point size for the specific typeface and not stick to the conventions i.e. 12 point type may not be appropriate for the body text (This will be explained further in the next section on anatomy of type)

Obviously the larger the point size the more emphasis is placed on that particular text.

Note

Sometimes larger text can be more difficult to read and other factors must also be considered, such as leading (more on this later).

Fonts

Although the word font is generally used interchangeably with typeface the two words actually have different meanings.

A typeface, as we have already seen, includes many point sizes and type styles in its family.

A font is a SINGLE point size and style of a typeface

Activity

Decide whether the descriptions below are typefaces or fonts

Times New Roman

Times italic 14pt

Helvetica Black 18pt

Helvetica Bold

Gill Sans

Type Case

Upper case letters are known more commonly as capitals, whilst ‘ordinary’ letters are known as lower case.

Research has shown that capitals are harder to read and should be restricted to headings or short lines of text only.

It is also considered rude to use capitals for electronic body text as this is considered to be ‘shouting’ at the recipient.

Activity

Now we are going to do a little library research.

Use one or more of the following references to help you answer the questions and complete the diagrams below.

Note that both the typefaces are reproduced at the same point size – 72pt.

References

Vaughan, T. (2001) Multimedia. Making it work. London: Osbourne. P152.

Dick, D. (2000). PC Multimedia Handbook. Technology and Techniques.  Glasgow: Drumbreck Publishing. P118.

If you cannot make it to a library you can try the about.com website.

http://desktoppub.about.com/cs/typeanatomy/

Note that not all sources recognise a difference between a ‘bowl’ and a ‘counter’.

You can search the web until you find a reference that does.

Typography

Mark the baseline……………………………………………………………………………………………………….

Mark the point size of the type…………………………………………………………………………………..

Mark the x-height of the type and measure it…………………………………………………………..

Which letters have ascenders?  Mark them on the type……………………………………………

Which letters have descenders?  Mark them on the type…………………………………………

What are counters?  Mark one letter………………………………………………………………………….

…………………………………………………………………………………………………………………………………….

What are bowls?  Mark them on two different letters………………………………………………

…………………………………………………………………………………………………………………….……………

Typography

Mark the point size of the type…………………………………………………………………………………..

Mark the x-height of the type and measure it…………………………………………………………..

Why is the x-height different between the two typefaces?………………………………………

…………………………………………………………………………………………………………………………………….

How does this affect the appearance of the text set in the two typefaces?…………….

…………………………………………………………………………………………………………………………………….

When choosing between similar typefaces the x-height is often the deciding factor.

In display type the x-height can be smaller giving the text a more elegant feel.

Type that has a large x-height is useful for the body text on a screen display as this can make type more legible without the need for increasing the point size (which would also increase the line length or number of lines required).

Leading

This is the vertical space between lines of text.

Typewriters and early printing presses were often restricted to single line spacing or sometimes 1 1/2 line spacing (equivalent to 100%, 200% and 150% leading respectively)

Nowadays computer software can specify leading in mm, points or as a percentage of the point size of the type used.

Too little leading makes the type look cramped.

Too much leading can be difficult to read as the eye does not link one end of one line with the beginning of the next.

The amount of leading required is governed by your choice of face, typesize and the effect you wish to achieve.

It is worth experiment to get the effect you want.

Note that smaller type with more leading can often be easier to read than larger type with smaller leading that is squashed into the same space, it can certainly make it look more elegant.

Remember to be consistent with spacing between paragraphs.  Erratic line spacing can disrupt the message.

A good rule of thumb is to decrease the line spacing to connect lines and expand it to separate units of information.

Also note that white space is used to draw attention and also to separate  and link objects.

If a heading or sub-heading has too much leading below it, it will appear separated from the text it relates to.

Spacing

Another division of typefaces can be between those that are proportionally spaced and those that are non-proportionally spaced – sometimes refered to as evenly or monospaced.

An example of a non-proportionally spaced typeface is courier.

Note how each of the letters takes up the same amount of space, even the ‘i’

Now take a look at the word courier written in the Arial typeface.  This is a non-proportional typeface.  Note how much shorter the word is as letters like ‘i’ take up less space.

Although proprtionally spaced typefaces used to be the norm (many people still associate courier with typewriter text) they are now mostly used for effect, where the letter spacing contributes to that effect and is usually left unaltered.

Usaully, though, it isimportant to consider the letter and word spacing in a design and alter it where necessary.

Manual letter and word spacing can become quite complex and is generally reserved for ‘headings’ and ‘titles’, leaving the computer software package to deal with spacing the body text which can be a lot of work.

To make a word appear as a complete unit in a design, it is essential that the areas of space between the letters is balanced.

Letter and word spacing can be regarded as an exercise in optical illusion.

Putting a single space after a full stop can help the readers eye flow better over the text.

Some pairs of letters are known to appear to have too much space between them and appear unbalanced when printed at either very large or very small point sizes. This space can be manually decreased or tightened in sophisticated packages by adjusting the ‘kerning‘ between the letters.  Very common letter pairs that have this problem are Ta, Wa, Vi, AW and so on.

Note that evenly adjusting the space between multiple charaters is known as tracking.

To better understand the difference between traking and kerning try the next activity.

Activity

Now go back onto the internet and have a look at the following website for more information on character spacing.

http://www.pbtweb.com/typostyl/lettersp.html

Note in particular the examples they give on the difference between tracking and kerning.

Now that you have a had a closer look at the theory its time to try a practical exercise.  For this you will need access to either the Photoshop or Freehand software packages.

Activity

Open up Photoshop and use the program help menu to learn how to kern the letter pairs given in the previous section.

Use two different fonts each at 36, 72 and 144 point sizes.

If you are lucky enough to also have Freehand (or any other similar software package) try the same exercise.

Platform differences

It is important to note that type on Macintosh and PC platforms does not always display as expected.

In fact if the other person may not have the same font installed on their computer (in this case a default font such as Times or Courier may be substituted).

When dealing with print it was standard practice to ensure that the typesetter either had the fonts that were required to output your job or you supplied them.

So beware if you intend to use some exotic font you have discovered on the internet…………not many other people may have it on their machines!

This can be a real problem with screen based layouts and can run into coyright considerations.

Most designers get around this problem either by using standard system fonts, or converting their pages to an image file.

Some programs like Adobe’s Acrobat give the option of embedding the font in the publication.  This ensures that the pages display exactly as the designer intended them to look.

PC Typefaces Macintosh equivalents
Arial Helvetica
Book Antiqua Palatino
Courier New Courier
MS Sans serif Geneva
Symbol Symbol
Times New Roman Times
WingDings Zapf Dingbats

The dramatic increase in screen based information  has led to fonts being designed specifically with the constraints of screen based display in mind.

Some of these are

Georgia

Trebuchet
Verdana
Activity

Take a look at 5 of your favourite web sites (or pick 5 at random say using searches against different topics in a search engine).

Name of website 1:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 2:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 3:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 4:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

Name of website 5:

How many different typefaces have been used on the homepage?

Is the body text serif or sans serif?

Are the headings serif or sans serif?

How has important information been highlighted?

What is the overall ‘feel’ of the page? E.g. fun, serious, formal

Think of at least one way in which you think the typography could be improved.

end

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: