Typography by Inderpreet

“I love typography.”

http://www.slideshare.net/okayinder/typography-16662181

First slide: bad typography. “I can read it but I may not want to read it.”

Jason Santa Maria: a font geek. typography guru.

What is typography?

The design, placement of text in web, graphic design.

Two types of text:

  1. Edible (like gndec websites, marquees; we have to read)

  2. Delicious (we like to read)

In south asia countries, there is third type: “dhakka edible” like government websites.

Watch Movie: The Lion King

Typography is just like classical music of Web Design.

A normal person that didn’t know about classical music, wouldn’t like it much. Same is the case for typography.

Why type matters?

  • Off all web, 90% is in text. Rest are images and all.
  • Text size is much lesser than image size.

If user experience is not good then design is not good. But if your type is bad, the design fails.

“TEXT is voice of web.”

Content

  • typeface (font) good or bad?
  • Reading and perception
  • How to look at typeface
  • Choosing a typeface
  • basic terms.

How to look at type?

Is some text makes it hard to read?

display faces: fonts that are looking beautiful but don’t read good. Only to be used for titles. Text faces: paragraphs; they have to look normal.

How we read?

Saccade & Fixations

We read by taking jumps. We don’t read full characters. One can control reading by changing typography.

Important things:

Contrast

The gap between notes in classical music is more important than the notes itself. Similar is the case for typography. They only come up good if contrast is good.

There are 3 types:

  • size: Big small smaller; according to the importance
  • color: black on white is more good than white on black (causes eye strain).

Align

  • Left and right align: there should be not much ragging on the respective edges. It should look like like a box. Justified text can also make text look like a box but it would create rivers (blank vertical space areas between the lines).
  • Center align: ragging is on both sides. but when we do center align, we need ragging in that case.

Typescale

There is golden section ratio. 1: 1.61803398875

Suppose Font size: 10

ratio: 1.5

Margins will be of 10 x 1.5 size.