Typography is the art and technique of arranging type. It involves selecting typefaces, point sizes, line lengths, line‑spacing (leading), letter‑spacing (tracking), and adjusting space between pairs of letters (kerning). Good typography is invisible – it serves the content. Bad typography screams for attention.
Typeface Categories:
Serif – Fonts with small lines (serifs) at the ends of strokes. Examples: Times New Roman, Georgia, Garamond. Serifs convey tradition, reliability, and formality. They are often used in books, newspapers, and formal branding.
Sans‑serif – Fonts without serifs. Examples: Helvetica, Arial, Futura. Sans‑serifs feel modern, clean, and neutral. They are widely used in digital interfaces and signage.
Script – Fonts that mimic handwriting or calligraphy. Examples: Brush Script, Pacifico. Use sparingly for invitations, logos, or accent text. Overuse leads to illegibility.
Display – Decorative fonts designed for headlines, posters, or logos. Examples: Impact, Lobster. They have strong personalities but should be used in small doses.
Monospace – Each character takes the same width. Examples: Courier, Consolas. Used in coding or to evoke a typewriter aesthetic.
Choosing Fonts:
Consider the context. A law firm’s website needs a trustworthy serif; a tech startup might use a clean sans‑serif. Readability is paramount for body text – avoid low‑contrast or overly decorative fonts for long passages. For digital, ensure the font renders well on different screens and scales properly.
Pairing Fonts:
The classic rule: pair a serif with a sans‑serif. For example, use Garamond for body text and Helvetica for headings. Contrast is key – pair a bold, heavy font with a light, thin one. Avoid pairing fonts that are too similar (e.g., two different serifs with similar x‑heights). Limit yourself to two or three fonts per project.
Tools like Google Fonts, Adobe Fonts, and Fontpair help designers find complementary typefaces. Typewolf and Fonts In Use showcase real‑world examples.
Practical Tips:
Use a font size of 16px or larger for body text on websites.
Line height should be about 1.5 times the font size.
Keep line length between 50 and 75 characters for optimal reading.
Avoid all‑caps for long passages – it reduces reading speed.
Watch out for widows (single words on a line) and orphans (short lines at page top).
Typography is both science and art. Mastering it takes practice, but even small improvements can dramatically enhance any design