Shields: PNG (raster) font does not have enough letter spacing

Created on 18 Nov 2020  路  4Comments  路  Source: badges/shields

Are you experiencing an issue with...

  • [X] [shields.io](https://shields.io/#/)
  • [ ] My own instance
  • [ ] [badge-maker NPM package](https://www.npmjs.com/package/badge-maker)

:beetle: Description


The numbers inside the raster.shields.io social badge (png version) have letter spacing that is too small, making the text not readable.

:link: Link to the badge
https://raster.shields.io/github/stars/codota/tabnine-intellij?style=social

:bulb: Possible Solution

Increase letter spacing

question

All 4 comments

Thanks for the report @boaz-codota! We're in the process of rewriting our rasterization proxy which produces the png badges, and while the pngs are always going to be less pixel-perfect than the svgs, I do think you can expect to see an improvement once we're done (which should be fairly soon).

Here's a screen grab of what your badge looks like with the new version (sorry for the blur, taken from my local):
image

Can't wait, we love the product in https://tabnine.com/ and use it to display social information in Jetbrains Marketplace and VSCode Marketplace

@boaz-codota Out of interest, what's your use-case for using raster badges in preference to SVG? We know we still serve a lot of PNGs but we don't really have a great handle on where and why they are used over SVG.

I'm glad you asked! We embed those badges in our Jetbrains plugin page.
While the web version renders the svgs perfectly: https://plugins.jetbrains.com/plugin/12798-tabnine-ai-autocomplete-javascript-c-java-python-ruby-rust-go-php--

The IDE cannot render SVGs at all (didn't save a pic of it, but trust me on that one). The PNG version on the other hand works perfectly:
image

Was this page helpful?
0 / 5 - 0 ratings

Related issues

PyvesB picture PyvesB  路  3Comments

kirankotari picture kirankotari  路  3Comments

kerolloz picture kerolloz  路  3Comments

techtonik picture techtonik  路  3Comments

Turnerj picture Turnerj  路  3Comments