Button balance off if Roboto is not used

[DouglasRiddle]

When Roboto is not used (not used by default in the halfmoon CSS) the balance of the button element is off. An example of this is below, on the left is with Roboto enabled and on the right is without.

A quick way to test this is to load the buttons documentation page and toggle the documentation-styles-2.css body font-family on and off.

/* documentation-styles-2.css */
body {
    font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* halfmoon.min.css */
body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

[halfmoonui]

Hey, thanks for raising a detailed issue. May I ask, which browser are you using?

Also regarding Roboto, it is not meant to be used by default. Since Halfmoon is a framework, it is built to use the system font. I use Roboto on the documentation site as a fallback if Apple system fonts are not available. Of course, most people will probably choose different fonts for their sites.

[DouglasRiddle]

The screenshot was taken from Windows 10 with Chrome, but I just tested in Firefox and it does the same.

I would expect the button text to be balanced/centered regardless of the font and not be reliant on a specific font.

[halfmoonui]

That is exactly how fonts work though. Different fonts have different heights (even with the same font-size property). This post explains it really well: https://www.creativelive.com/blog/why-do-font-sizes-vary/

The buttons in Halfmoon have the following styles:

.btn {
  height: 3.2rem;
  line-height: 3.2rem;
}

This makes the text vertically centered, but the degree to which it appears vertically centered depends on the font-family being used. However, if someone can suggest a possible fix for this which I am not aware of, I am all ears.

[DouglasRiddle]

That makes sense. It looks like leading-trim will help with this issue once it arrives.

Just to verify, as a user of this framework my options are to either use Roboto or write an override for the base halfmoon css to get the balance as expected for the font I use. Is this accurate?

[halfmoonui]

No, because as I mentioned before, I really think it depends on your own perception, because the differences are tiny. For instance, I genuinely prefer the look of the buttons on my Mac (where Apple system font is available). With Roboto, at least to me, the text looks one pixel above where it ideally should be. This is probably because I do most of the development on my Mac, so I am used to that look.

If Roboto looks right to you, go for it, or you can override the base as you said, but I don't think those are the only options.

[DouglasRiddle]

Okay. Thanks for your input and communication on this perceived issue.