typography
Download
Skip this Video
Download Presentation
Typography

Loading in 2 Seconds...

play fullscreen
1 / 21

Typography - PowerPoint PPT Presentation


  • 297 Views
  • Uploaded on

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.

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

PowerPoint Slideshow about 'Typography ' - emily


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

Typography

You only notice typography if it’s wrong

what is it
What is it?
  • Communicating with the printed word
  • Good typography will inform and be beautiful
slide4

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

Oldstyle

Based on hand lettering. Always has SERIFS.

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

slide6

Modern

Vertical stress, cold & elegant. Always has SERIFS.

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

slide7

Slab Serif

Sometimes called ‘Egyptian’. Always has SERIFS.

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

slide8

Sans Serif

Based on hand lettering. Never has SERIFS.

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

slide11

Script

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

Also available as unconnected and traditional calligraphic styles

slide12

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
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
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
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
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
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

kerning
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

ad