@KieranMcCann and @KStoller-WMF, please let us know how to proceed with this issue.

Thanks for reporting this @Iniquity and for adding detailed example screenshots!

@KieranMcCann - will you please take a look at this and let us know your thoughts. Thank you!

Thanks for highlighting this @Iniquity!

It is an issue and unfortunately appears in multiple places across our sites and not just on the newcomer homepage and mentor dashboard.

I spoke with @Sarai-WMDE from the Design System team who has been doing a lot of great work recently on our type styles and she explained the root of the problem better than I could so I’ll quote her response:

it's very likely that this variety is caused by the compounding effect, a side effect of using relative units (in this case ems) in production. If, say, you apply a 1em size to a text, its dimension will be relative to the font size of its parent (e.g. 12, then 12x1 = 12px, etc). You can end up with a chain of influence between parents and children that ends up rendering very different sizes from the ones that were originally specified

I think the subpixels (e.g. 12.6) might be the outcome of developers trying to reproduce px specifications in the designs using decimal values + compounding effect

There are two main recommendations I would give in this case:

• (It's very likely that engineers are doing this already) Font sizes should be applied at the lowest child level to try to avoid the compounding effect as much as possible
• At a design level, the most important is that the focus is on the proportions and hierarchy of the typographic scale, instead of caring so much about a specific pixel size

Another technical, definitive way to alleviate this would be using another type of relative unit: rem. This unit makes text relative to the root font size (generally 16px) so it allows translating designs with higher fidelity. But, we unfortunately can't use these at this time because of the need to adjust our UIs to skins (which usually override font sizes)

So to summarise, we don’t really have an easy fix for this. We could define text sizes at the lowest level possible but there will still be inheritance that will result in subpixels in production. I think, although not ideal, that we could live with this as long as the overall visual perception and hierarchy of typographic elements is clear to users. Small subpixel differences, although untidy from a code perspective, will likely be imperceptible to users.

@Sarai-WMDE Do correct me if you disagree or I’ve misrepresented your comments in any way :)

cc @KStoller-WMF

In T312245#8118861, @KieranMcCann wrote:

It is an issue and unfortunately appears in multiple places across our sites and not just on the newcomer homepage and mentor dashboard.

Yes, it is. For example, we have this task: T313828: [EPIC] Typography: improve typography and allow for variable typography settings .

So to summarise, we don’t really have an easy fix for this. We could define text sizes at the lowest level possible but there will still be inheritance that will result in subpixels in production. I think, although not ideal, that we could live with this as long as the overall visual perception and hierarchy of typographic elements is clear to users. Small subpixel differences, although untidy from a code perspective, will likely be imperceptible to users.

Thanks for the detailed comment, but if I look at the code correctly, then different font sizes are simply physically set there: 0.85em, 0.875em, 0.92857em, 0.9em, 12px, 0.92857143em. There are no problems with inheritance.

I wouldn't discard inheritance as an issue entirely, since some of the values look a bit suspicious (e.g. 12.25px = 0.875em if 1em= 14px (Vector's base font-size)). But if the reason for the variety of sizes is the application of different concrete values to each element, then we might need a design solution.
It would be a good idea to verify the design specifications of the Newcomers' Homepage, and check what's the typographic scale defined there (i.e. what are the sizes and hierarchy applied to the different text styles), then try to unify and reproduce said scale uniformly.

All 5 values seem to be close to either 12 or 13px (although we cannot discard an original intention to apply a 14px font size in some cases, like in the previous example). These sizes correspond to a style known as Small text. We should detect the cases in which the intention was to really apply this style and make sure to reflect it. Now, the recommended size for Small text is currently 13px (as specified in our Style guide and in the linked task (T141900: Smaller text size - too many definitions). We would encourage you to consider that dimension to increase the chances of ensuring legibility by default across typefaces, but it's acceptable if you prefer to apply a 12px size in this context for greater hierarchical contrast: there seems to be lack of consensus around this value for now, and further exploration and discussion are needed.

Update regarding the size of Small text: After further conversations, it looks like we'll be leaning towards a consistent, more contrasted 12px after all! It's likely that the Design Style guide will be updated with this new value.