{"id":228,"date":"2026-09-30T17:16:35","date_gmt":"2026-09-30T17:16:35","guid":{"rendered":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/"},"modified":"2026-09-30T18:21:15","modified_gmt":"2026-09-30T18:21:15","slug":"practical-css-clamp-guide","status":"publish","type":"post","link":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/","title":{"rendered":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples"},"content":{"rendered":"<p class=\"bo-doc-status\">Documentation-based practice example; check the controls in your installed Oxygen version.<\/p>\n<nav class=\"bo-doc-toc\" aria-label=\"On this page\">\n<p><strong>On this page<\/strong><\/p>\n<ul>\n<li><a href=\"#overview\">When fluid typography helps<\/a><\/li>\n<li><a href=\"#example\">Worked example: a 32\u201364px project heading<\/a><\/li>\n<li><a href=\"#formula\">Why these numbers work<\/a><\/li>\n<li><a href=\"#setup\">Apply the result in Oxygen<\/a><\/li>\n<li><a href=\"#second-example\">A second example: 40\u201380px<\/a><\/li>\n<li><a href=\"#troubleshooting\">Troubleshooting<\/a><\/li>\n<li><a href=\"#checks\">Accessibility and reference<\/a><\/li>\n<\/ul>\n<\/nav>\n<section id=\"overview\">\n<h2>When fluid typography helps<\/h2>\n<p>Use <code>clamp()<\/code> when a heading should grow smoothly between a phone and a desktop, with limits that prevent it becoming too small or too large. It is useful for a project title or hero heading. Choose separate values for body text and spacing; a hero formula is not a universal type scale.<\/p>\n<\/section>\n<section id=\"example\">\n<h2>Worked example: a 32\u201364px project heading<\/h2>\n<p>Assume a 16px root size. You want a heading to be 32px at a 320px viewport and 64px at 1440px. Enter those sizes and viewport endpoints in the <a href=\"https:\/\/benjaminolsen.dev\/index.php\/css-clamp-generator\/\">CSS Clamp Generator<\/a>.<\/p>\n<pre><code>font-size: clamp(2rem, 1.428571rem + 2.857143vw, 4rem);<\/code><\/pre>\n<p>The three arguments are the minimum, preferred value and maximum. The browser constrains the preferred value to the two bounds. This example was checked against the working calculator on this site.<\/p>\n<\/section>\n<section id=\"formula\">\n<h2>Why these numbers work<\/h2>\n<p>The slope is the size difference divided by the viewport difference: <code>(64 - 32) \/ (1440 - 320) = 0.028571<\/code>. The viewport coefficient is that slope multiplied by 100, or approximately <code>2.857143vw<\/code>. The intercept is <code>32 - 0.028571 \u00d7 320 = 22.857143px<\/code>, or <code>1.428571rem<\/code> at a 16px root.<\/p>\n<div class=\"bo-doc-table-wrap\">\n<table>\n<caption>Expected size at a 16px root<\/caption>\n<thead>\n<tr>\n<th>Viewport<\/th>\n<th>Preferred value<\/th>\n<th>Rendered size<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>320px<\/td>\n<td>32px<\/td>\n<td>32px<\/td>\n<\/tr>\n<tr>\n<td>880px<\/td>\n<td>48px<\/td>\n<td>48px<\/td>\n<\/tr>\n<tr>\n<td>1440px<\/td>\n<td>64px<\/td>\n<td>64px<\/td>\n<\/tr>\n<tr>\n<td>Below 320px<\/td>\n<td>Below 32px<\/td>\n<td>Minimum 32px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/section>\n<section id=\"setup\">\n<h2>Apply the result in Oxygen<\/h2>\n<ol>\n<li>Add or select the heading\u2019s Text element and choose the correct heading level.<\/li>\n<li>Apply a reusable heading class. Use the available typography value or a scoped CSS rule for its font size.<\/li>\n<li>Paste the expression once; avoid a competing font-size declaration through another styling method.<\/li>\n<li>Keep line height and maximum text width deliberate so the long version of the heading remains readable.<\/li>\n<li>Check the actual frontend at the two endpoints and an intermediate width.<\/li>\n<\/ol>\n<\/section>\n<section id=\"second-example\">\n<h2>A second example: 40\u201380px<\/h2>\n<p>For 40px at 320px and 80px at 1440px, with the same 16px root, the tested generator returns:<\/p>\n<pre><code>clamp(2.5rem, 1.785714rem + 3.571429vw, 5rem)<\/code><\/pre>\n<p>The preferred value at 880px is approximately 60px. Choose this larger range only if your content needs it; compare a long project name and a short one.<\/p>\n<\/section>\n<section id=\"troubleshooting\">\n<h2>Troubleshooting<\/h2>\n<ul>\n<li><strong>The size stays fixed:<\/strong> inspect the computed font size and competing rules. Also check whether the preferred value is already outside the bounds.<\/li>\n<li><strong>The endpoints differ:<\/strong> verify the root size. These rem values assume 16px; visitor preferences or your CSS can change it.<\/li>\n<li><strong>The tool rejects the inputs:<\/strong> the upper viewport must exceed the lower viewport, and the maximum size cannot be smaller than the minimum.<\/li>\n<li><strong>The text is hard to read:<\/strong> change the design values, line length or breakpoint behavior rather than treating the formula as a visual verdict.<\/li>\n<\/ul>\n<\/section>\n<section id=\"checks\">\n<h2>Accessibility and reference<\/h2>\n<p>Test browser zoom and text enlargement, not only the calculator preview. Mixing rem with viewport units is useful, but a clamp formula alone does not guarantee successful resizing. Keep instructions and body copy comfortably readable. Reference: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/Reference\/Values\/clamp\">MDN clamp()<\/a>.<\/p>\n<\/section>\n<section id=\"related\">\n<h2>Related guides and tools<\/h2>\n<ul>\n<li><a href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/oxygen-text-element\/\">Oxygen 6 Text Element: A heading system with correct document structure<\/a><\/li>\n<li><a href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/better-spacing-in-oxygen\/\">Better spacing in Oxygen<\/a><\/li>\n<li><a href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/color-contrast-check-before-publishing\/\">Color contrast: check before you publish<\/a><\/li>\n<\/ul>\n<p><a href=\"https:\/\/benjaminolsen.dev\/index.php\/tools\/\">Explore all tools<\/a> \u00b7 <a href=\"https:\/\/benjaminolsen.dev\/index.php\/guides\/\">Browse the documentation library<\/a><\/p>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_oxygen_hide_in_design_set":false,"_oxygen_tags":"","footnotes":""},"categories":[8,3],"tags":[],"bo_topic":[19],"bo_resource_type":[20],"bo_doc_section":[23],"class_list":["post-228","post","type-post","status-publish","format-standard","hentry","category-css","category-guides","bo_topic-css-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen<\/title>\n<meta name=\"description\" content=\"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/\" \/>\n<meta property=\"og:locale\" content=\"da_DK\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen\" \/>\n<meta property=\"og:description\" content=\"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"Benjamin Olsen\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-30T17:16:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-09-30T18:21:15+00:00\" \/>\n<meta name=\"author\" content=\"Benjamin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Benjamin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutter\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/\"},\"author\":{\"name\":\"Benjamin\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"headline\":\"CSS clamp() in Oxygen: Fluid Typography with Worked Examples\",\"datePublished\":\"2026-09-30T17:16:35+00:00\",\"dateModified\":\"2026-09-30T18:21:15+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/\"},\"wordCount\":523,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"articleSection\":[\"CSS\",\"Guides\"],\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/\",\"name\":\"CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\"},\"datePublished\":\"2026-09-30T17:16:35+00:00\",\"dateModified\":\"2026-09-30T18:21:15+00:00\",\"description\":\"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/#breadcrumb\"},\"inLanguage\":\"da-DK\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/2026\\\/09\\\/30\\\/practical-css-clamp-guide\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/benjaminolsen.dev\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS clamp() in Oxygen: Fluid Typography with Worked Examples\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#website\",\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/\",\"name\":\"Benjamin Olsen\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/benjaminolsen.dev\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"da-DK\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/benjaminolsen.dev\\\/#\\\/schema\\\/person\\\/aee4e89bcb6704d860babf7ba16a0b8d\",\"name\":\"Benjamin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"da-DK\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\",\"caption\":\"Benjamin\"},\"logo\":{\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g\"},\"sameAs\":[\"http:\\\/\\\/benjaminolsen.dev\"],\"url\":\"https:\\\/\\\/benjaminolsen.dev\\\/index.php\\\/author\\\/benjamin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen","description":"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/","og_locale":"da_DK","og_type":"article","og_title":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen","og_description":"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.","og_url":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/","og_site_name":"Benjamin Olsen","article_published_time":"2026-09-30T17:16:35+00:00","article_modified_time":"2026-09-30T18:21:15+00:00","author":"Benjamin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Benjamin","Est. reading time":"3 minutter"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/#article","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/"},"author":{"name":"Benjamin","@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"headline":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples","datePublished":"2026-09-30T17:16:35+00:00","dateModified":"2026-09-30T18:21:15+00:00","mainEntityOfPage":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/"},"wordCount":523,"commentCount":0,"publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"articleSection":["CSS","Guides"],"inLanguage":"da-DK","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/","url":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/","name":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples | Benjamin Olsen","isPartOf":{"@id":"https:\/\/benjaminolsen.dev\/#website"},"datePublished":"2026-09-30T17:16:35+00:00","dateModified":"2026-09-30T18:21:15+00:00","description":"Generate and apply a fluid heading size in Oxygen. See the formula, endpoint calculations, a working tool and fixes for common clamp() mistakes.","breadcrumb":{"@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/#breadcrumb"},"inLanguage":"da-DK","potentialAction":[{"@type":"ReadAction","target":["https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/benjaminolsen.dev\/index.php\/2026\/09\/30\/practical-css-clamp-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/benjaminolsen.dev\/"},{"@type":"ListItem","position":2,"name":"CSS clamp() in Oxygen: Fluid Typography with Worked Examples"}]},{"@type":"WebSite","@id":"https:\/\/benjaminolsen.dev\/#website","url":"https:\/\/benjaminolsen.dev\/","name":"Benjamin Olsen","description":"","publisher":{"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/benjaminolsen.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"da-DK"},{"@type":["Person","Organization"],"@id":"https:\/\/benjaminolsen.dev\/#\/schema\/person\/aee4e89bcb6704d860babf7ba16a0b8d","name":"Benjamin","image":{"@type":"ImageObject","inLanguage":"da-DK","@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g","caption":"Benjamin"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/fda08b9a3a73cd1a57fc39c2a767fb6441b2dbf176857221a8da88161187eeb1?s=96&d=mm&r=g"},"sameAs":["http:\/\/benjaminolsen.dev"],"url":"https:\/\/benjaminolsen.dev\/index.php\/author\/benjamin\/"}]}},"_links":{"self":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/comments?post=228"}],"version-history":[{"count":2,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/228\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/posts\/228\/revisions\/581"}],"wp:attachment":[{"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/media?parent=228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/categories?post=228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/tags?post=228"},{"taxonomy":"bo_topic","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_topic?post=228"},{"taxonomy":"bo_resource_type","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_resource_type?post=228"},{"taxonomy":"bo_doc_section","embeddable":true,"href":"https:\/\/benjaminolsen.dev\/index.php\/wp-json\/wp\/v2\/bo_doc_section?post=228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}