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.
- 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.
- xxLarge (36px): A great way to bring attention to your words.
Below is the relevant code in theme.json:
{
"settings": {
"typography": {
"fontSizes": [
{
"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": "xxLarge",
"size": "36px",
"slug": "xx-large"
}
]
}
}
}Fluid Typography
Fluid typography is the adaptation of font sizes with changes in viewport width. As a result, fonts can smoothly scale between a minimum and maximum size—creating uniformity and optimal communication.
Below are examples of each theme font size:
xSmall – 16px
Small – 18px
Medium – 20px
Large – 24px
xLarge – 30px
xxLarge – 36px