typography and online communication

Are we in a Visual Age?

What is Visual Age?

User have come to expect – or derive dual information from type selected & the choice of words

Words represent more than one meaning

Connotative

Literary

Visual

Fonts define Theme & Mood

Type design

Arranging Type

Typography

Glyph

Know the Universal Truths

•White on black is easier on the eye than black on white

•Serif fonts are easier to read

•Sentence in upper case are difficult than sentence case

•Variation of font type, size and color makes it complex

Have your own list of universal truth?

Understanding Fonts

What is san-serif about this font?

What is serif about this font?

Vector Font: Fonts that contain instructions for building outlines from lines and curves which are filled to create the solid shapes of letters and other glyphs.Can be scaled to virtually any size and still retain smooth edges. Vector formats include TrueType and PostScript Type1 fonts.

Bitmap Font: Bitmap fonts contain bitmaps of fonts in them. This a picture of the font at a specific size that has been optimized to look good at that size. It cannot be scaled bigger without making it look horrendously ugly.

Size are usually mentioned.

Post Script Type 1

Open Type

Font Type No of files req File extension Note

.pfb - Font file

.pfm - Metric file

.otf - PostScript outlines

.ttf - TrueType outlines

2

1

Both .pfb and .pfm must have the same base name. Windows will automatically create the .pfm if a pair of .afm and .inf files with the same base name are used to install the .pfb.

Post Script Type 3

Vector / Bitmap

True Type .ttf 1 Vector

Bitmap2 .pf3

Vector

Vector

KerningTrackingLine spacingAlignment HierarchyAnti-AliasingGlyphs

glyph names or kerning data - metadata

OpenType fonts may contain more than 65,000 glyphs. An italic 'a' and a roman 'a' are two different glyphs representing the same underlying character.

Kerning is used primarily to fit capital letters, such as T, V, W, and Y,

closer to some other capital letters on either side (especially A)

Web-Typography

Style guide

Personalization

Font availability

Screen resolution

Anti-aliasing available or switched on

Additive vis-à-vis subtractive – eye strain

Can you control these factors?

• Use fonts which are large compared to more traditional typefaces at same point size

• Alternately use one serif & san-serif font on a page

• Identify consumption pattern Print v/s Web

• Use font from one typographic family

•12px for serif and 14 px for san-serif

• Exaggerated x-heights

How are youfeeling?

I am feeling _

I am feeling --

I am feeling¯

Brevity brings more focus

Typography in banners

Space Text

Animation

Image

Factors at play

Which factor?

Web 2.0

Is this the beginning?

Nazim Iqbalnazim.iqbal@gmail.com