Font Sizes

Preset font sizes in Powder are registered and defined within the theme.json file, which is the heart of global styles and settings. This empowers designers to set foundational typography standards and tailor font sizes for various blocks with precision and ease.

Powder utilizes an intuitive approach (T-shirt sizing method) which categorizes font sizes into relatable and easily recognizable tiers.

• Tiny (14px): Ideal for subtle notes or less-emphasized details.
• xSmall (16px): Suitable for footnotes or auxiliary information.
• Small (18px): Commonly used for secondary text elements.
• Medium (20px): The standard size, used for regular body text.
• Large (24px): Perfect for subheadings or highlighting key info.
• xLarge (30px): Often reserved for primary headings or titles.

Here’s the relevant code in theme.json:

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"fluid": false,
					"name": "Tiny",
					"size": "14px",
					"slug": "tiny"
				},
				{
					"fluid": false,
					"name": "xSmall",
					"size": "16px",
					"slug": "x-small"
				},
				{
					"fluid": false,
					"name": "Small",
					"size": "18px",
					"slug": "small"
				},
				{
					"fluid": {
						"min": "18px",
						"max": "20px"
					},
					"name": "Medium",
					"size": "20px",
					"slug": "medium"
				},
				{
					"fluid": {
						"min": "20px",
						"max": "24px"
					},
					"name": "Large",
					"size": "24px",
					"slug": "large"
				},
				{
					"fluid": {
						"min": "24px",
						"max": "30px"
					},
					"name": "xLarge",
					"size": "30px",
					"slug": "x-large"
				}
			]
		}
	}
}

Four additional sizes are included. These sizes are ideal for hero sections, banners, or any other design elements where you want the text to take center stage, where it commands attention and makes a striking impact.

• Max 36: (fluid between 30px and 36px)
• Max 48: (fluid between 36px and 48px)
• Max 60: (fluid between 42px and 60px)
• Max 72: (fluid between 48px and 72px)

Here’s the relevant code in theme.json:

{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"fluid": {
						"min": "30px",
						"max": "36px"
					},
					"name": "36px",
					"size": "36px",
					"slug": "max-36"
				},
				{
					"fluid": {
						"min": "36px",
						"max": "48px"
					},
					"name": "48px",
					"size": "48px",
					"slug": "max-48"
				},
				{
					"fluid": {
						"min": "42px",
						"max": "60px"
					},
					"name": "60px",
					"size": "60px",
					"slug": "max-60"
				},
				{
					"fluid": {
						"min": "48px",
						"max": "72px"
					},
					"name": "72px",
					"size": "72px",
					"slug": "max-72"
				}
			]
		}
	}
}