Typography

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking), and adjusting the space within letters pairs (kerning).

Text

Text is the graphic representation of speech. Unlike speech, however, text is silent, easily stored, and easily manipulated. The use of text in multimedia presentations makes it possible to convey large amounts of information using very little storage space.

Function of Text

Text characters carry the story line and communicates key ideas. Text formatting conveys the hierarchy and structure of the content.

HyperText can be used to link ideas by jumping to other topics when you click on it. In terms of usability, the act of viewing a single item in a menu accompanied by a single action (a mouse click) requires little training.

The conditioning we have learned from formatted text allows us to quickly identify purpose.

  • Titles [what is this all about]
  • Menus [where to go]
  • Navigation [how to get there]
  • Content [what you see is what you get there]

Creating Text

Creating new text for a multimedia project presents few if any surprises. You simply enter and format the text in the authoring program, or you enter it in a word processing program and import it into the project.

  • However, questions often pop-up as you delve into the subtleties of preparing text as it will appear onscreen. For example,
  • How much text is too much text on-screen?
  • How should information be organized?
  • What formatting looks best?

More questions arise when you want to convert text from printed sources to use on-screen.

  • What are some efficient ways to transform pages of printed information into an online resource?
  • Can you convert files, prepared in desktop publishing programs, into text files that you can import into a project?

Fonts and Typefaces

Typefaces are the stylistic family name made up of Fonts. For example, a "News Gothic" typeface includes News Gothic Bold and News Gothic Light, which are separate fonts within the News Gothic family or Typeface.

Font Sizes2908271385_9900ee4d40

Font sizes are usually expressed in points; one point is .0138 in., or about 1/72 of an inch.

  • Expressed as points
  • 1 point = .0138 inch
  • 1point – 1/72nd of an inch
  • Computer screen resolution = 72 dpi.

The font size is the distance from the top of its capital letter to the bottom of the descenders such as those found in the letters g and y.

Screen Shot 2016-01-11 at 2.50.56 PMCoincidentally, the resolution of most computer monitors is 72 dot per inch.

Identifiable Characteristics of Fonts

Monospace or Non-Proportional Fonts

The characters that make up a Monospace font assign exactly the same amount of horizontal space to each character. Text created with non-proportional fonts often look as though they were produced on a typewriter. Two commonly-used non-proportional fonts are Courier and Monaco on the Macintosh and Courier New and FixedSys on Windows machines.

Serif and Sans Serif or Proportional Fonts

Serif and Sans Serif fonts, also known as Proportional fonts, vary the spacing between characters according to the letter. For example, an "l" requires less horizontal space than a "d". Text created with proportional fonts look more like they were typeset by a professional typographer. Two commonly-used proportional fonts are Times and Helvetica on the Macintosh and Times New Roman and Arial on Windows.

However, Serif and Sans Serif fonts are further distinguished from each other.

Serif Font

Screen Shot 2016-01-11 at 3.05.50 PMSerif fonts are designed with small extensions at the bottom of each character. These extensions aid the reader in following the text. On the printed page, serif fonts are generally used for text in the body of an article because they help guide the reader’s eye along the line of text. Two commonly-used serif fonts are Times and Courier on the Macintosh and Times New Roman and Courier New on Windows.

 

Sans Serif Fonts

Screen Shot 2016-01-11 at 3.05.41 PMSans Serif fonts are designed without small extensions at the bottom of each character. In standard typography, sans serif fonts are generally used for headings within an article because they create an attractive contrast with the Serif fonts used in the body text. Commonly-used sans serif fonts are Helvetica and Monaco on the Macintosh and Arial on Windows.

Currently, however, computer screens do a better job of displaying san-serif than serif fonts, so it is recommend that you use sans-serif fonts for all text displayed on a computer screen.

It is important to note that different browsers support different font faces. the two sans-serif faces most likely to be supported on Windows, Unix, and Macintosh platforms are Arial and Helvetica.

Font File Formats

There are basically two font standards of interest.

PostScript fonts are designed to produce exceptionally good looking type when printed on a high-resolution printer. Because each PostScript character is a mathematical formula, it can be easily scaled bigger or smaller so it looks right whether drawn at 24 points or 96 points.

Postscript fonts were created by Adobe in the mid 1980’s and, combined with the introduction of the Macintosh and the Apple LaserWriter printer, created an industry now called desktop publishing.

TrueType fonts use a variant of postscript technology.

To use a TrueType font only one file must be installed on the host computer. This file is used by the printer and by the screen to produce attractive text at any point size, better and faster than PostScript fonts.

TrueType was created in the early 1990s by Microsoft in cooperation with Apple Computer and others to limit the need to license PostScript fonts from Adobe.

Typographic Hierarchy

Follow link to Understanding Typographic Hierarchy

Beyond Basic Hierarchy

Working with the Chunking and Sequencing of content while employing the elements of typographic style will give the transparent navigation your design intends. See The Type Study: Typographic hierarchy for an excellent example.

Supplementary Typography and Hierarchy Courses

Foundations of Typography - The course teaches the principles of legibility, readability, and compatibility, and how they should be considered when you're selecting and designing with type.

Foundations of Typography: Hierarchy and Navigation - This course teaches designers the best techniques for creating clear levels of importance (hierarchy) and pointing readers in the right direction (navigation), whether it's for print-based or screen-based communication design.