[ARCHIVED] Custom CSS Header Size Discrepancy

[jhveem]

I am trying to adjust the default size of headers for our institution, and while doing some testing in our beta instance, I noticed that anytime I set a pixel size in the CSS, it gets reduced to 75% of the value I enter.

h2 {

  font-size: 18px;

}

There's the css I did for testing, but instead of 18px, it gets reduced to 14px. I tried a bunch of sizes and confirmed it consistently gets reduced by the same percentage. Does anyone know why this is the case.

I can of course just set everything to (desired value / .75), but my concern would be that whatever is causing the reduction won't happen on every device, on every page, etc so sizes would be inconsistent.

Thanks for any insight.

[James]

 @jhveem  

Probably not related to your 75% issue, should not specify font sizes in pixels for accessibility purposes. Font sizes in Canvas are specified in em or rem units not pixels.

But it is related in that you should not change things for everyone based on your personal experiences in a single browser without understanding what implications that has for other people. Canvas checks all those accessibility things and has reasonable defaults.

Based on the description, the first thing I would check are the browser settings. There is zoom level and a default font size (my images are from Chrome). Your problem sounds like you have something other than a medium font size.

For example, here is the CSS being applied to my dashboard.

When I go into the computed styles, I can see what it's actually using and where the rule came from

My 1.8em is coming through as 28.8px for h2 elements. That's because the "Medium (recommended)" font size in the browser is set to 16px (you can override this in Customize fonts).

The other places, 32px, 1.5em, 1rem, 100% are crossed out. Those are rules that would have a lower specificity or that were overwritten by newer CSS with the same specificity.

If I set my browser's zoom to 75%, the values I gave above don't change. It's still saying 28.8px for h2. That suggests it's not the zoom.

If I go into the settings and change the size to small instead of medium, then the base font size is now 12px instead of 16px. Note that 12px is 75% of 16px.

the specified styles don't change but the computed styles do. Now, it's 21.6px

So, if you're specifying 1em and the base font size of medium is 16px, then you'll get 16px. If you're using 1em with a base font size of small, then you'll get 12px.

If you specify 32px with a font size of medium, you'll get 32px, but if you're using small font size, then you'll get 75% of 32px.

Another thing I considered is that your CSS selector isn't specific enough, but given the fact that it's changing makes it sound like the real issue is the browser default font.

[jhveem]

I had tested it in chrome, edge, and firefox with the issue persisting across browsers, but thank you for the information. Hopefully it is helpful for someone else.

[James]

Can you give us more information?

• Do you have other entries in your custom CSS that might be affecting it? I am not aware of anything in the Canvas CSS that should be setting your fontsize to 75% and it's not happening for me. If this was inside the RCE, the default font size on the browser plays a role, but it shouldn't be happening to custom CSS.
• How are you determining that it's getting reduced to 14px?
• What pages in Canvas does this happen on? I only checked the Dashboard?
• Can you give us some screenshots of what you're seeing?