CSS ClampCSS ClampExamples
Each example defines a mobile and a desktop size and lets clamp() fill in everything between 360px and 1440px. Pick a screen width to see the result at that size.
Headings h1 to h6 and body text. Large headings change a lot between mobile and desktop, body text barely moves.
Fluid type
64.0pxSection title
48.0pxSubsection
36.0pxCard heading
28.0pxSmall heading
22.0pxLabel
18.0pxBody text scales a little, so it stays comfortable to read on every screen.
18.0px| Element | Mobile | Desktop | clamp() |
|---|---|---|---|
| h1 | 36px | 64px | clamp(2.25rem, 1.667rem + 2.593vw, 4rem) |
| h2 | 30px | 48px | clamp(1.875rem, 1.5rem + 1.667vw, 3rem) |
| h3 | 24px | 36px | clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem) |
| h4 | 20px | 28px | clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem) |
| h5 | 18px | 22px | clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem) |
| h6 | 16px | 18px | clamp(1rem, 0.958rem + 0.185vw, 1.125rem) |
| p | 16px | 18px | clamp(1rem, 0.958rem + 0.185vw, 1.125rem) |
Custom properties that scale from 360px to 1440px. Using Tailwind CSS v4? Put them in @theme instead of :root and use text-h1, text-p and so on.
:root {
--text-h1: clamp(2.25rem, 1.667rem + 2.593vw, 4rem);
--text-h2: clamp(1.875rem, 1.5rem + 1.667vw, 3rem);
--text-h3: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem);
--text-h4: clamp(1.25rem, 1.083rem + 0.741vw, 1.75rem);
--text-h5: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem);
--text-h6: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
--text-p: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
}The striped areas are the page gutters on both sides of the content. They grow with the screen together with the gaps and the card padding, so the dashboard feels roomy on a desktop and never wastes space on a phone.
Three values do all the work: the gutter on both sides of the page, the gap between blocks and the padding inside cards.
:root {
--page-gutter: clamp(1rem, 0rem + 4.444vw, 4rem);
--layout-gap: clamp(0.75rem, 0.333rem + 1.852vw, 2rem);
--card-padding: clamp(1rem, 0.75rem + 1.111vw, 1.75rem);
}
.page {
padding-inline: var(--page-gutter);
}
.grid {
display: grid;
gap: var(--layout-gap);
}
.card {
padding: var(--card-padding);
}