Font Sizes

Suede includes a carefully considered type scale designed to create consistency across your website. Each preset font size is defined in the theme’s 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 font sizes into familiar, predictable tiers for consistent, confident typography across your site.

• xxxSmall (12px): An excellent size for eyebrow paragraphs.
• xxSmall (14px): Appropriate for smaller, uppercase uses.
• xSmall (16px): Suitable for footnotes or auxiliary information.
• Base (18px): The standard size used for regular body text.
• Small (20px): Ideal for larger paragraphs or supporting content.
• Medium (24px): Perfect for subheadings or highlighted information.
• Large (30px): Commonly used for section headings and titles.
• xLarge (36px): A great way to bring attention to your words.
• xxLarge (48px): Designed for prominent headings and statements.
• xxxLarge (60px): Reserved for hero sections and key moments.

Below is the relevant code in theme.json:

{
	"settings": {
		"typography": {
			"fontSizes": [
				{ "fluid": false, "name": "xxxSmall", "size": "12px", "slug": "xxx-small" },
				{ "fluid": false, "name": "xxSmall", "size": "14px", "slug": "xx-small" },
				{ "fluid": false, "name": "xSmall", "size": "16px", "slug": "x-small" },
				{ "fluid": false, "name": "Base", "size": "18px", "slug": "base" },
				{
					"fluid": {
						"min": "18px",
						"max": "20px"
					},
					"name": "Small",
					"size": "20px",
					"slug": "small"
				},
				{
					"fluid": {
						"min": "18px",
						"max": "24px"
					},
					"name": "Medium",
					"size": "24px",
					"slug": "medium"
				},
				{
					"fluid": {
						"min": "24px",
						"max": "30px"
					},
					"name": "Large",
					"size": "30px",
					"slug": "large"
				},
				{
					"fluid": {
						"min": "30px",
						"max": "36px"
					},
					"name": "xLarge",
					"size": "36px",
					"slug": "x-large"
				},
				{
					"fluid": {
						"min": "36px",
						"max": "48px"
					},
					"name": "xxLarge",
					"size": "48px",
					"slug": "xx-large"
				},
				{
					"fluid": {
						"min": "48px",
						"max": "60px"
					},
					"name": "xxxLarge",
					"size": "60px",
					"slug": "xxx-large"
				}
			]
		}
	}
}

Fluid Typography

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.

Below are examples of each theme font size:

xxxSmall – 12px

xxSmall – 14px

xSmall – 16px

Base – 18px

Small – 20px

Medium – 24px

Large – 30px

xLarge – 36px

xxLarge – 48px

xxxLarge – 60px