Playground

Pair the roles by hand. Change a row on the right, or click the text to rewrite it. The address keeps the pairing, so a link shares it.

Screen
DepartmentCalendarLotHomepageAuction estimatesArt FinanceDemoPlayground
Sizes
Tools
Share

Christie’s · Fluid type

Help us tune the type sizes

This is a copy of a christies.com page, set up to compare today’s type sizes with a proposal for new ones. Change the numbers until the page reads well at every width, then send us the link.

  1. Compare

    Before shows today’s sizes, which jump at set screen widths. After shows the proposal, where each size grows smoothly with the screen. Switch between them in the toolbar, or press T.

  2. Tune

    Each row in the Tune sizes panel is one size, set at three widths: 390px for a phone, 1440px for a laptop and 2560px for a large monitor. Type a number and the page changes as you type. Make the window narrower or wider to see the sizes in between.

  3. Check

    The coloured labels name the size each piece of text uses, and how far it is from Before. Point at a row in the panel to outline the text that uses it. Press D to hide the labels.

  4. Share

    Your numbers live in the page’s address and nowhere else, so nobody else’s page changes. Press Copy link and send it: whoever opens it sees your sizes.

Spacing, page margins and the layout on very wide screens stay on the proposal throughout, so the type is the only thing that changes. Back to the proposal in the panel undoes your changes.