Typography

CIT 260Teaching Presentation: Typography Carol Bentley

Typography

The art and technique of arranging type in order to make language visible. -http://en.wikipedia.org/wiki/Typography

95% of information on the web is written language. It is only logical. . .that a web designer should get good training in the main discipline of shaping written information, in other words: Typography.

- Oliver Reichenstein, 2006

FONTS(Typeface)

Today the terms are pretty much interchangeable. I have searched and have settled on this explanation:

1. A font is just a subset of typeface.2. A font is the designation used for specific members of a typeface family, i.e. weight, style, size (Helvetica Light size 18). 3. A font is supposed to be of a specific size while a typeface doesnt have to be.

FONT vs TYPEFACE

LegibilityReadability is the ease in which text can be read and understood. The term readability doesnt ask simply Can you read it? or How fast can you read it? It also asks Do you want to read it? - Stephen Coles

Legibility is a combination of factors:Font familyFont size / HierarchyLine HeightAlignmentFont and background colorsWhite Space

One Font for the Headings

Choose one legible typeface with varied weights, or choose two typefaces with contrasting styles and weights.

Combining a serif typeface with a sans serif typeface (without serifs) gives the most contrast and visual appeal.

.One font for the body copy.

HierarchyHierarchy helps your audience distinguish between levels of information, such as title, header, subhead and body.Information can be set apart by changing font family, font type, size and color.To maintain unity, keep typographic choices consistent for each section throughout a layout.

LEADING: Space between linesCSS: line-height Set: 140-150% of font size is a good bench markIf letters, words, or lines are too far apart, readers have a hard time because blocks of text tend to look too light, causing readers to lose a sense of continuity.

MEASURE: length of line of text CSS: max-width min-widthSet: 45-80 characters is generally considered optimal for readability.

CSS: text-alignSet: left, right, center, justify

JUSTIFICTION: paragraph alignmentRIVERS: Bad words spacing, usually with justified text, can create rivers or unintentional areas of white space that flow down a page and create a visual distraction for the reader.

Certain color combinations, particularly those lacking strong contrast (such as yellow type on white background) are difficult to read. Too much or too little contrast is a negative.CLEAR COLOR CONTRAST

CSS: color: Set: #333 on #fff is a good benchmark

GOOD PRACTICE

Stick to one or two typefaces

Contrast styles and weight

Combination of a sans-serif and serif

Use different weights from the same family

Dont use Comic Sans, Curlz or Papyrus

LIMITED WEB SAFE FONTS !?!FONTS AS A SERVICE !!!Designers can now have access to a wide variety of fonts through font services. This allows you to create consistent, eye catching typography across any operating system!

FONTS AS A SERVICE

google.com/fonts/Select your desired font!

Grab the Code

Add font to CSS