{"id":11731,"date":"2025-04-09T23:42:36","date_gmt":"2025-04-09T23:42:36","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=11731"},"modified":"2025-10-07T20:54:57","modified_gmt":"2025-10-07T20:54:57","password":"","slug":"how-to-customize-the-kadence-blocks-variable-font-sizes-sm-md-lg-xl-2xl-and-3xl","status":"publish","type":"docs","link":"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\/","title":{"rendered":"How to Customize the Kadence Blocks Variable Font Sizes (SM, MD, LG, XL, 2XL, and 3XL)"},"content":{"rendered":"\n<p>With Kadence Blocks 3.0, Kadence Blocks moved many of our default size settings to use custom variables so you can set small, medium, and large sizes for standard element size settings and let us handle the rest.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"548\" height=\"398\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/04\/image.png\" alt=\"\" class=\"wp-image-11732\" style=\"width:267px;height:auto\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/04\/image.png 548w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/04\/image-300x218.png 300w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/04\/image-360x261.png 360w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/figure><\/div>\n\n\n<p>It is easy to still set your own custom sizes using pixels, or any other unit you want, in the font size block setting. However, sticking with the default variable options will help you keep consistency in your designs and limit the need for responsive overrides. Plus, your design is easier to manage in the long term. For those times when precise controls are required, Kadence Blocks puts that power in your hands as well.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading11731_cfb9cc-db, .wp-block-kadence-advancedheading.kt-adv-heading11731_cfb9cc-db[data-kb-block=\"kb-adv-heading11731_cfb9cc-db\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading11731_cfb9cc-db mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading11731_cfb9cc-db[data-kb-block=\"kb-adv-heading11731_cfb9cc-db\"] 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-heading11731_cfb9cc-db img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading11731_cfb9cc-db[data-kb-block=\"kb-adv-heading11731_cfb9cc-db\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading11731_cfb9cc-db wp-block-kadence-advancedheading has-theme-palette-8-background-color has-background\" data-kb-block=\"kb-adv-heading11731_cfb9cc-db\"><strong>Note: <\/strong>Kadence Blocks uses its own fluid \u201cclamp\u201d font size system, which does not sync with the WordPress Core variable font sizes used in blocks like Paragraph and Heading. Adjusting Kadence font sizes will not affect the WordPress Core font size presets.<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading11731_7bc42a-f3, .wp-block-kadence-advancedheading.kt-adv-heading11731_7bc42a-f3[data-kb-block=\"kb-adv-heading11731_7bc42a-f3\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading11731_7bc42a-f3 mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading11731_7bc42a-f3[data-kb-block=\"kb-adv-heading11731_7bc42a-f3\"] 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-heading11731_7bc42a-f3 img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading11731_7bc42a-f3[data-kb-block=\"kb-adv-heading11731_7bc42a-f3\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"The-default-font-size-values\" class=\"kt-adv-heading11731_7bc42a-f3 wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading11731_7bc42a-f3\">The default font size values<\/h2>\n\n\n\n<p>Here are the default font size values for each variable size:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">'sm'   =&gt; 'clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem)',<br>'md'   =&gt; 'clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem)',<br>'lg'   =&gt; 'clamp(1.75rem, 1.576rem + 0.543vw, 2rem)',<br>'xl'   =&gt; 'clamp(2.25rem, 1.728rem + 1.63vw, 3rem)',<br>'xxl'  =&gt; 'clamp(2.5rem, 1.456rem + 3.26vw, 4rem)',<br>'xxxl' =&gt; 'clamp(2.75rem, 0.489rem + 7.065vw, 6rem)',<\/pre>\n\n\n\n<p>If you\u2019re interested in the technology behind CSS clamp, you can&nbsp;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/clamp\" target=\"_blank\" rel=\"noopener\">read more about it here<\/a>.&nbsp; Essentially, CSS Clamp establishes the high-end viewport size (for example, a desktop browser) and a low-end viewport size (for example, a mobile phone). And no matter how the site is loaded or how a user resizes their browser window, your site will flexibly change the sizes of these elements based on the detected browser window size.&nbsp;<\/p>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading11731_9b853c-8d, .wp-block-kadence-advancedheading.kt-adv-heading11731_9b853c-8d[data-kb-block=\"kb-adv-heading11731_9b853c-8d\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading11731_9b853c-8d mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading11731_9b853c-8d[data-kb-block=\"kb-adv-heading11731_9b853c-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-heading11731_9b853c-8d img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading11731_9b853c-8d[data-kb-block=\"kb-adv-heading11731_9b853c-8d\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<h2 id=\"How-to-set-your-own-clamp-values\" class=\"kt-adv-heading11731_9b853c-8d wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading11731_9b853c-8d\">How to set your own clamp values<\/h2>\n\n\n\n<p>We have a filter so users can set their font size variable values. <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/how-to-add-a-custom-filter-or-function-with-code-snippets\/\">Add this PHP code snippet<\/a> and edit the values appropriately:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/**\n * Customize Kadence Blocks Variable Font Sizes\n *\/\n\nadd_filter( 'kadence_blocks_variable_font_sizes', 'change_kadence_blocks_variable_font_sizes', 15 );\n\nfunction change_kadence_blocks_variable_font_sizes() {\n    return array(\n        'sm'   =&gt; 'clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem)',\n        'md'   =&gt; 'clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem)',\n        'lg'   =&gt; 'clamp(1.75rem, 1.576rem + 0.543vw, 2rem)',\n        'xl'   =&gt; 'clamp(2.25rem, 1.728rem + 1.63vw, 3rem)',\n        'xxl'  =&gt; 'clamp(2.5rem, 1.456rem + 3.26vw, 4rem)',\n        'xxxl' =&gt; 'clamp(2.75rem, 0.489rem + 7.065vw, 6rem)',\n    );\n}<\/code><\/pre>\n\n\n<style>.kadence-column11731_a2d207-03 > .kt-inside-inner-col,.kadence-column11731_a2d207-03 > .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-column11731_a2d207-03 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column11731_a2d207-03 > .kt-inside-inner-col{flex-direction:column;}.kadence-column11731_a2d207-03 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column11731_a2d207-03 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column11731_a2d207-03{position:relative;}@media all and (max-width: 1024px){.kadence-column11731_a2d207-03 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}@media all and (max-width: 767px){.kadence-column11731_a2d207-03 > .kt-inside-inner-col{flex-direction:column;justify-content:center;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column11731_a2d207-03 kvs-lg-false kvs-md-false kvs-sm-false\"><div class=\"kt-inside-inner-col\">\n<p>When using Kadence alongside WordPress Core, you might want to adjust the WordPress Core font sizes, like those in the Paragraph block or other blocks that use variable font sizes. You can do this with a simple code snippet that modifies these values.<br><br>Keep in mind: changes made with this snippet will appear on the <strong>front-end of your site<\/strong>, but they <strong>won\u2019t be visible in the block editor<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"php\" class=\"language-php\">\/**\n * Customize WordPress Core Font Sizes\n * Front-end only\n *\/\n\n\/\/ Central definition of fluid font sizes\nfunction change_wp_core_variable_font_sizes() {\n    return array(\n        'sm'   =&gt; 'clamp(0.8rem, 0.73rem + 0.217vw, 1.05rem)',\n        'md'   =&gt; 'clamp(0.98rem, 1.02rem + 0.217vw, 1.3rem)',\n        'lg'   =&gt; 'clamp(1.2rem, 1.2rem + 1.2vw, 1.5rem)',\n        'xl'   =&gt; 'clamp(1.75rem, 1.526rem + 0.543vw, 1.9rem)',\n        'xxl'  =&gt; 'clamp(2.25rem, 1.728rem + 1.63vw, 3rem)',\n        'xxxl' =&gt; 'clamp(2.5rem, 1.456rem + 3.26vw, 4rem)',\n    );\n}\n\n\/\/ Enqueue front-end CSS variables\nadd_action( 'wp_enqueue_scripts', function() {\n    $fonts = change_wp_core_variable_font_sizes();\n\n    $map = array(\n        'sm'   =&gt; 'small',\n        'md'   =&gt; 'medium',\n        'lg'   =&gt; 'large',\n        'xl'   =&gt; 'x-large',\n        'xxl'  =&gt; 'xx-large',\n        'xxxl' =&gt; 'xxx-large',\n    );\n\n    $css = \":root {\\n\";\n    foreach ( $map as $key =&gt; $slug ) {\n        $css .= \"  --wp--preset--font-size--{$slug}: {$fonts[$key]};\\n\";\n    }\n    $css .= \"}\\n\";\n\n    wp_register_style( 'wp-core-fluid-fonts', false );\n    wp_enqueue_style( 'wp-core-fluid-fonts' );\n    wp_add_inline_style( 'wp-core-fluid-fonts', $css );\n});<\/code><\/pre>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With Kadence Blocks 3.0, Kadence Blocks moved many of our default size settings to use custom variables so you can set small, medium, and large sizes for standard element size settings and let us handle the rest. It is easy to still set your own custom sizes using pixels, or any other unit you want,&#8230;<\/p>\n","protected":false},"author":115173,"featured_media":0,"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":[420],"doc_tag":[],"knowledge_base":[7],"class_list":["post-11731","docs","type-docs","status-publish","hentry","doc_category-blocks-advanced","knowledge_base-kadence-blocks"],"year_month":"2026-04","word_count":607,"total_views":"2812","reactions":{"happy":"2","normal":"1","sad":"4"},"author_info":{"display_name":"Karla","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/karla-levelup\/"},"doc_category_info":[{"term_name":"Advanced","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/blocks-advanced\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Blocks","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-blocks\/","term_slug":"kadence-blocks"}],"knowledge_base_slug":["kadence-blocks"],"taxonomy_info":{"doc_category":[{"value":420,"label":"Advanced"}],"knowledge_base":[{"value":7,"label":"Kadence Blocks"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/11731","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\/115173"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=11731"}],"version-history":[{"count":11,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/11731\/revisions"}],"predecessor-version":[{"id":15414,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/11731\/revisions\/15414"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=11731"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=11731"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=11731"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=11731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}