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 (the 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.

Four additional sizes have been introduced. These extra-large sizes are perfect for hero sections, banner text, or any design segment where the text needs to dominate the visual space, making a bold statement:

• 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": 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"
				},
				{
					"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"
				}
			]
		}
	}
}