[jasmussen]

What?

Followup to #81274 (comment).

Makes the new stroke-based icon for "bold" text visually bolder.

There are pros and cons to this, the pro being that it seems obvious. The downside is that absent adding a fill, when the icons get scaled very large, e.g. 72px or larger, a visual gap will show between the added lines:

It is addressible, as noted, but depending on how we address it, it might prevent us from at a later time going fully stroke-based, e.g. Lucide has a monoline Bold icon. And yet, the feedback is valid of course. Here's a before and after:

Bold or not, strokes or not, the precise design of the bolding deserves feedback too. For the moment, I made it bolder only horizontally, as in observing the before and after test-case above, I found that to be better optically balanced against its neighbour icons. But it can be made bolder also vertically, if we decide this is needed.

Testing Instructions

npm run storybook:dev
View Icons Library, the Bold icon

Use of AI Tools

No.

[github-actions]

🤖 PR meta 🤖

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	34ea6bb	trunk	% Change
timeToFirstByte	39.85 ms +6.78% -2.38%	40.6 ms +2.46% -2.96%	-1.85%
largestContentfulPaint	68 ms +2.94% -5.88%	68 ms +5.88% -0%	0%
lcpMinusTtfb	27.3 ms +5.86% -7.69%	27.4 ms +11.68% -3.83%	-0.36%
wpBeforeTemplate	19.16 ms +7.41% -1.93%	19.41 ms +6.29% -1.55%	-1.29%
wpTemplate	17.27 ms +7.7% -5.85%	17.65 ms +1.59% -4.87%	-2.15%
wpTotal	36.7 ms +7.3% -3.51%	37.32 ms +2.79% -3.03%	-1.66%
wpMemoryUsage	7.61 MB +0% -0%	7.57 MB +0% -0%	0.51%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	34ea6bb	trunk	% Change
timeToFirstByte	33.55 ms +3.87% -2.09%	31.75 ms +3.31% -6.14%	5.67%
largestContentfulPaint	76 ms +5.26% -5.26%	68 ms +8.82% -0%	11.76%
lcpMinusTtfb	42.45 ms +5.06% -4.59%	38.4 ms +5.6% -6.12%	10.55%
wpBeforeTemplate	17.09 ms +5.27% -1.76%	18.21 ms +4.45% -6.04%	-6.15%
wpTemplate	13.56 ms +4.35% -2.95%	10.36 ms +13.9% -2.61%	30.89%
wpTotal	30.81 ms +3.64% -2.3%	29.03 ms +3.51% -6.1%	6.13%
wpMemoryUsage	6.22 MB +0% -0%	6.05 MB +0% -0%	2.86%
wpDbQueries	14 +0% -0%	10 +0% -0%	40%

media-processing

Metric	34ea6bb	trunk	% Change
mediaProcessingJpeg	292.25 ms +2.18% -1.91%	298.4 ms +0.46% -1.46%	-2.06%
mediaProcessingAvif	4170.15 ms +0.5% -1.37%	4219.12 ms +3.25% -0.59%	-1.16%
mediaProcessingJpegToAvif	2842.59 ms +1.21% -1.44%	2855.56 ms +1.83% -0.3%	-0.45%

media-upload

Metric	34ea6bb	trunk	% Change
jpegUploadProcessing	1413.8 ms +1.2% -0.36%	1416.66 ms +0.87% -0.88%	-0.2%
pngUploadProcessing	215.43 ms +31.56% -18.3%	207.97 ms +16.67% -5.88%	3.59%
largeJpegUploadProcessing	1401.66 ms +0.57% -1.09%	1400.88 ms +0.85% -0.71%	0.06%
multipleImageUploadProcessing	1497.14 ms +1.97% -2.42%	1477.48 ms +1.56% -0.72%	1.33%

post-editor

Metric	34ea6bb	trunk	% Change
serverResponse	327.84 ms +3.27% -3.4%	319.3 ms +4.65% -6.68%	2.67%
firstPaint	182.26 ms +14.1% -12.22%	186.76 ms +74.9% -11.38%	-2.41%
domContentLoaded	838.31 ms +1.18% -0.92%	817.09 ms +0.97% -1.96%	2.6%
loaded	839.38 ms +1.19% -0.92%	818.16 ms +0.97% -1.96%	2.59%
firstContentfulPaint	350.39 ms +1.37% -2.57%	342.79 ms +2.36% -4.71%	2.22%
firstBlock	2444.89 ms +0.24% -1.72%	2406.47 ms +2.36% -0.17%	1.6%
type	16.23 ms +3.08% -4.19%	15.56 ms +5.27% -3.79%	4.31%
typeWithoutInspector	15.2 ms +4.14% -3.82%	14.61 ms +5.61% -1.92%	4.04%
typeWithTopToolbar	20 ms +8.95% -2.3%	19.51 ms +1.74% -0.72%	2.51%
typeContainer	7.5 ms +2.4% -6.53%	7.18 ms +10.45% -6.69%	4.46%
focus	55.95 ms +16.41% -7.01%	52.01 ms +10.71% -3.25%	7.58%
firstFocus	151.05 ms +0% -0%	148.72 ms +0% -0%	1.57%
selectAll	405.38 ms +1.14% -1.06%	384.97 ms +1.44% -0.16%	5.3%
listViewOpen	45.16 ms +10.65% -3.85%	45.87 ms +4.51% -6.85%	-1.55%
inserterOpen	19.41 ms +12.42% -9.79%	18.14 ms +12.18% -2.26%	7%
inserterHover	1.79 ms +15.64% -6.7%	1.73 ms +13.87% -4.62%	3.47%
inserterSearch	6.15 ms +25.37% -1.95%	6.21 ms +10.47% -7.09%	-0.97%
loadPatterns	492.41 ms +4.56% -3.34%	496.5 ms +4.12% -4.84%	-0.82%
wpTotal	319.35 ms +3.24% -3.55%	310.77 ms +4.63% -6.87%	2.76%
wpMemoryUsage	13.14 MB +0% -0%	13.11 MB +0% -0%	0.28%
wpDbQueries	54 +0% -0%	54 +0% -0%	0%

site-editor

Metric	34ea6bb	trunk	% Change
serverResponse	489.47 ms +7.45% -4.65%	473.82 ms +2.1% -4.3%	3.3%
firstPaint	253.26 ms +10.61% -16.19%	231.46 ms +32.09% -7.17%	9.42%
domContentLoaded	1147.76 ms +2.01% -1.37%	1126.47 ms +2.89% -1.11%	1.89%
loaded	1148.91 ms +2.01% -1.36%	1127.73 ms +2.87% -1.12%	1.88%
firstContentfulPaint	457.01 ms +1.49% -5.2%	442.72 ms +2.06% -1.94%	3.23%
firstBlock	4150.24 ms +1.19% -0.93%	4110.42 ms +0.84% -0.52%	0.97%
type	18.15 ms +3.42% -8.04%	17.52 ms +2.91% -2.45%	3.6%
navigate	107.17 ms +7.18% -2.44%	112.99 ms +3.02% -1.37%	-5.15%
loadPatterns	1217.18 ms +5.45% -2.4%	1276.6 ms +15.36% -4.24%	-4.65%
loadPages	1056.03 ms +1.89% -2.43%	1044.43 ms +7.26% -0.82%	1.11%
wpTotal	480.33 ms +7.41% -4.86%	464.07 ms +2.25% -4.39%	3.5%
wpMemoryUsage	12.11 MB +0% -0%	12.09 MB +0% -0%	0.13%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{0fb60b6 Run}

[fcoveram]

Given the context where this icon is used, I don't see much value in making it bold. The scenario where a larger size reveals the shape and the gap between the two lines feels like a low risk to me.

From the before-and-after screenshot in the toolbar, I think the before looks better. It looks more consistent with the other icons.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: fcoveram <fcoveram@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[jasmussen]

Appreciate the feedback, and the thumbs up.

I want to still keep this PR open for a bit and gather thoughts. It's a visible change, and I want to note, the new bold icon is still stroke-based, I feel the strategy it is using is a valid one, and I personally don't hate the change.

[t-hamano]

Personally, I'm fine with either style, but would any issues arise if we simply increased the stroke-width from 1.5 instead of modifying the path?

[jasmussen]

Personally, I'm fine with either style, but would any issues arise if we simply increased the stroke-width from 1.5 instead of modifying the path?

Yes, because the icon would grow vertically taller. We could adjust that in-icon by moving the paths, but then we would lose the ability to use the icon in context of other stroke-based icons, e.g. ideally let's say a consumer wanted 2px stroke-width icons, they would have to remember to also increase the stroke-width of the bold icon further.

For that reason, I'd rather we explore the strategy here, of multiple paths. The proposal here uses multiple paths only to make it thicker on the horizontal side, but we can make it thicker vertically as well:

That would give us the 3rd option in this visualisation:

[t-hamano]

For that reason, I'd rather we explore the strategy here, of multiple paths. The proposal here uses multiple paths only to make it thicker on the horizontal side, but we can make it thicker vertically as well:

I see, that makes sense. I'm fine with any approach, so I'll leave it up to you all to decide.

[jameskoster]

If we wanted the icon to be bolder then we should be more intentional about it imo. Appreciate the icon in the PR is heavier, but it's barely noticeable and doesn't really communicate 'bold' to my eye. If anything it looks like a mistake.

[jeryj]

If anything it looks like a mistake.
@jameskoster

This is what I thought when I saw the original lightweight B. I paused because I assumed it was a bug. I'd rather than have this semi-bold than the lightweight version though.

Given the context where this icon is used, I don't see much value in making it bold.
@fcoveram

I think the value is confidence. It feels like a bug. I think it's a quality and trust issue.

I think the before looks better. It looks more consistent with the other icons.

I don't think we should sacrifice meaning for visual weight of an icon that is supposed to communicate boldness. It's like having the I for italic not be slanted, the U for underline not have a __ under it, or the S for strikethrough not having a line through it.

B I U S

vs

FWIW, I never imagined I would care as much about this topic as I apparently do 😅

[jameskoster]

I don't have a strong (pun intended) feeling either way. A B in a toolbar is so ubiquitous I'm not sure the weight matters too much, but you make a good point about consistency with the other icons.

My main feedback was that the visual difference between the two toolbars in the OP is so subtle that I'm not sure I'd even notice that the B is bolder than the other icons. That might just be my eyes though!

[jeryj]

I don't have a strong (pun intended) feeling either way.

😆

My main feedback was that the visual difference between the two toolbars in the OP is so subtle that I'm not sure I'd even notice that the B is bolder than the other icons. That might just be my eyes though!

I feel like the proposed thickness in this PR is just enough to not make me feel like it's a bug. Maybe what bothers me so much is the original B is thin instead of even normal weight? Either way, I'm happy enough with @jasmussen's new B design.

[jasmussen]

Good discussion. Let's go with a bolder icon. I would not want the overall stroke change to sour the legibility goals of the effort overall, and while I think there's a "strokes-only" discussion we should have about fills at a later time, that discussion is not dependant on the bold being a single stroke-shape.

It also resonates with me, the do or do not. Go bold, or don't do anything. How's this?

Fourth option here:

I'll push this change for now, but let me know!

[jeryj]

Thanks for working on these, @jasmussen! The fourth option reads as Bold to me. The third option is enough to make it not seem like a bug and I never would have brought this up 😅 If you randomly showed me two or three and had me guess which one it was, I wouldn't reliably tell the difference.

I'd be happy with 3 or 4. Preference for 4, but if people feel like it's too heavy in context, then totally fine with 3.

[jasmussen]

Cool, 4 is in, anyone for a ✅?

[jeryj]

Be bold :)