A distinctive display face for headlines, a refined one for text.
From frontend-design: pair a distinctive display font with a refined body.
Pick a cell. Arrow keys move between cells.
Field notes · Issue 14
Every morning at four, the ovens come on before the street lights go off. Flour costs rose eleven percent this year, yet the price of a loaf moved only once, and the owner can tell you exactly why.
Margins in bread are thin; margins in coffee are not. The croissant is the argument that gets you through the door, the flat white is the business model that keeps the lights on.
Type a headline and paragraph. Swap roles to compare.
:root {
--font-display: "Fraunces", Georgia, serif;
--font-body: "Source Serif 4", Charter, serif;
}
h1, h2, h3 { font-family: var(--font-display); }
body { font-family: var(--font-body); }Quirks are character in a headline and friction in a paragraph.