Typography - PowerPoint PPT Presentation

Typography l.jpg
Download
1 / 21

Typography You only notice typography if it’s wrong What is it? Communicating with the printed word Good typography will inform and be beautiful Anatomy of Type Fonts There are many thousands of fonts available. They can be categorised in many ways.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

Download Presentation

Typography

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Typography l.jpg

Typography

You only notice typography if it’s wrong


What is it l.jpg

What is it?

  • Communicating with the printed word

  • Good typography will inform and be beautiful


Anatomy of type l.jpg

Anatomy of Type


Slide4 l.jpg

Fonts

There are many thousands of fonts available.

They can be categorised in many ways.

No system of categorisation is foolproof.

The one that we use is quite straightforward.

OLDSTYE

SCRIPT

MODERN

DECORATIVE

SLAB SERIF

SANS SERIF


Slide5 l.jpg

Oldstyle

Based on hand lettering.Always has SERIFS.

Lowercase serifs always at an angle.Thick and Thin parts to letters.


Slide6 l.jpg

Modern

Vertical stress, cold & elegant.Always has SERIFS.

serifs always thin & horizontal.Thick and Thin parts to letters.


Slide7 l.jpg

Slab Serif

Sometimes called ‘Egyptian’.Always has SERIFS.

Serifs are horizontal thick slabs.No thick and thin parts to letters.


Slide8 l.jpg

Sans Serif

Based on hand lettering. Never has SERIFS.

Often available ‘extended’ & ‘condensed’. No thick and thin parts to letters.


Slide9 l.jpg

FORMS OF A FONT: SWISS 721


Slide10 l.jpg

STANDARD – COMPRESSED - EXTENDED


Slide11 l.jpg

Script

Based on hand lettering with a pen, brush, pencil or technical pen.

Also available as unconnected and traditional calligraphic styles


Slide12 l.jpg

Decorative

Easy to identify. If you feel that you could not read more than a few

words written in this font your identification is correct.

They are so distinctive that their use is limited. Often only available as uppercase and only work well when bigger than 36pts.


Fonts l.jpg

Fonts

  • Each font possesses a family of typefaces which are distinguished by variances like weight, proportion and through manipulation by the designer using software or by hand.

  • The size of a font is measured in points – pica (0.35135mm). 12 picas equal an Em point.

  • Computer – used in DTP equal to 0.35277mm).

  • The choice of font will be decided on by the type of document to be produced, legibility, and aesthetic appearance.

  • The spacing between letters can help legibility and can be done in a number of ways:

  • Leading, Tracking, Kerning.


Effects and adjustments l.jpg

Effects and adjustments

  • To make a contrast between heading and text:-

  • Size

  • Italics

  • Lower and upper case

  • Colour

  • Character shape and width – serif/sans serif

  • Character width – expanded, condensed

  • Position on page

  • Density – solid, outline, positive, negative


Typographic grids l.jpg

Typographic grids

Basic Grid

Designing a layout begins by developing a basic grid.

Think about it in terms of slicing up your page. Designate

specific areas for titles, sub-headers and content. But

most importantly: leave strategic areas of white space. White

spaces guide the eye (and mouse) of your visitor.

Detailed Layout

Now that you have a basic layout grid, it is time to go in and build

up your hierarchy. Start thinking about justification and the "color" of

the type as you introduce different headers, subheads and so on.

Don't panic, if your design begins to look corporate (or like a

newspaper). That is only because there isn't any imagery.

Type

See how the word "Headline" stands out against the gray color of

the paragraph below it? At this point, you should start thinking

about this as well as how your other "text boxes" interact with each

other. Specifying and adjusting your type is a fairly technical

process. You can do a lot of dramatic effects by simply changing or

contrasting the point size, tracking and line spacing.


Captions and breakouts l.jpg

Captions and breakouts

  • Captions –assist in the explanation of photographs and images. Distinctive style and consistent throughout the document.

  • Position should be close to the image but separate from the body text.

  • Breakouts – relevant sections of text ie. Quotes that are separated and contrasted to the main body text. May be shown by a line or box, space around the quote, or distinctive font.


Leading l.jpg

Leading

Is the space between the lines of text. Get it right and the eye skip along the line of text with ease. Get it wrong and the eye/brain has to work harder to read the text

The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy everyday that dog jumps over. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog


Tracking l.jpg

Tracking


Kerning l.jpg

Kerning

Kerning is where you move two letters closer together or further apart to help make it more legible (easier to read)

What has been moved and why?

Before

After


Slide21 l.jpg

Awful typography – Why? How could it be improved?


  • Login