web-typography

# Web Typography A practical guide to choosing, pairing, and implementing typefaces for the web. Typography serves communication — the best typography is invisible, immersing readers in content rather than calling attention to itself. ## Core Principle **Typography is the voice of your content.** The typeface you choose sets tone before a single word is read. A legal site shouldn't feel playful; a children's app shouldn't feel corporate. **The "clear goblet" principle:** Typography should be like a crystal-clear wine glass — the focus is on the wine (content), not the glass (type). Readers should absorb meaning, not notice letterforms. **Readers don't read, they scan.** Eyes jump 7-9 characters at a time (saccades), pausing briefly (fixations). Good typography supports this natural pattern. ## Scoring **Goal: 10/10.** When reviewing or creating typography implementations, rate them 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10. ## Two Contexts for Type All typography falls into two categories: | Context | Purpose | Priorities | |---------|---------|------------| | **Type for a moment** | Headlines, buttons, navigation, logos | Personality, impact, distinctiveness | | **Type to live with** | Body text, articles, documentation | Readability, comfort, endurance | **Workhorse typefaces** excel at "t...