{"id":16170,"date":"2025-11-06T21:25:20","date_gmt":"2025-11-06T21:25:20","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=16170"},"modified":"2026-04-22T15:45:13","modified_gmt":"2026-04-22T15:45:13","password":"","slug":"css-clamp","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/css-clamp\/","title":{"rendered":"Understanding CSS Clamp and How It Works in the Kadence Theme"},"content":{"rendered":"\n<p>The Kadence Theme now includes support for <strong>CSS Clamp<\/strong> within the Typography settings. This modern approach to responsive design ensures your text adapts smoothly to any screen size. This allows content to stay readable on small devices and balanced on large displays.<br><br>If you\u2019ve ever struggled to find the perfect font size that looks good on both mobile and desktop, CSS Clamp is the solution.<\/p>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id16170_ce2f78-c0 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);}.kb-table-of-content-nav.kb-table-of-content-id16170_ce2f78-c0 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id16170_ce2f78-c0 .kb-table-of-contents-title{font-weight:regular;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id16170_ce2f78-c0 .kb-table-of-content-wrap .kb-table-of-content-list{font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}<\/style>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83, .wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83[data-kb-block=\"kb-adv-heading16170_8471b3-83\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83[data-kb-block=\"kb-adv-heading16170_8471b3-83\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_8471b3-83[data-kb-block=\"kb-adv-heading16170_8471b3-83\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading16170_8471b3-83 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_8471b3-83\">What is CSS Clamp?<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e, .wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e[data-kb-block=\"kb-adv-heading16170_279ee8-6e\"]{margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e[data-kb-block=\"kb-adv-heading16170_279ee8-6e\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_279ee8-6e[data-kb-block=\"kb-adv-heading16170_279ee8-6e\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_279ee8-6e wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_279ee8-6e\"><strong>CSS Clamp<\/strong> is a native CSS function that allows you to define a range for a property. In this case, the font size. It automatically scales the value based on the user\u2019s screen width, while keeping it within the boundaries you define.<br><br>In its simplest form, Clamp looks like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"margin-top:0;margin-bottom:var(--wp--preset--spacing--30)\"><code lang=\"css\" class=\"language-css\">font-size: clamp(min, preferred, max);<\/code><\/pre>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b, .wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b[data-kb-block=\"kb-adv-heading16170_cf061b-4b\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b[data-kb-block=\"kb-adv-heading16170_cf061b-4b\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_cf061b-4b[data-kb-block=\"kb-adv-heading16170_cf061b-4b\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_cf061b-4b wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_cf061b-4b\">Each value has a specific role:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Min:<\/strong> The smallest allowed size.<\/li>\n\n\n\n<li><strong>Preferred:<\/strong> The fluid, flexible value that adjusts as screen size changes.<\/li>\n\n\n\n<li><strong>Max:<\/strong> The largest allowed size.<\/li>\n<\/ul>\n\n\n\n<p>The browser calculates the font size dynamically within this range. If the screen width becomes smaller than your defined range, it stays at the <strong>minimum size<\/strong>. If the screen width becomes larger, it stays at the <strong>maximum size<\/strong>. Between those two points, it scales fluidly.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d, .wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d[data-kb-block=\"kb-adv-heading16170_39fb09-8d\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d[data-kb-block=\"kb-adv-heading16170_39fb09-8d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_39fb09-8d[data-kb-block=\"kb-adv-heading16170_39fb09-8d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading16170_39fb09-8d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_39fb09-8d\">Why CSS Clamp Matters<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90, .wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90[data-kb-block=\"kb-adv-heading16170_c6cde7-90\"]{margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90[data-kb-block=\"kb-adv-heading16170_c6cde7-90\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_c6cde7-90[data-kb-block=\"kb-adv-heading16170_c6cde7-90\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_c6cde7-90 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_c6cde7-90\">Traditionally, developers used <strong>media queries<\/strong> to define font sizes for different screen widths. For example, one value for mobile, another for tablet, and another for desktop. While effective, this required extra CSS and often led to jumps between sizes. Clamp eliminates that problem by making scaling continuous.<br><br><strong>Key advantages:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Fluid scaling<\/strong> \u2014 Fonts resize smoothly between various screen widths.<\/li>\n\n\n\n<li><strong>Better readability<\/strong> \u2014 Text never becomes too small or too large for the viewer.<\/li>\n\n\n\n<li><strong>Consistent design<\/strong> \u2014 Every text scales evenly across all device types.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">How Kadence Uses CSS Clamp<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f, .wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f[data-kb-block=\"kb-adv-heading16170_a38d59-9f\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f[data-kb-block=\"kb-adv-heading16170_a38d59-9f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_a38d59-9f[data-kb-block=\"kb-adv-heading16170_a38d59-9f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_a38d59-9f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_a38d59-9f\">The Kadence Theme brings this functionality directly into your <strong>Typography<\/strong> <strong>settings<\/strong>.<br>Instead of writing custom CSS, you can visually configure your clamp ranges <span style=\"text-decoration: underline\">within the Customizer<\/span>.<br><br>Each <em><strong>Theme Typography Text Type<\/strong><\/em>, such as the <strong>Base Font<\/strong>, <strong>Heading<\/strong> options, or <strong>Buttons<\/strong> font settings, includes a <strong>Clamp Font Size<\/strong> option. When enabled, Kadence automatically generates the <code>clamp()<\/code> function for you based on the input.<br><br>This gives you full control over:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <strong>minimum<\/strong> and <strong>maximum<\/strong> font sizes your text can reach.<\/li>\n\n\n\n<li>The <strong>screen width range<\/strong> where scaling occurs.<\/li>\n<\/ul>\n\n\n\n<p>Kadence handles the math and outputs the correct CSS automatically.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38, .wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38[data-kb-block=\"kb-adv-heading16170_8e8f89-38\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38[data-kb-block=\"kb-adv-heading16170_8e8f89-38\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_8e8f89-38[data-kb-block=\"kb-adv-heading16170_8e8f89-38\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading16170_8e8f89-38 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_8e8f89-38\">How to Access Clamp Settings in the Kadence Theme<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the Dashboard -&gt; <strong>Appearance -&gt; Customize -&gt; Colors &amp; Fonts -&gt; Typography<\/strong> settings.<\/li>\n\n\n\n<li>Select the text type you want to modify ( Base Font, Heading 1, Heading 2, Buttons, etc.).<\/li>\n\n\n\n<li>Find the <strong>Font Size<\/strong> control.<\/li>\n\n\n\n<li>Click the <strong>toggle icon<\/strong> next to the font size input.<\/li>\n\n\n\n<li>Click <strong>Clamp Settings<\/strong> to open the Clamp Font Size panel.<\/li>\n<\/ol>\n\n\n<style>.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);}.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap{grid-template-columns:repeat(4, minmax(0, 1fr));}.kb-row-layout-id16170_a2eeaa-85 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}}@media all and (max-width: 1024px){.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap{grid-template-columns:repeat(4, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap > div:not(.added-for-specificity){grid-column:initial;}.kb-row-layout-id16170_a2eeaa-85 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id16170_a2eeaa-85 alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-4-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column16170_d94da7-b6 > .kt-inside-inner-col,.kadence-column16170_d94da7-b6 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_d94da7-b6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_d94da7-b6 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_d94da7-b6 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_d94da7-b6 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_d94da7-b6{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_d94da7-b6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_d94da7-b6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_d94da7-b6\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_ed3262-d3 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_ed3262-d3 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"614\" height=\"902\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Selecting-a-Font-Size.jpg\" alt=\"Selecting a Font Size\" class=\"kb-img wp-image-16171\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Selecting-a-Font-Size.jpg 614w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Selecting-a-Font-Size-204x300.jpg 204w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Selecting-a-Font-Size-349x512.jpg 349w\" sizes=\"auto, (max-width: 614px) 100vw, 614px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column16170_0f2849-07 > .kt-inside-inner-col,.kadence-column16170_0f2849-07 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_0f2849-07 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_0f2849-07 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_0f2849-07 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_0f2849-07 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_0f2849-07{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_0f2849-07 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_0f2849-07 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_0f2849-07\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_b3e91d-7f .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_b3e91d-7f size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"912\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Toggle-Clamp.jpg\" alt=\"Toggle Clamp\" class=\"kb-img wp-image-16172\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Toggle-Clamp.jpg 602w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Toggle-Clamp-198x300.jpg 198w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Toggle-Clamp-338x512.jpg 338w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column16170_e7f921-a6 > .kt-inside-inner-col,.kadence-column16170_e7f921-a6 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_e7f921-a6 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_e7f921-a6 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_e7f921-a6 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_e7f921-a6 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_e7f921-a6{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_e7f921-a6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_e7f921-a6 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_e7f921-a6\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_17d87d-ea .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_17d87d-ea size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"596\" height=\"776\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Clamp-Settings-Button.jpg\" alt=\"Clamp Settings Button\" class=\"kb-img wp-image-16173\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Clamp-Settings-Button.jpg 596w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Clamp-Settings-Button-230x300.jpg 230w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Clamp-Settings-Button-360x469.jpg 360w\" sizes=\"auto, (max-width: 596px) 100vw, 596px\" \/><\/figure>\n<\/div><\/div>\n\n\n<style>.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col,.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_cf3e6d-d7{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_cf3e6d-d7 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_cf3e6d-d7\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_01eb7d-80 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_01eb7d-80 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"622\" height=\"884\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Font-Clamp-Settings.jpg\" alt=\"Font Clamp Settings\" class=\"kb-img wp-image-16174\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Font-Clamp-Settings.jpg 622w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Font-Clamp-Settings-211x300.jpg 211w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Font-Clamp-Settings-360x512.jpg 360w\" sizes=\"auto, (max-width: 622px) 100vw, 622px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6, .wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6[data-kb-block=\"kb-adv-heading16170_382c1f-f6\"]{text-align:center;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6[data-kb-block=\"kb-adv-heading16170_382c1f-f6\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_382c1f-f6[data-kb-block=\"kb-adv-heading16170_382c1f-f6\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_382c1f-f6 wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading16170_382c1f-f6\"><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/typography-and-setting-font-sizes-for-different-devices\/\">Learn more about the Typography Settings.<\/a><\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13, .wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13[data-kb-block=\"kb-adv-heading16170_5e4926-13\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13[data-kb-block=\"kb-adv-heading16170_5e4926-13\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_5e4926-13[data-kb-block=\"kb-adv-heading16170_5e4926-13\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading16170_5e4926-13 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_5e4926-13\">Font Size Range<\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0, .wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0[data-kb-block=\"kb-adv-heading16170_fe056a-f0\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0[data-kb-block=\"kb-adv-heading16170_fe056a-f0\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_fe056a-f0[data-kb-block=\"kb-adv-heading16170_fe056a-f0\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_fe056a-f0 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_fe056a-f0\">Defines the minimum and maximum font sizes.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Min:<\/strong> The smallest allowed size.<\/li>\n\n\n\n<li><strong>Max:<\/strong> The largest allowed size.<br><em>(You can use PX or REM values.)<\/em><\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f, .wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f[data-kb-block=\"kb-adv-heading16170_eac81c-1f\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f[data-kb-block=\"kb-adv-heading16170_eac81c-1f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_eac81c-1f[data-kb-block=\"kb-adv-heading16170_eac81c-1f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h3 class=\"kt-adv-heading16170_eac81c-1f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_eac81c-1f\">Screen Size Range<\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54, .wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54[data-kb-block=\"kb-adv-heading16170_127794-54\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54[data-kb-block=\"kb-adv-heading16170_127794-54\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_127794-54[data-kb-block=\"kb-adv-heading16170_127794-54\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_127794-54 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_127794-54\">Defines the screen width range where scaling happens.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Min:<\/strong> The smallest screen width where scaling begins.<\/li>\n\n\n\n<li><strong>Max:<\/strong> The largest screen width where scaling stops.<br><em>(These fields accept PX values only.)<\/em><\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e, .wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e[data-kb-block=\"kb-adv-heading16170_a19d3e-8e\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e[data-kb-block=\"kb-adv-heading16170_a19d3e-8e\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_a19d3e-8e[data-kb-block=\"kb-adv-heading16170_a19d3e-8e\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_a19d3e-8e wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_a19d3e-8e\">Once these values are set, Kadence automatically generates the <code>clamp()<\/code> function to scale your text smoothly between those limits.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f, .wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f[data-kb-block=\"kb-adv-heading16170_1652c0-1f\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f[data-kb-block=\"kb-adv-heading16170_1652c0-1f\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_1652c0-1f[data-kb-block=\"kb-adv-heading16170_1652c0-1f\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading16170_1652c0-1f wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_1652c0-1f\">Example<\/h2>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37, .wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37[data-kb-block=\"kb-adv-heading16170_6dbe6d-37\"]{margin-bottom:var(--global-kb-spacing-xxs, 0.5rem);font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37[data-kb-block=\"kb-adv-heading16170_6dbe6d-37\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_6dbe6d-37[data-kb-block=\"kb-adv-heading16170_6dbe6d-37\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_6dbe6d-37 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_6dbe6d-37\">Let\u2019s say you want your base font to scale between 16px and 22px, depending on screen width.<br>You could configure the following in the Clamp Settings panel<\/p>\n\n\n\n<ul style=\"margin-top:var(--wp--preset--spacing--40);margin-bottom:var(--wp--preset--spacing--40)\" class=\"wp-block-list\">\n<li><strong>Font Size Range:<\/strong> Min = 16px, Max = 22px<\/li>\n\n\n\n<li><strong>Screen Size Range:<\/strong> Min = 480px, Max = 1200px<\/li>\n<\/ul>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d, .wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d[data-kb-block=\"kb-adv-heading16170_c4ef11-2d\"]{margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d[data-kb-block=\"kb-adv-heading16170_c4ef11-2d\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_c4ef11-2d[data-kb-block=\"kb-adv-heading16170_c4ef11-2d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_c4ef11-2d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_c4ef11-2d\">Kadence will output something like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">clamp(16px, 0.75rem + 0.8333vw, 22px)<\/code><\/pre>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07, .wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07[data-kb-block=\"kb-adv-heading16170_0131db-07\"]{margin-top:var(--global-kb-spacing-md, 2rem);margin-bottom:0px;font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07[data-kb-block=\"kb-adv-heading16170_0131db-07\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_0131db-07[data-kb-block=\"kb-adv-heading16170_0131db-07\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading16170_0131db-07 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_0131db-07\">This means your text will:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Stay at <strong>16px<\/strong> on smaller screens,<\/li>\n\n\n\n<li>Grow smoothly between 480px and 1200px,<\/li>\n\n\n\n<li>Stop growing once it reaches <strong>22px<\/strong> on larger screens. <\/li>\n<\/ul>\n\n\n\n<p>Here is what this looks like from the Customizer and how the front-end code reflects.<\/p>\n\n\n<style>.kb-row-layout-id16170_3b9a47-ab > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id16170_3b9a47-ab > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id16170_3b9a47-ab > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);grid-template-columns:minmax(0, calc(35% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)))minmax(0, calc(65% - ((var(--global-kb-gap-md, 2rem) * 1 )\/2)));}.kb-row-layout-id16170_3b9a47-ab > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id16170_3b9a47-ab > .kt-row-column-wrap{grid-template-columns:repeat(2, minmax(0, 1fr));}}@media all and (max-width: 767px){.kb-row-layout-id16170_3b9a47-ab > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id16170_3b9a47-ab alignnone wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-2-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top\">\n<style>.kadence-column16170_f65c75-7e > .kt-inside-inner-col,.kadence-column16170_f65c75-7e > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_f65c75-7e > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_f65c75-7e > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_f65c75-7e > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_f65c75-7e > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_f65c75-7e{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_f65c75-7e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_f65c75-7e > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_f65c75-7e\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_839277-4b.kb-image-is-ratio-size, .kb-image16170_839277-4b .kb-image-is-ratio-size{max-width:200px;width:100%;}.wp-block-kadence-column > .kt-inside-inner-col > .kb-image16170_839277-4b.kb-image-is-ratio-size, .wp-block-kadence-column > .kt-inside-inner-col > .kb-image16170_839277-4b .kb-image-is-ratio-size{align-self:unset;}.kb-image16170_839277-4b figure{max-width:200px;}.kb-image16170_839277-4b .image-is-svg, .kb-image16170_839277-4b .image-is-svg img{width:100%;}.kb-image16170_839277-4b .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<div class=\"wp-block-kadence-image kb-image16170_839277-4b\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"616\" height=\"948\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Configured-Clamp-Settings.jpg\" alt=\"Configured Clamp Settings\" class=\"kb-img wp-image-16175\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Configured-Clamp-Settings.jpg 616w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Configured-Clamp-Settings-195x300.jpg 195w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Configured-Clamp-Settings-333x512.jpg 333w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/figure><\/div>\n<\/div><\/div>\n\n\n<style>.kadence-column16170_e05131-a5 > .kt-inside-inner-col,.kadence-column16170_e05131-a5 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column16170_e05131-a5 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column16170_e05131-a5 > .kt-inside-inner-col{flex-direction:column;}.kadence-column16170_e05131-a5 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column16170_e05131-a5 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column16170_e05131-a5{position:relative;}@media all and (max-width: 1024px){.kadence-column16170_e05131-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column16170_e05131-a5 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column16170_e05131-a5\"><div class=\"kt-inside-inner-col\"><style>.kb-image16170_a83a23-26 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_a83a23-26 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1772\" height=\"1000\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS.jpg\" alt=\"Front End Clamp CSS\" class=\"kb-img wp-image-16177\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS.jpg 1772w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS-300x169.jpg 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS-1024x578.jpg 1024w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS-768x433.jpg 768w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS-1536x867.jpg 1536w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Front-End-Clamp-CSS-360x203.jpg 360w\" sizes=\"auto, (max-width: 1772px) 100vw, 1772px\" \/><\/figure>\n<\/div><\/div>\n\n<\/div><\/div>\n\n\n<p>You can also see how the font responds to the screen width as it changes in the GIF below. Notice how the font-size CSS scales up and down as the screen width increases and decreases.<\/p>\n\n\n<style>.kb-image16170_4abd91-06 .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image16170_4abd91-06 size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1432\" height=\"758\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Showing-the-Clamp-in-action.gif\" alt=\"Showing the Clamp in action\" class=\"kb-img wp-image-16178\" \/><\/figure>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98, .wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98[data-kb-block=\"kb-adv-heading16170_d0504b-98\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98[data-kb-block=\"kb-adv-heading16170_d0504b-98\"] mark.kt-highlight{font-style:normal;color:#f76a0c;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading16170_d0504b-98[data-kb-block=\"kb-adv-heading16170_d0504b-98\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 class=\"kt-adv-heading16170_d0504b-98 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading16170_d0504b-98\">Kadence Theme Typography and Kadence Blocks<\/h2>\n\n\n\n<p>Kadence Theme Typography applies globally to both core WordPress blocks and Kadence Blocks. By default, any block that hasn\u2019t been customized will automatically inherit the theme\u2019s font family, style, and size. For example, H1s within blocks will use the theme\u2019s H1 settings, while paragraph and standard texts will follow the Base Font.<br><br>Additionally, Kadence Blocks includes predefined Clamp CSS Variable Font Sizes. These presets also scale fluidly across screen sizes but are exclusive to Kadence Blocks. Customizing these variable sizes requires custom code. To learn more about how predefined clamp sizes work in Kadence Blocks and how to modify them, <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/how-to-customize-the-kadence-blocks-variable-font-sizes-sm-md-lg-xl-2xl-and-3xl\/\">click here <strong>\u29c9<\/strong><\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Kadence Theme now includes support for CSS Clamp within the Typography settings. This modern approach to responsive design ensures your text adapts smoothly to any screen size. This allows content to stay readable on small devices and balanced on large displays. If you\u2019ve ever struggled to find the perfect font size that looks good&#8230;<\/p>\n","protected":false},"author":148263,"featured_media":16175,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[406],"doc_tag":[],"knowledge_base":[6],"class_list":["post-16170","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-theme-settings","knowledge_base-kadence-theme"],"year_month":"2026-04","word_count":777,"total_views":"3589","reactions":{"happy":"1","normal":"1","sad":"1"},"author_info":{"display_name":"victormonk","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/victormonk\/"},"doc_category_info":[{"term_name":"Customize Settings","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/theme-settings\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Theme","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-theme\/","term_slug":"kadence-theme"}],"knowledge_base_slug":["kadence-theme"],"taxonomy_info":{"doc_category":[{"value":406,"label":"Customize Settings"}],"knowledge_base":[{"value":6,"label":"Kadence Theme"}]},"featured_image_src_large":["https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/11\/Configured-Clamp-Settings.jpg",616,948,false],"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/148263"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=16170"}],"version-history":[{"count":4,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16170\/revisions"}],"predecessor-version":[{"id":16183,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/16170\/revisions\/16183"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media\/16175"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=16170"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=16170"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=16170"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=16170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}