{"id":6652,"date":"2026-07-12T07:50:38","date_gmt":"2026-07-12T14:50:38","guid":{"rendered":"https:\/\/briangardner.com\/suede\/?page_id=6652"},"modified":"2026-08-01T15:01:37","modified_gmt":"2026-08-01T22:01:37","slug":"font-sizes","status":"publish","type":"page","link":"https:\/\/briangardner.com\/suede\/docs\/font-sizes\/","title":{"rendered":"Font Sizes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Suede includes a carefully considered type scale designed to create consistency across your website. Each preset font size is defined in the theme\u2019s global styles, making it easy to establish a clear visual hierarchy.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"font-style:normal;font-weight:1000\">Sample Font Weight<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Rather than relying on arbitrary pixel values, the Suede theme utilizes an intuitive T-shirt sizing system that groups font sizes into familiar, predictable tiers for consistent, confident typography across your site.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>xxxSmall (12px):<\/strong> An excellent size for eyebrow paragraphs.<\/li>\n\n\n\n<li><strong>xxSmall (14px):<\/strong> Appropriate for smaller, uppercase uses.<\/li>\n\n\n\n<li>x<strong>Small (16px):<\/strong> Suitable for footnotes or auxiliary information.<\/li>\n\n\n\n<li><strong>Base (18px):<\/strong> The standard size used for regular body text.<\/li>\n\n\n\n<li><strong>Small (20px):<\/strong> Ideal for larger paragraphs or supporting content.<\/li>\n\n\n\n<li><strong>Medium (24px):<\/strong> Perfect for subheadings or highlighted information.<\/li>\n\n\n\n<li><strong>Large (30px):<\/strong> Commonly used for section headings and titles.<\/li>\n\n\n\n<li><strong>xLarge (36px):<\/strong> A great way to bring attention to your words.<\/li>\n\n\n\n<li><strong>xxLarge (48px):<\/strong> Designed for prominent headings and statements.<\/li>\n\n\n\n<li><strong>xxxLarge (60px):<\/strong> Reserved for hero sections and key moments.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Below is the relevant code in theme.json:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n\t\"settings\": {\n\t\t\"typography\": {\n\t\t\t\"fontSizes\": &#91;\n\t\t\t\t{ \"fluid\": false, \"name\": \"xxxSmall\", \"size\": \"12px\", \"slug\": \"xxx-small\" },\n\t\t\t\t{ \"fluid\": false, \"name\": \"xxSmall\", \"size\": \"14px\", \"slug\": \"xx-small\" },\n\t\t\t\t{ \"fluid\": false, \"name\": \"xSmall\", \"size\": \"16px\", \"slug\": \"x-small\" },\n\t\t\t\t{ \"fluid\": false, \"name\": \"Base\", \"size\": \"18px\", \"slug\": \"base\" },\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"18px\",\n\t\t\t\t\t\t\"max\": \"20px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"Small\",\n\t\t\t\t\t\"size\": \"20px\",\n\t\t\t\t\t\"slug\": \"small\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"18px\",\n\t\t\t\t\t\t\"max\": \"24px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"Medium\",\n\t\t\t\t\t\"size\": \"24px\",\n\t\t\t\t\t\"slug\": \"medium\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"24px\",\n\t\t\t\t\t\t\"max\": \"30px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"Large\",\n\t\t\t\t\t\"size\": \"30px\",\n\t\t\t\t\t\"slug\": \"large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"30px\",\n\t\t\t\t\t\t\"max\": \"36px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"xLarge\",\n\t\t\t\t\t\"size\": \"36px\",\n\t\t\t\t\t\"slug\": \"x-large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"36px\",\n\t\t\t\t\t\t\"max\": \"48px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"xxLarge\",\n\t\t\t\t\t\"size\": \"48px\",\n\t\t\t\t\t\"slug\": \"xx-large\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\t\"fluid\": {\n\t\t\t\t\t\t\"min\": \"48px\",\n\t\t\t\t\t\t\"max\": \"60px\"\n\t\t\t\t\t},\n\t\t\t\t\t\"name\": \"xxxLarge\",\n\t\t\t\t\t\"size\": \"60px\",\n\t\t\t\t\t\"slug\": \"xxx-large\"\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t}\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--40)\">Fluid Typography<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Fluid typography allows font sizes to scale smoothly with the width of the viewport. Instead of fixed sizes, text adjusts between defined minimum and maximum values to maintain readability, strengthen visual hierarchy, and create a more consistent reading experience across devices.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below are examples of each theme font size:<\/p>\n\n\n\n<p class=\"has-xxx-small-font-size wp-block-paragraph\" style=\"line-height:1\">xxxSmall &#8211; 12px<\/p>\n\n\n\n<p class=\"has-xx-small-font-size wp-block-paragraph\" style=\"line-height:1\">xxSmall &#8211; 14px<\/p>\n\n\n\n<p class=\"has-x-small-font-size wp-block-paragraph\" style=\"line-height:1\">xSmall &#8211; 16px<\/p>\n\n\n\n<p class=\"wp-block-paragraph\" style=\"line-height:1\">Base &#8211; 18px<\/p>\n\n\n\n<p class=\"has-small-font-size wp-block-paragraph\" style=\"line-height:1\">Small &#8211; 20px<\/p>\n\n\n\n<p class=\"has-medium-font-size wp-block-paragraph\" style=\"line-height:1\">Medium &#8211; 24px<\/p>\n\n\n\n<p class=\"has-large-font-size wp-block-paragraph\" style=\"line-height:1\">Large &#8211; 30px<\/p>\n\n\n\n<p class=\"has-x-large-font-size wp-block-paragraph\" style=\"line-height:1\">xLarge &#8211; 36px<\/p>\n\n\n\n<p class=\"has-xx-large-font-size wp-block-paragraph\" style=\"line-height:1\">xxLarge &#8211; 48px<\/p>\n\n\n\n<p class=\"has-xxx-large-font-size wp-block-paragraph\" style=\"line-height:1\">xxxLarge &#8211; 60px<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Suede includes a carefully considered type scale designed to create consistency across your website. Each preset font size is defined in the theme\u2019s global styles, making it easy to establish a clear visual hierarchy. Sample Font Weight Rather than relying on arbitrary pixel values, the Suede theme utilizes an intuitive T-shirt sizing system that groups [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":6655,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"simple_seo_seo_title":"Suede Font Sizes \u2013 Brian Gardner","simple_seo_seo_description":"Explore the typography system in Suede, including preset font sizes, fluid typography, and a type scale designed for clarity and consistency.","simple_seo_seo_robots":"","simple_seo_seo_canonical":"","simple_seo_seo_redirect":"","footnotes":""},"class_list":["post-6652","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/comments?post=6652"}],"version-history":[{"count":4,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6652\/revisions"}],"predecessor-version":[{"id":6763,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6652\/revisions\/6763"}],"up":[{"embeddable":true,"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/pages\/6655"}],"wp:attachment":[{"href":"https:\/\/briangardner.com\/suede\/wp-json\/wp\/v2\/media?parent=6652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}