Alegreya and Source Sans 3 Font Pairing
Set in Alegreya 700 and Source Sans 3 400
@import url('https://fonts.googleapis.com/css2?family=Alegreya:wght@700&family=Source+Sans+3:wght@400;700&display=swap');
body {
font-family: 'Source Sans 3', system-ui, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Alegreya', Georgia, serif;
font-weight: 700;
}A blog set in Alegreya and Source Sans 3 gets a warm, bookish voice with a clean reading surface. Alegreya, a calligraphic serif, sets the headings at weight 700, and Source Sans 3, a humanist sans serif, carries the body. The headings feel literary and the paragraphs feel easy, a classic combination that works well for blogs with personality and plenty of words.
Alegreya & Source Sans 3
Headings 700, body text 400
ABCDEFGHIJKLM
abcdefghijklm
0123456789 &?!
Body text has to stay comfortable from the first line to the last.
Why Alegreya and Source Sans 3 Work Together
Alegreya is a serif with a visible pen-written influence: angled stress, lively curves and a dynamic rhythm across a line. At 700 it looks rich and slightly old-fashioned in a good way, closer to a book cover than a corporate sign. Source Sans 3 is a humanist sans serif with open shapes, modest width and gentle variation in stroke, so it reads comfortably on screens.
Because both fonts follow humanist, handwriting-based proportions, they share an underlying warmth even though one has serifs and one does not. That shared logic is what keeps the switch from heading to body from feeling abrupt. Alegreya provides texture and character, and Source Sans 3 gives readers a clear, even page.
Where Alegreya and Source Sans 3 Work Best
This pairing suits blogs that tell stories: a book or poetry blog, a gardening journal, a local history site or a slow-travel writer documenting walks through a neighbourhood. Alegreya headlines give each post the feel of a chapter title, and Source Sans 3 keeps long entries light enough to read on a phone.
Weights and Sizes to Use
Set Alegreya at 700 for headings; its range runs from 400 to 900 with italics, so 800 or 900 are available for a single large title. Use Source Sans 3 at 400 for body text and 700 for bold, at 17 to 18px with a line height around 1.6 to 1.7, since it has a relatively modest x-height. Heading line height around 1.2 suits Alegreya’s lively curves.
Things to Watch
Alegreya has a smaller x-height than many serifs, so headings can look smaller than their pixel size suggests; give them a generous size step over the body. Source Sans 3 can look light at 16px on some screens, which is why a slightly larger body size helps. Avoid mixing in a third font, as Alegreya already supplies plenty of character.
Similar Pairings
Pairs with a similar classic feel, each with its own page.
Spectral & Karla
Readers spend most of their time in body text, so it has to stay comfortable from the first paragraph to the tenth.
Crimson Pro & Work Sans
Headlines get a second of attention. The body font has to hold it for minutes, which is why it deserves the most care.
EB Garamond & Inter
Contrast does the work. When the heading and the body clearly differ, the page tells readers where to look first.