openui5 icon indicating copy to clipboard operation
openui5 copied to clipboard

Font Bold issue in SAPUI5 Standard Theme on 1.136 LTS

Open danieleama opened this issue 6 months ago • 3 comments

What is the issue and how can we reproduce it?

  1. Open the sample OpenUi5 Documentation

After updating to version 1.136, we noticed that some text appears excessively bold when using the standard theme. Upon inspecting the applied styles, we found that the --sapFontHeaderFamily variable resolves to the following font stack:

"72-Bold", "72-Boldfull", "72", "72full", Arial, Helvetica, sans-serif

It appears that the inclusion of "72-Bold" and "72-Boldfull" causes significantly heavier font rendering compared to previous versions. This is particularly visible in headers and negatively affects the visual appearance of the UI.

We have tested the issue in version 1.138, where the problem no longer occurs — the font rendering looks balanced and consistent again.

However, since 1.136 is currently the latest LTS version, we would like to ask if it would be possible to receive a hotfix for this version, or if any backporting is planned to address the issue.

Thank you for your support. I'm available for any further clarification if needed.

Error:

Image

Expected behavior:

Image

Which OpenUI5 version is your project targeting?

1.136.0

Is the issue device- or browser-specific?

No response

Confirmation

  • [x] I have searched the existing issues and reviewed the relevant documentation as well as the API reference.
  • [x] I am not disclosing any internal or sensitive information.

danieleama avatar Aug 01 '25 09:08 danieleama

Hello @danieleama,

Thank you for reporting this issue — much appreciated!

I’ve managed to reproduce the problem on macOS using both Safari and Firefox. Interestingly, in Chrome, the font weight appears to render correctly on my end.

Could you please share more details about your testing environment — specifically the operating system, the browsers you’ve tested with, and whether the issue is limited to the Demo Kit header tab navigation, or if it affects the UI5 framework in general?

For reference, I’m attaching a screenshot showing how it looks on my setup.

Thanks again!

Best regards, Konstantin

Image

kgogov avatar Aug 01 '25 13:08 kgogov

Hello @kgogov,

Thank you for your prompt reply and for taking the time to reproduce the issue.

To answer your questions: We have several products that use the UI5 framework, and our testing process is conducted across multiple environments, specifically:

  • Windows using Chrome and Edge
  • macOS using Safari

We were able to consistently reproduce the issue on all of these browsers and operating systems.

Additionally, the problem is not limited to the Demo Kit header tab navigation — it appears in multiple UI areas across our applications, where bold headers or labels are used.

Best regards, Daniele

danieleama avatar Aug 01 '25 15:08 danieleama

Hello @danieleama,

We are aware of this problem affecting the sap.m.IconTabHeader and a fix has already been provided for 1.136, which should be released in the upcoming days.

Are there any other controls specifically that are affected by this? You mentioned that the issue appears in multiple UI areas across your applications, where bold headers or labels are used. Which controls specifically are problematic, aside from the sap.m.IconTabHeader?

Best, Siyana

s-todorova avatar Aug 11 '25 07:08 s-todorova