Every Type of Font Explained (And When to Use Each One)

Fonts are the most visible design decision on any website. They're the first thing visitors process, often before they consciously register colours, images, or layout. Yet most designers work with a surprisingly shallow understanding of font classification, choosing typefaces based on feel rather than function.

This guide covers every major font category, how they work technically, what they communicate visually, and when to use each one in web design. Whether you're pairing fonts for a client project or building a typographic system from scratch, understanding these categories will make every font decision faster and more confident.

Serif Fonts

Serif fonts have small strokes or extensions (called serifs) at the ends of their letterforms. These are the fonts most people associate with books, newspapers, and traditional publishing. The serifs were originally a product of stone carving, where the chisel naturally created small flares at the end of each stroke.

Serif fonts subdivide into four distinct groups, each with different characteristics and connotations.

Old Style serifs (also called Humanist serifs) are the oldest category, originating in the 15th century. They feature moderate contrast between thick and thin strokes, angled stress (the thinnest part of curved letters is on a diagonal), and bracketed serifs (the serif curves smoothly into the main stroke). Examples include Garamond, Palatino, and Bembo. These fonts feel warm, literary, and timeless. They're excellent for body text on editorial sites, author websites, and brands that want to communicate heritage or craftsmanship.

Transitional serifs emerged in the 18th century as a bridge between Old Style and Modern designs. They have greater contrast between thick and thin strokes, more vertical stress, and sharper, more defined serifs. Times New Roman is the most recognised Transitional serif. Others include Baskerville, Georgia, and Bookman. These fonts feel authoritative and reliable. They're the default choice for professional services, law firms, financial institutions, and any brand that needs to communicate trustworthiness without feeling old-fashioned.

Modern serifs (also called Didone) pushed the thick-thin contrast to its extreme. The thick strokes are very thick, the thin strokes are hairline thin, and the serifs are completely flat (unbracketed) horizontal lines. Bodoni and Didot are the defining examples. These fonts feel elegant, fashionable, and high-contrast. They're heavily used in fashion, luxury branding, and editorial design. However, their extreme contrast makes them less readable at small body text sizes, where the thin strokes can disappear on screen. Best reserved for headings and display use.

Slab serifs have thick, block-like serifs with little or no bracketing. The stroke contrast is usually minimal, meaning thick and thin parts of the letters are similar in weight. Examples include Rockwell, Courier, Clarendon, and Roboto Slab. These fonts feel sturdy, grounded, and approachable. They work well for brands that want to communicate strength without formality, and they perform exceptionally well at small sizes on screen because the heavy serifs maintain clarity at low resolutions.

Sans-Serif Fonts

Sans-serif fonts (from the French "sans," meaning "without") lack the small strokes at the end of letterforms. They emerged in the 19th century and became dominant in the 20th century, particularly in digital contexts where their cleaner lines render more consistently on screen.

Sans-serif fonts also subdivide into four groups.

Grotesque sans-serifs are the earliest sans-serif designs, dating to the early 1800s. They have some stroke width variation (not as uniform as later sans-serifs), slightly squared curves, and a somewhat industrial feel. Examples include Franklin Gothic, News Gothic, and Akzidenz-Grotesk. These fonts feel workmanlike and unpretentious. They're useful for headlines and UI elements where a clean but characterful appearance is needed.

Neo-Grotesque sans-serifs refined the Grotesque style into something more uniform and neutral. Stroke width is very consistent, curves are more regular, and the overall impression is one of precision and neutrality. Helvetica is the defining Neo-Grotesque font. Others include Arial, Univers, and Inter. These fonts are the workhorses of digital design. Their neutrality makes them suitable for almost any context, though that same neutrality can make designs feel generic if not handled carefully. They're the default choice for UI design, corporate communications, and any context where the typography should communicate information without adding its own personality.

Humanist sans-serifs reintroduce some of the organic qualities of handwritten letterforms. They have more stroke variation, open apertures (the openings in letters like 'c' and 'e' are wider), and a warmer, more readable feel. Examples include Gill Sans, Frutiger, Open Sans, and Lato. These fonts feel friendly, approachable, and highly readable. They're excellent for body text on screen, particularly for websites aimed at general audiences. Humanist sans-serifs are widely considered the most readable sans-serif category for extended text.

Geometric sans-serifs are constructed from geometric shapes: perfect circles, consistent stroke widths, and mathematically precise proportions. The 'o' is often a perfect or near-perfect circle. Examples include Futura, Century Gothic, Montserrat, and Poppins. These fonts feel modern, clean, and designed. They're popular in technology, architecture, and contemporary branding. However, their geometric precision can reduce readability in long body text because the uniformity of letter shapes makes individual characters harder to distinguish. Best for headings, short text, and brand identity.

Display and Decorative Fonts

Display fonts are designed to be used at large sizes for headlines, titles, and short text. They prioritise visual impact over readability and often have exaggerated features that would be distracting or illegible at body text sizes.

This is a broad category that includes everything from elegant script-inspired designs to bold, chunky display faces. The key characteristic is that they have personality, a lot of it. Playfair Display, Abril Fatface, Oswald, and Lobster are all display fonts with very different personalities.

The rule with display fonts is simple: use them for headlines only, pair them with a neutral body font, and never use them for body text. A display font at 48px can be stunning. The same font at 16px in a paragraph is almost always unreadable.

On the web, display fonts are also often the heaviest in terms of file size, because their complex letterforms require more data to render. If performance matters (and it should), limit display fonts to headings and load them with font-display: swap to prevent render blocking.

Script and Handwriting Fonts

Script fonts emulate handwriting or calligraphic styles. They range from formal scripts (connected, flowing letterforms that mimic copperplate calligraphy) to casual scripts (looser, more informal handwriting styles).

Formal scripts include fonts like Great Vibes, Playfair Display SC (small caps variant used decoratively), and Cormorant Garamond's italic. Casual scripts include Pacifico, Caveat, and Dancing Script.

Script fonts carry strong personality and can create a sense of elegance, warmth, or creativity. They're popular in wedding industry sites, beauty and wellness brands, and personal blogs. However, they have significant readability limitations.

Most script fonts are difficult to read at small sizes, in all-caps, or in long passages. The connected letterforms create visual density that the eye struggles to parse quickly. Script fonts should be used sparingly: a logo, a single heading, a pull quote. Never for navigation, body text, or any text that needs to be scanned quickly.

Accessibility is also a concern. Many script fonts have letterforms that are ambiguous, particularly for readers with dyslexia. The decorative connections between letters can make individual character recognition difficult. If accessibility is a priority (and it should be), use script fonts only for non-essential decorative text.

Monospace Fonts

Monospace fonts give every character the same width. An 'i' occupies the same horizontal space as an 'm'. This is the opposite of proportional fonts (every other category above), where character width varies based on the letter's natural shape.

Monospace fonts were originally designed for typewriters and early computer terminals, where fixed-width characters were a mechanical necessity. In modern design, they carry associations with code, technology, data, and a somewhat retro aesthetic.

Examples include Courier New, Fira Code, JetBrains Mono, IBM Plex Mono, and Space Mono.

On the web, monospace fonts are most commonly used for code snippets and technical content. But they've also become a broader design trend, used for headings and UI elements on tech-forward brands, creative portfolios, and editorial sites that want a raw, utilitarian aesthetic.

The fixed-width characteristic means monospace fonts are less space-efficient than proportional fonts (the same text takes up more horizontal space), and they're slightly harder to read in long passages because the unnatural spacing disrupts the reading rhythm. Like display fonts, they're best used for specific, intentional applications rather than as a default body font.

Variable Fonts

Variable fonts are a relatively recent development in web typography. Rather than loading separate font files for each weight and style (regular, bold, italic, bold italic), a variable font contains the entire range of weights, widths, and other properties in a single file.

A single variable font file might contain every weight from Thin (100) to Black (900), every width from Condensed to Expanded, and every slant from Upright to Italic. You can then specify any value along these axes in CSS:

h1 {  font-variation-settings: 'wght' 750, 'wdth' 85;}

The advantages are significant. Performance improves because one file replaces what might have been six or eight separate files. Design flexibility increases because you're not limited to the predefined weights (Regular, Bold) but can use any weight value (420, 650, 875). And responsive design benefits because you can adjust font weight and width based on viewport size, creating truly fluid typography.

Not all fonts are available as variable fonts, but the number is growing rapidly. Google Fonts has been expanding its variable font offerings, and many premium foundries now offer variable versions of their popular families. Squarespace supports variable fonts through custom font uploads, though the Site Styles controls don't expose the full range of variable font axes. Custom CSS is needed to take full advantage.

Choosing Fonts for Web Design

With all these categories understood, the practical question is: how do you choose?

Start with function. Body text needs a font optimised for screen readability at 14px to 18px. This usually means a Humanist sans-serif (Open Sans, Lato, Source Sans Pro) or a well-designed Transitional or Slab serif (Georgia, Merriweather, Roboto Slab). These categories have been refined over centuries for extended reading.

Then consider personality. The heading font is where brand character lives. A Geometric sans-serif says "modern and clean." A Modern serif says "elegant and editorial." A Slab serif says "bold and grounded." A script says "personal and creative." Match the personality to the brand, not to your personal preference.

Test with real content. "The quick brown fox" tells you nothing about how a font handles your client's actual page titles, service names, and body copy. Paste real content into a font preview tool and evaluate it at the actual sizes you'll use on the site.

Check the character set. If the client operates in multiple languages, verify that the font supports the necessary character sets (accented characters for European languages, Cyrillic for Russian, and so on). A font that lacks the characters you need will display fallback characters from the system font, creating visible inconsistency.

Verify the licence. Google Fonts are free for web use. Adobe Fonts are included with Creative Cloud subscriptions. Premium fonts from foundries require a web licence, which is often priced by pageview volume. Using a font without the correct licence isn't just unethical. It's a legal liability for your client.

And finally, limit your choices. One font family for headings and one for body text is sufficient for the vast majority of websites. Two families with multiple weights give you more than enough typographic variation to create clear hierarchy and visual interest. Three families is occasionally justified. Four or more is almost never necessary and adds both visual complexity and performance overhead.

Typography is the design decision your visitors spend the most time looking at. Understanding the categories, the history, and the practical characteristics of each font type gives you a vocabulary for making those decisions intentionally rather than instinctively. Both approaches might produce good results, but only one produces consistent results.