svg / svgo.dev

https://svgo.dev/
MIT License
5 stars 3 forks source link

fix: add explicit ascent override on nimbus sans typeface #13

Closed SethFalco closed 3 months ago

SethFalco commented 3 months ago

Font Face Alignment

On Chromium browsers, Nimbus Sans was not vertically aligned properly. This appears to be a due to a difference in how Firefox and Chromium handles fonts with different ascents/descent.

Here is how Chromium/Linux looked when Nimbus Sans was available:

The text in the "Get Started" button is clearly not vertically centered within the height of the button.

I was able to resolve this by setting an explicit ascent-override, however I later found that the theme Docusaurus ships by default already uses a reasonable local font stack. I opted to remove our font stack altogether and use the predefined --ifm-font-family-*, which also resolves the issue.

Here is how it looks now on Chromium/Linux:

The text in the "Get Started" button is now correctly aligned.

Accessibility

In some areas of the site, I forget to also style on :focus as well as :hover for uses that navigate the web with tab or other assistive technologies.

Redundant Classes

Just removes the buttons class which was no longer in use.