Types of fonts and when to use them

Olga Dmytryshyna sorts typography into four families: serif, sans-serif, script, and display. Each carries its own mood. Serif reads as historical and trustworthy, sans-serif as clean and adaptable across screen sizes, script as handwritten and personal, display as bold and made for headings. The choice starts from the brand message a product wants to send, not from personal taste.

The rest of the piece works through combining fonts without breaking readability: how many to use, how to build contrast between them, and how to check that a pairing still holds up on small screens and for readers with visual impairments.

Fichamento

#

• Serif fonts carry the small lines at letter edges that give them their look, and read as historical and trustworthy. The New York Times uses serif type across headings and body text to reinforce that impression.
• Sans-serif fonts, developed by German designers in the mid-20th century (Futura, Helvetica among the best known), adapt more easily across screen sizes and resolutions. Ikea uses sans-serif for a clean, minimal brand identity.
• Script fonts imitate handwriting and read as creative or personal, but rarely work for interface text because of readability issues. Marshall pairs a script font with a serif font to get a vintage feel without losing legibility.
• Display fonts are built for large sizes, aimed at hero sections and banners. Nike uses one to carry bold, short statements.
• Pairing guidelines: build contrast between headings and body text, cap it at two fonts, lean on fonts from the same type family when starting out, study pairings on sites that already work, and test the result on real users.
• Accessibility numbers cited: body text between 12 and 18 pixels, headings no smaller than 24 pixels, and a World Health Organization estimate that over 2.2 billion people worldwide have some vision impairment tied directly to font-size and contrast decisions.
• Tools recommended: WhatFont (browser extension that identifies the font used on any page), Fontjoy (generates font pairings automatically), and Fontshare (curated pairing examples).