From perpendicular angel knowledgebase
Jump to navigation Jump to search

What it is

Typography is the design of type to make written language legible, readable, and appealing when displayed.

Typography on Wikipedia

A typeface is a set of one or more fonts that share similar design features. Fonts are the specific rendering of the glyphs (aka the alphabet) including the size, weight, emphasis, orientation, width, etc.

Typeface styles

At the highest level, we have Latin-script fonts (which render, for example, English) and what English printers traditionally called exotic fonts (which include Cyrillic, Hebrew, Arabic, Chinese, Korean, etc.). For purposes of simplicity we're talking about the Latin-script fonts and typefaces.

Latin-script fonts come in multiple styles. The most important of these for our purposes are serif, sans-serif, and monospace, because they can all be listed as the generic family in a font-family declaration in HTML or CSS.

Fonts can be proportional or monospace.

Monospace fonts take up the same amount of space per letter regardless of what the letter looks like. The letter M takes up the same amount of space as the letter I. Monospace fonts were very popular for computers before the GUI was developed. They're still frequently used for development purposes, displaying code, etc.

Proportional fonts only take up the maximum amount of space necessary for the letter. The letter M takes up a lot more space than the letter I. Proportional fonts are generally more readable than monospace fonts.

Fonts can be serif or sans-serif.

Serif fonts have little serifs on the edges of the letters to help differentiate their letter shapes. Serif fonts are more comfortable to read on paper than sans-serif fonts. Most monospace fonts are also serif fonts, but not all ferif fonts are monospace.

Sans-serif fonts lack the serifs. They are more comfortable to read on screen than serif fonts.

How to font

yes I did just verb that, live with it.

Like most design things, you need to start with what the intentions of the typography are -- what are its goals? what will it accomplish? In Typography can make or break your design: a process for choosing type on freeCodeCamp, Jonathan Z. White recommends the following:

  • Identify your purpose
  • Identify your audience
  • Look for inspiration
  • Choose your fonts
  • Determine font sizes
  • Create a typographic style guide

In order to accomplish those goals, 5 Best Practices for Pairing Fonts by Will Fanguy on Inside Design recommends the following:

  • Limit your font palette to (in most situations) 3 fonts
  • Use contrast wherever possible to create a visual hierarchy
  • Keep an eye on moods and history
  • Understand your brand and know what you want to say
  • Trust your gut

Parts of Letterforms

Accessibility Considerations



Additional Resources

Pages in category "Typography"

This category contains only the following page.