AstroSage ships three variable serifs designed for reading on screens: Source Serif 4, Literata and Newsreader. All three support optical sizing, so the same family works for 14px captions and 48px titles.
Switching faces
Set typography.serif in sage.config.ts:
export default defineSageConfig({ typography: { serif: "literata" },});A full-bleed image in plain Markdown
Why serif?
For long-form reading, a well-made serif with a large x-height and moderate contrast reads as comfortably as a sans on modern screens, and it gives the page a bookish warmth.
Every element mentioned here is set in the showcase post, including its maths.