Short answer: Serif typefaces have small strokes, called serifs, at the ends of their letters, and sans serif typefaces don’t. “Sans” is the French word for “without.” On a website, either style can work. In our view, choose by the job each font does and how it reads at the sizes you use. Keep to two typefaces at most.
What a serif is
Google Fonts defines a serif as the mark or line that can sometimes appear at the end of a stroke in a character. The word also names the typefaces that use serifs in their design.
MDN describes serif letters as having finishing strokes, flared or tapering ends, or actual serifed endings. Google Fonts groups serif typefaces by history: humanist or old style, slab serif (also called Egyptian or Clarendon), and transitional or neoclassical.
What sans serif means
A sans serif is a typeface designed without serifs. Google Fonts adds that sans serif faces typically have lower stroke contrast and larger x-heights than serifs.
The label applies to letters that would naturally have serifs, such as an “h”, since some letters, such as an “o”, have none. Google Fonts lists geometric, grotesque and neo-grotesque, and humanist styles of sans serif.
Google Fonts also says the broad genres, such as serif, sans serif, slab serif and monospaced, aren’t clearly delineated or mutually exclusive. Its classifications apply mainly to Latin script typefaces.
How browsers handle serif and sans serif
In CSS, serif and sans-serif are generic font names, like monospace, cursive and fantasy. MDN says the exact font a browser uses for a generic name can vary between browsers and between operating systems.
MDN recommends always including at least one generic family in a font-family list, since there’s no guarantee that any given font is available. The generic name goes last, and it is a keyword, so it must not be quoted.
A few fonts are generally available across all systems, the so-called web safe fonts, and MDN notes that the list changes as operating systems evolve. Our guide to the best fonts for websites covers choosing web fonts and loading them fast.
Which one to use on your website
In our view, neither style is right for every site. Body text has to read well at small sizes on a phone, while headings can carry more personality.
Google Fonts suggests thinking about the period a typeface evokes, for example avoiding old style typefaces for a brand that needs to feel very contemporary.
The way a font reads also depends on everything around it. Our guide to line spacing covers line height and line length, and our color contrast guide shows how to check text against its background. For readers with dyslexia, our guide to dyslexia-friendly fonts explains what actually helps.
Pairing a serif with a sans serif
Before you add a second typeface, Google Fonts suggests checking whether the first one’s weights, styles, widths and optical sizes already give you enough contrast. Even a typeface with a single font can be adjusted with size, case and tracking.
It lists cases where a second typeface helps: a different context, such as data next to editorial text, and a brand whose main typeface feels too serious. A typeface without the weights or italics you need is another case, so that italic text isn’t rendered as a faux italic, and so is missing support for international characters. On a site with a Spanish version, that means checking accented letters, the ñ and the ¿ and ¡ marks in both fonts before you choose.
Google Fonts Knowledge quotes Jason Santa Maria’s book On Web Typography: “When in doubt […] pair a serif and a sans serif.” The quote adds that this nearly guarantees sufficient variation. If your main typeface alludes to a period, Google Fonts suggests continuing that theme in the second one, unless you want the contrast.
Our guide to website layout shows how headings and body text shape a page people can read, and our guide to website color schemes covers the colors around your type.
Your fonts, step by step
- Check whether your main typeface’s weights and styles already give you enough contrast.
- If you need a second typeface, try pairing a serif with a sans serif.
- End each font-family list in your CSS with the generic serif or sans-serif name, without quotes.
- Check accented letters, the ñ and Spanish punctuation in both fonts.
- Read a full page on a phone before you decide.
Steps 1 to 3 follow Google Fonts Knowledge and MDN. Steps 4 and 5 are our advice.
Before you settle on your fonts
- Each font has a job: headings, body text or both.
- The site keeps to two typefaces at most, which is our advice, not a rule.
- Body text reads well at small sizes on a phone.
- Every font-family list ends with a generic name.
- Accented letters and the ñ display in every font.
- Italic text uses a real italic, not a faux one.
RememberSerif typefaces have small strokes at the ends of their letters, and sans serif typefaces don’t. Give each font a job, pair a serif with a sans serif when you need two, and end your CSS font lists with a generic name.
With our web design service, we design and build websites for local businesses, in English and Spanish. Every plan is built in WordPress with Bricks, with copy we write and tracking set up before launch. Everything lands in your name, and if you leave, it keeps running.
Questions about serif and sans serif
What is the difference between serif and sans serif?
Serifs are small marks or lines at the end of the strokes of a letter. Serif typefaces use them and sans serif typefaces don’t. Google Fonts adds that sans serifs typically have lower stroke contrast and larger x-heights than serifs.
Which is easier to read on a website?
In our view, neither style wins by category alone. Size, line spacing and contrast change how any font reads, so test your body text on a phone at the size you plan to use before you decide.
Can I use serif and sans serif together?
Yes. Google Fonts Knowledge quotes Jason Santa Maria’s book On Web Typography: “When in doubt […] pair a serif and a sans serif.” It also suggests checking first whether one typeface’s weights and styles already give you enough contrast.
What are serif and sans-serif in CSS?
They are generic font names, like monospace, cursive and fantasy. MDN says the font a browser picks for each can vary between browsers and operating systems, and it recommends ending every font-family list with a generic name, without quotes.
What are the main types of serif and sans serif fonts?
Google Fonts lists humanist or old style, slab serif and transitional serifs, and geometric, grotesque and humanist sans serifs. It notes that these classifications apply mainly to Latin script typefaces.
Sources
We read these pages on November 7, 2026. Google Fonts Knowledge, in English only: Serif, Sans serif, Making sense of typographic classifications and Pairing typefaces. MDN: font-family CSS property and Fundamental text and font styling. From our own site: our web design page and our guides on website fonts, line spacing, color contrast, dyslexia-friendly fonts, page layout and color schemes.