Difference between revisions of "Category:Typography"

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

• 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
• Eye Movements Reveal Interplay Between Noun Capitalization and Word Class During Reading (pdf) by Sven Hohenstein and Reinhold Kliegl in the Cognitive Science Journal

Capitalization

• Capital Letters on Readability Guidelines by Content Design London.
• Letter case and text legibility in normal and low vision by Aries Arditi and Jianna Cho on Science Direct
• Making a case for letter case by John Saito on Medium

Type Scales

which I have mistakenly called typography rhythm, font rhythm, font music, type music, and all kinds of other crap. Dear god of search engines, please let this long string help me find these links next time.

• Type Scale generates typography scales for headers and names them after musical scales - they provide a typographical hierarchy with built-in visual rhythm.
• Material's type scale tokens

Additional Resources

• Typography Tips for a More Comfortable Read by Luke Jones on Inside Design
• Fonts by WebAIM
• It's About Legibility by Allan Haley on 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
• REM vs EM – The Great Debate by Zell Liew on his website.