Grid: bold header row

I noticed over on https://vaadin.com/docs/latest/components/grid that the header rows of all example grids are bold. Thinking that this is default, I was surprised to see that locally none of my grids have bold header rows. So i applied this CSS thinking it’s easy enough to do:

    font-weight: bolder;
}```
but it does not work. Setting the font to green works so i know the selector is correct. 

Also on start.vaadin.com the grids don't have bold header rows, so i'm wondering what the Vaadin site is doing to get this working, and why this is being done like that ?

TL;DR hard with 24.2, getting easier with 24.3 https://github.com/vaadin/web-components/issues/5636#issuecomment-1761159685

font-weight: 500 (semi-bold) IS the default on header cells. If yours are not rendering that way, maybe you’re not using the default headers but instead renderers on the headers?

Thanks Rolf for following up. The only renderer i am setting is the ItemDetailsRenderer. I am using Crud and CrudGrid though, maybe they are different?

They shouldn’t be. Could you share a screenshot of how it looks for you?

image.png

(apologies for not replying sooner, i don’t always check back straight away here)

hm, it does look more regular than bold yeah. Could you check the styles applied to the text in the browser’s devtools? (right-click the text, Inspect, then go to the Computed tab and find font-weight)

how about setting the header in HTML bold format ? nameColumn.setHeader(new Html("<b>Name</b>")); ?

This is what i have:
image.png

Thanks for the suggestion, I did not try, perhaps it could work. But i’ld rather not use html directly like that for a header.

It’s not that i absolutely want bold column headers, it’s just that on the Vaadin site (https://vaadin.com/docs/latest/components/grid) they are clearly seen as bold whereas in my application - and on start.vaadin.com grid examples - not. I do think they make for a clearer grid though.

Ok so by the looks of that, it IS set to 500, i.e. semi-bold. I think that leaves us with only two options:

  1. It does render like that too, and we just think it looks wrong for some reason.

  2. The correct font-weight is applied, but the wrong font is used to render it – perhaps a font that lacks a 500 weight?

Since you said the Grid samples in the docs look bolder, we could compare the font-family being rendered between the two.

Looks like you are using Firefox, so if you Inspect the text again, and go to the Fonts tab in the devtools (3 tabs to the right from Computed), it should show you exactly what font is used to render it, like this
image.png

If you do that both for your local Grid, and for a Grid in the docs that looks correct, we can see if they use the exact same font or not.

(and btw @nice-camel no, you can’t pass HTML into a component like that)

The Vaadin site uses Roboto (Roboto Medium), locally it’s using Nimbus Sans (NimbusSans-Regular). The font settings are the same, except that locally i have 18px size, slightly larger than the Vaadin site (15.75px).

Ah, so they are using different fonts. I suppose that would explain the difference.

That Nimbus Sans must be coming from somewhere, though. Either from a stylesheet in your app, or it’s used as the default sans-serif font in your system.

NimbusSans-Regular is, as the name implies, the regular (non-bold) version of the typeface, so it seems it’s using a font that lacks a 500-weight variant.

I have not configured any fonts, everything is default from a vaadin starter app skeleton.

Is this something that a Vaadin app should take care of in general, providing a font in the app itself so that it’s uniform L&F on all platforms?

Vaadin doesn’t provide any fonts by default. The Lumo theme defines a stack of font-families to use, defined as follows:

-apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

The actual font used is resolved by going left-to-right in that list and the browser chooses the first one that is available.

I don’t see how Nimbus Sans would end up in your local app, unless everything before the generic ‘sans-serif’ is unavailable and Nimbus is used as the default sans-serif font in your system.