Sans Serif
No finishing strokes on the ends of stems. The default of the web because it stays clear at 14px on a backlight. Substyles matter: neo-grotesques (Inter, IBM Plex Sans) are even and quiet; geometrics (Montserrat, Poppins) are rounder; grotesques with more character (Space Grotesk) show a custom a and g. Browse sans-serif fonts.
Searchers who type "gothic font" sometimes mean this class (news gothic, trade gothic). They sometimes mean blackletter. If you wanted a newspaper sans, stay here. If you wanted medieval texture, you want a display blackletter, which this catalog does not treat as a text face.
Serif
Serifs are the small shapes at the ends of strokes. They help the eye track a line in print and, at sufficient size, on screen. Source Serif 4 and Lora are reading serifs. Playfair Display is a high-contrast serif that belongs in the display drawer even though it is a serif. Cormorant Garamond is the same story: beautiful large, brittle small. Category index: serif fonts.
Slab Serif
Slabs have thick, blocky serifs. They shout in posters and still hold in short UI labels. Merriweather and Bitter are the catalog's reading slabs: darker color on the page than a transitional serif. Use a slab when you want authority without Didone hairlines. Pair Bitter with Inter as in Bitter and Inter.
Display
Display type is drawn for large sizes. Condensed sans like Bebas Neue and Oswald live here. So do high-contrast serifs. Retro and vintage looks usually hide in this drawer: a 1970s geometric, a wood-type slab, a condensed gothic. Mood is not a class. Open display fonts and judge at 48px and at 18px. If 18px fails, it is display only.
Monospace
Every character on the same width. Built for code, data, and the aesthetic of code. JetBrains Mono, Fira Code, IBM Plex Mono, Space Mono. Do not set a marketing homepage entirely in mono unless the joke is the point. Category: monospace fonts.
Script and Handwriting
Covered in depth on script and handwriting fonts. Here they are just a class: not for body, useful for a few words. Catalog examples: Caveat, Satisfy. Category page: handwriting fonts.
How to Use the Labels
Pair across classes for contrast (serif body, sans chrome). Pair inside a superfamily when you want one voice (IBM Plex Sans with IBM Plex Serif). Do not pair two geometrics and call it a system. If you are choosing type for a full site, start at best fonts for websites. If you are choosing a wordmark, start at fonts for logos. Glossary terms such as serif and sans serif stay definition-sized; this page is the map.
Variable fonts cut across every class. A variable sans is still a sans. The axis does not change the filing cabinet, it changes how many files you load. Test axes in the variable font tester.
FAQ
- What are the main font types?
- For web work: sans serif, serif, slab serif, display, monospace, and script or handwriting. Superfamilies like IBM Plex span several of those on purpose.
- Is gothic the same as sans serif?
- In metal type, gothic often meant a sans. In search, gothic font also means blackletter. Do not mix those two on a page without saying which you mean.
- Where do retro and vintage fonts sit?
- They are moods, not classes. A retro look can be a geometric sans, a slab, or a display serif. Pick the class first, then the mood.