Category:Typography
What it is
Typography is the design of type to make written language legible, readable, and appealing when displayed.
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, 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 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
- Parts of Letterforms Typography (Google search results)
Accessibility Considerations
Readability
- 16 Pixels Font Size: For Body Copy; Anything Less Is A Costly Mistake by D. Bnonn Tennant at Smashing Magazine.
- Readability Guidelines by Content Design London
Capitalization
- Capital Letters on Readability Guidelines by Content Design London.
- Making a case for letter case by John Saito on Medium
Additional Resources
- Typography Tips for a More Comfortable Read by Luke Jones on the Invision Blog
- Fonts by WebAIM
- It's About Legibility by Fonts.com
- Typography can make or break your design: a process for choosing type by Jonathan Z. White covers the basics of choosing typography.
- Best practices for using font-weights with web fonts by Webtype