{"id":39,"date":"2025-09-26T08:50:52","date_gmt":"2025-09-26T08:50:52","guid":{"rendered":"https:\/\/ska-blocks.com\/docs\/2025\/09\/26\/changing-default-heading-sizes\/"},"modified":"2025-09-27T07:36:32","modified_gmt":"2025-09-27T07:36:32","slug":"changing-default-heading-sizes","status":"publish","type":"post","link":"https:\/\/ska-blocks.com\/docs\/changing-default-heading-sizes\/","title":{"rendered":"Changing default heading sizes"},"content":{"rendered":"\n<p>By default the ska-theme <code>h1-h6<\/code> headings use Tailwind <code>4xl<\/code> to <code>lg<\/code> sizes and also include some fluidity for <code>h1-h3<\/code> as these elements tend to take up quite a lot of space on mobile devices otherwise.<\/p>\n\n\n\n<p>To change the default values you can copy the variables from <strong>ska-blocks -&gt; Tailwind -&gt; Theme theme<\/strong> to <strong>Tailwind -&gt; Custom theme<\/strong> to override them:<\/p>\n\n\n\n<div class=\"wp-block-ska-code not-prose ska-preset--ska-theme--code\"><header><span class=\"title\">Default heading sizes<\/span><span class=\"label language-css\">CSS<\/span><\/header><div class=\"content\"><pre class=\"code css language-css\"><code class=\"language-css\">\/* Heading sizes *\/\n--text-h1: clamp(var(--text-4xl), 2.5vw, var(--text-5xl));\n--text-h1--line-height: var(--text-5xl--line-height);\n--text-h2: clamp(var(--text-3xl), 2.5vw, var(--text-4xl));\n--text-h2--line-height: var(--text-4xl--line-height);\n--text-h3: clamp(var(--text-2xl), 2.5vw, var(--text-3xl));\n--text-h3--line-height: var(--text-3xl--line-height);\n--text-h4: var(--text-2xl);\n--text-h4--line-height: var(--text-2xl--line-height);\n--text-h5: var(--text-xl);\n--text-h5--line-height: var(--text-xl--line-height);\n--text-h6: var(--text-lg);\n--text-h6--line-height: var(--text-lg--line-height);<\/code><\/pre><button :class=\"{error: state === &apos;error&apos;, success: state === &apos;success&apos;}\" x-data=\"{state:&apos;&apos;}\" x-on:click=\"navigator.clipboard ? (navigator.clipboard.writeText($el.previousElementSibling.innerText), $el.innerText = `Copied!`, state = &apos;success&apos;) : ($el.innerText = `Can&amp;#039;t copy`, state = &apos;error&apos;)\" class=\"copy\" type=\"button\">Copy<\/button><\/div><\/div>\n\n\n\n<p>Headings font family, weight and letter spacing can be edited normally from theme options <strong>ska-blocks -&gt; Theme -&gt; Typography<\/strong>.<\/p>\n\n\n\n<div role=\"figure\" class=\"inline-block p-1 ring wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2024\/03\/image-94.png\" alt=\"ska-theme heading typography options - font family, font weight and letter spacing\" loading=\"lazy\"\/><\/div>\n\n\n\n<p>To use a different font family, you would first need to add it to <strong>ska-blocks -&gt; Tailwind -&gt; Typography -&gt; Font family<\/strong>, by either adding a remote font to an existing family like <code>sans<\/code> or creating a whole new font option and then using it from <strong>ska-theme -&gt; Typography<\/strong>.<\/p>\n\n\n\n<p>Color defaults to the &#8220;heading&#8221; value in the under <strong>ska-blocks -&gt; Tailwind -&gt; Theme colors -&gt; <\/strong>&#8220;<strong>site<\/strong>&#8220;<strong> palette<\/strong>.<\/p>\n\n\n\n<div role=\"figure\" class=\"inline-block p-4 pt-3 rounded-lg ring ring-site-border shadow-lg wp-block-ska-image image\"><img decoding=\"async\" src=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-18.png\" alt=\"ska-blocks Tailwind theme palette\" width=\"475\" height=\"385\" loading=\"lazy\" srcset=\"https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-18.png 475w, https:\/\/ska-blocks.com\/docs\/wp-content\/uploads\/sites\/3\/2025\/09\/image-18-300x243.png 300w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/div>\n","protected":false},"excerpt":{"rendered":"<p>By default the ska-theme h1-h6 headings use Tailwind 4xl to lg sizes and also include some fluidity for h1-h3 as these elements tend to take up quite a lot of space on mobile devices otherwise. To change the default values you can copy the variables from ska-blocks -&gt; Tailwind -&gt; Theme theme to Tailwind -&gt;&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-39","post","type-post","status-publish","format-standard","hentry","category-ska-theme"],"_links":{"self":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":3,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/39\/revisions"}],"predecessor-version":[{"id":305,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/posts\/39\/revisions\/305"}],"wp:attachment":[{"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/media?parent=39"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/categories?post=39"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ska-blocks.com\/docs\/wp-json\/wp\/v2\/tags?post=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}