Catalogue / Plate 65← All plates
A fluid type scale with a floor
Slide the window from 320 to 2560 and watch type scale hold, or drop under 12px.
At 992px the window-scaled version puts 2 of 3 text sizes under 12px. The floored one cannot.
- Label 5.7px
- Body 9.2px
- Heading 27.6px
- Label 12.0px
- Body 16.7px
- Heading 49.0px
/* floored: minimums in rem, so the visitor's own font size still counts */ --text-label: clamp(0.75rem, 0.55rem + 0.25vw, 0.875rem); --text-body: clamp(1rem, 0.95rem + 0.15vw, 1.125rem); --text-head: clamp(2rem, 1.2rem + 3vw, 4.5rem);
Remake it
Build one interactive web page: Slide the window from 320 to 2560 and watch a window-scaled type scale drop under 12px while a clamped one holds. Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: Every build. The floor is a COR standard: no text under 12px at any width. Do not let it fail the way this kind of piece usually does: A root font size computed from the viewport: under 6px at 992 wide on both exemplar sites measured (5.74px and 5.58px). It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.
Notes: when it suits, when it does not, how it fails
- When it suits
- Every build. The floor is a COR standard: no text under 12px at any width.
- When it does not
- Nothing. Even a poster-like page needs readable labels at a 992px laptop.
- How it fails
- A root font size computed from the viewport: under 6px at 992 wide on both exemplar sites measured (5.74px and 5.58px).
Measured on: landonorris.com · F1 · era-residence.com · F2. Built from scratch for an invented business; nothing here comes from the site studied.