The Power of Typography

LANGUAGE is mostly Spoken or Heard

TYPOGRAPHYis an art that makes Language Visible

This art form has evolved over several millennia

Cave Paintings

MedievalAges

Digital Typography

Ancient Hieroglyphics

We have come a long way from scribbling on walls to type setting on a digital canvas.

A neat type setting does not only result in an aesthetic appeal but reduces the void between man and machine.

TYPEFACE is a set of typographical

symbols and characters. This is the design

of the structure of the alphabet.

FONT is traditionally defined as a

complete character set within a typeface,

often of a particular size & style.

vs FontsTypefaces

EXAMPLE

1 2 3

1 - is a font that is average in it’s build

2 - is tall and lanky font

3 - is stout and swollen font.

Assume 1, 2, 3 are brothers that have the

same dashed attr ibute border and

comprise of the dashed triangle typeface.

To keep it simple, typeface is the creative labour involved in giving birth to a great font

that can have multiple variations. A collection of these variations forms a type-family.

Serif typefaces Sans serif typefaces Script typefaces Ornamental typefaces

BLACK - LETTER GAELIC MONO - SPACED SYMBOL EFFECT

CJK - Chinese / Japanese / Korean

Mincho typefaces Gothic typefaces Maru typefaces

TYPEFACECLASSIFICATION

ROMAN

Mimicry typefaces

An abundance of typefaces have been created over the centuries. Roman types are the most widely used typefaces today. This is the primary classification and the rabbit hole keeps getting deeper with new fonts coming up everyday.

E E E E

EE EE E E E

OTHERS

THE ANATOMY OF TYPE

IMAGE SOURCE: Martin Silvertant - Deviant Art

Mixing various styles to create more variety

Bodoni and Futura have very different

looking letterforms, but their structure

is based on the same basic geometric

principles.

Use varying weights to convey & create unity

See how different weights effect the

look and feel of the textual elements in

design. We shall come to learn sizes

soon.

5 reasons why TYPOGRAPHY is powerful

1. It attracts and holds the audience’s attention.

2. It is reader friendly.

3. It establishes an information hierarchy.

4. It helps to create harmony.

5. It creates and builds recognition.

Importance of WHITESPACE

IT MAY SEEM AS THOUGH ALL UPPERCASE OR CAPITAL LETTERS WOULD BE LIKELY TO CATCH A READER’S ATTENTION BUT IT’S LACK OF LEGIBILITY IS MORE LIKELY TO ALIENATE THAN ATTRACT.

ALL CAPS MAKES THE TEXT LOOK AS THOUGH IT WERE SCREAMING AND GENERALLY THIS IS WHAT THE USERS PERCEIVE.

• The main use of typography is to guide the users eye along your presentation.

• Our eye's span of acute focus is only about 3 inches (8 cm).

• We can see three to five words at a given point of time.

• Eyes following a long line of text, they tend to lose track of the next line.

• Magazines and Newspapers use columns to help maintain comfortable focus.

Creating Reader Friendly Type

What is LOREM IPSUM

“Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Maecenas magna sem, imperdiet non auctor ac, tempor sit

amet est. Cras ultricies elementum risus vel adipiscing.

Aliquam erat volutpat. Nullam interdum tincidunt velit. Etiam

rhoncus volutpat posuere. Suspendisse turpis lectus, varius

non risus a, scelerisque imperdiet orci. Vivamus tincidunt

mauris justo, id auctor lacus tincidunt id. Vivamus ultrices eros

sit amet diam molestie imperdiet. Nulla porttitor congue

ipsum, nec feugiat quam ullamcorper nec. Quisque euismod

id diam nec sodales.”

Lorem Ipsum has been the printing and

typesetting industry's standard since the 1500s.

It has endured five centuries and has also leapt

into electronic typesetting.

This is not random text and has roots in a piece

of classical Latin literature from 45 BC, making

it over 2000 years old.

Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

ADDITIONAL NOTES

Font - Family

Font - Size

Font - Weight

Font - Style

Font - Variant

Letter - Spacing

Word - Spacing

Line - Height

List of Typographical Properties

Text - Align

Text - Decoration

Text - Indent

Text - Transform

Text - Shadow

Vertical - Align

White - Space

Direction

Margins

STYLING FORMATTING

The most important part of the composition is

given the most prominence.

Once the viewer is hooked, supplementary

information is displayed.

Symmetric : Equally distributed on either side

of a central axis.

A modular scale is a sequence of numbers that

relate to one another in a meaningful way.

& BalanceProportion

Asymmetric : Distributed unevenly on a page

so that positive and negative space are equal.

BALANCE CAN BE ACHIEVED

SYMMETRICALLY

OR ASYMMETRICALLY

BALANCE CAN BE ACHIEVED

SYMMETRICALLY OR ASYMMETRICALLY

Sometimes it helps to think of type

as a design element that is confined

within a grid.

A Grid sets up a system of blocks

that can be arranged as elements in

a composition.

How to style, color, and size type are all dictated by the principals of design:

• Hierarchy & Dominance - the most prominent item gets VIP treatment

• Unity & Variety - this can be achieved by using varying font sizes and colours

• Balance - distribution around a central axis / by using equal +ve & -ve space

• Proportion - using modular scales to give a homogeneous feel to the type.

Proportional Systems & the Grid

Tried & Tested font combinations

Fonts that look great on MOBILE screens

■ Noticia / Serif - Typeface

■ Bariol / Rounded - Typeface

■ Gleegoo / Serif - Typeface

■ Cabin / Sans Serif - Typeface

■ Ubuntu / Sans Serif - Typeface

■ Ostrich Sans / Sans Serif - Typeface

■ Dock no. 11 / Sans Serif - Typeface

Ligatures

Tracking & Kerning

Kerning is the process of adding or subtracting space between specific pairs of characters.

Tracking is the process of loosening or tightening a block of text.

Further Reading

http://www.adobe.com/type/topics/glossary.html

http://voiceandtone.com/

http://www.adobe.com/type/browser/classifications.html

http://powerpointsymphony.com/?tag=typography

http://practicaltypography.com

http://www.creativebloq.com/typography/free-web-fonts-1131610

http://www.smashingmagazine.com/2009/11/15/20-new-high-quality-free-fonts/

THANK YOU !by,

Rohan Kartik

UI - Designer