v150 · CSS · Typography · demo
Pull Quote Scaler
Editorial pull quotes that exactly fill their column width at any container size — using text-fit: balance. Short quotes expand to fill the space; long quotes scale down to prevent overflow. Resize the frame or swap quotes to see it adapt.
text-fit: balance required. Without it the quotes render at a fixed font-size: 2rem and may overflow or look undersized depending on length.
Drag the frame corner to resize · Switch quotes · Toggle text-fit on/off
The design of a great product starts not with technology but with empathy — understanding how people actually live and work, and then building the smallest possible thing that fits that reality.
Design is not decoration.— Product Design Quarterly, 2024
The principles that drive enduring design are not mysterious: clarity over cleverness, function before form, and the humility to iterate when the initial idea doesn't serve the person using it. These principles apply whether you're designing a button or a city.
/* Pull quote that always fills its container width — no JS, no vw units */
.pull-quote q {
display: block;
font-size: 2rem; /* fallback / minimum */
text-fit: balance; /* ← scales up OR down to fill inline axis */
line-height: 1.2;
}
/* text-fit: balance — expands short text AND shrinks long text
text-fit: scale-down — only shrinks (never expands beyond font-size) */