bold items in sidebar have too big bottom margin

[maelle]

[talpitoo]

After the initial investigation this seems to be due to the font face itself: as if the font author wasn't careful enough with the font metrics. The CSS properties are all the same (font face, weight, style, line-height, etc.) and it is happening with the original .ttf file as well.

I am going to further investigate the issue with e.g. FontForge but it is happening on the main cynkraweb site as well. This can be an aesthetic issue in the future, cc. @christophsax

[talpitoo]

@christophsax @maelle you can see the differences in the 'internal font metrics':

1) I think we should 'live with it' if we want to keep Frutiger Bold.

2) Alternatively, when the bold font is removed from the CSS completely, the browser is using 'faux bold' which does not have the same problem (it doesn't change the internal metrics). My vote goes for 2) faux bold.

[christophsax]

I reeeeeaaaaaally don't like faux bold 🤪

We have some other bold versions of the font somewhere, such as Frutiger Book. Will take a look, these fonts cost enough. Seems to affect other lines with bold as well:

Perhaps very naive, but why can't we just increase the overall line space to the one that's produced by the bold font?

[talpitoo]

From a technical/developer/outsider perspective it might seem silly but i understand/respect now that Frutiger is part of the Swiss national identity (just learnt that from https://en.wikipedia.org/wiki/Frutiger_(typeface)). In that case we have to find a solution for faux bold but

1) changing the line height would be opening Pandora's box (either line-height or a CSS hack for the missing cap-size alignment, all in percentages, those roundings might be different for every font size, multiplied by different OS, browser, retina/DPI, etc.)

• https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
• https://seek-oss.github.io/capsize/

2) Since the slightly different line height is not noticeable for static bold text (e.g. where a few words or a link is bold in a longer sentence), it is present at the moment only in the blog's sidebar because there we change bold/normal back and forth on click. How about using a different style for highlighting the active blog category (e.g. underline, inverted background, cynkra blue or similar)?

[talpitoo]

I reeeeeaaaaaally don't like faux bold 🤪

@christophsax okay, noted, please see the other possible solutions above.

[christophsax]

Suggested solution 2 sounds very good to me, and closer to what we have on cynkraweb - there we use color to highlight what is selected:

So looking for a different bold font is a task for after 2030 — very happy with that 😅

[talpitoo]

Okay, in that case we are going to keep Frutiger Bold (in general) but refactor the blog categories highlighting with a different color. I am going to proceed this way.

[talpitoo]

I have used an additional underline to make the highlighted state more prominent.