New Style Idea: "Meta" Paragraph

[mrwweb]

Sometimes I want clients to be able to make small text but not have access to the Font Size option. Sometimes I want a standardized way of making text, smaller, gray, and italic.

What if we added a styles that made fonts 85%, gray, and italic all in one go? I'm a little nervous about whether we could consistently write a style that correctly understood the base paragraph font size if the paragraph element itself is styles directly.

Thinking out loud and interested in feedback.

[rtvenge]

@mrwweb would rem units work for this? You could make it font-size: .85rem; or something. That would be worth testing on a few different themes.

[mrwweb]

@rtvenge I don't think so?

Many but not all themes still reset :root or html to make 1rem = 10px. In those cases, that would make our font 8.5px.

But the bigger thing I'm stuck on is that if a font size is explicitly set on a paragraph rather than it's container (I think the Block Editor actually does this), then setting the 85% font size overrides the font-size, rather than modifying the cascade's font size for paragraphs.

This would work:

.entry-content {
  font-size: 1.125rem;
}
p.is-style-meta {
  font-size: 85%;
}

¯_(ツ)_/¯:

.entry-content p {
  font-size: 1.125rem;
}
p.is-style-meta {
  font-size: 85%;
}

[rtvenge]

@mrwweb would it be too much to only set the italic and have the theme developer style our class? I guess the goal of this is to stay away from required developer changes.

Maybe the better solution to this problem would be a Block Pattern. (paragraph, italic, font-size set to extra small).